 |
JavaScript and galleries, what do you associate? I associate the word plethora. Though it's not easy for new projects to impress, SwipeView does. Because SwipeView supports touch control, it is ideal for usage on mobile devices such as tablets and smartphones. You navigate through the galleries with swipes. Non-mobile devices imitate the swipes with mouse actions. The project even features classical navigation concepts.
Grid systems are a key component of graphic design, but they’ve always been designed for canvases with fixed dimensions. Until now. Today we’re designing for a medium that has no fixed dimensions, a medium that can and will shape-shift to better suit its environment—a medium capable of displaying a single layout on a smartphone, a billboard in Times Square, and everything in between.
We’re designing for an infinite canvas—and for that, we need an infinite grid system.
It’s common to think of responsive design as multiple layouts: mobile, tablet, desktop, etc. The problem is the “in-between� sizes tend to suffer, so we end up with layouts that look great at specific dimensions (320, 720, 960), but less than great for everything else. So while a site may look perfect on your 640x960 iPhone 4, it’s going to be a bit off on a visitor’s Nokia Lumia (480x800), or the 685x308 browser window you have open on your desktop. It might even look a little off on that shiny new iPhone 5 (640x1136) your cousin just bought, not to mention the countless other older or less-popular devices out there.
As the spectrum of device resolutions gets wider and smoother, focusing all our attention on “key dimensions� for each page is going to result in a subpar experience for more and more users. Instead, we need to create a grid system that embraces the medium’s lack of fixed dimensions, resulting in a single layout with multiple states that transition seamlessly from one to another, and bring structure to our content whatever the screen size.
Grids are simply a tool for visual problem solving. Creating a layout is like doing a jigsaw puzzle; you have a bunch of pieces and you have to figure out how they should fit together. When we construct a grid, we’re creating layout boundaries: known relationships and constraints that define an environment wherein an appropriate solution can occur. But when we construct an infinite grid, we’re not just setting the boundaries for a layout, but a layout system, with too many variables for us to nail everything down. If we define the important relationships, the blanks will fill in themselves.
For a grid to be useful, it has to be based on the things we know. In traditional media, canvas dimensions are a known constraint, so it makes sense that we start with the edges and define a grid’s relationships relative to them. With digital, however, the canvas is an unknown, making it a poor foundation to base a layout on.
Instead, we need to build on what we do know: content.
In order to embrace designing native layouts for the web—whatever the device—we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.
— Mark Boulton, “A Richer Canvas"
When designing from the canvas in, the canvas dimensions are the constant on which the whole grid is anchored. Everything is sized and positioned relative to them. Designing from the content out means finding a constant in your content—be it the ideal measure of a paragraph or the dimensions of an ad unit—and building your grid out from there to fill the space available.
Now, layouts that expand to fill the space available are nothing new—after all, fluid layouts are basically the web’s default—but very few layouts can be stretched or squashed indefinitely without the relationships between components breaking down, and that’s where states come in.
Fluid layouts are often compared to water, but water isn’t always fluid. H2O has three different states, and depending on the temperature can be a solid, liquid, or gas, transitioning seamlessly from one to another at specific points (0ºC, 100ºC). An infinite grid also has multiple states (single column, multi-column, etc.), and should transition as seamlessly as possible between them at specific breakpoints as well. For example, just as ice is an appropriate state for water when the temperature is low, a single-column layout may be the appropriate state for an infinite grid on smaller devices.
Water’s state change is caused by the rearrangement of its molecules. When an infinite grid changes state, we rearrange its components.
Each state in a responsive layout tends to be made up of the same components, such as an image gallery or navigation menu. However, as Ethan Marcotte recently outlined, the form these components take can vary dramatically between one state and another, usually involving a change in one or more of the following attributes:
Considering how each component’s attributes may change between states helps ensure that the grid system produces the right layout for the space available. In this example, watch how the different components adjust their width (between fixed and flexible) and position between states.
Though we’re only beginning to scratch the surface of designing infinite grids, a few techniques are already proving useful. To get started, here are a few guidelines:
Designing a grid is about deciding what should be proportional to what. When you choose a unit, you bind a dimension to a particular variable:
Absolute units like pixels effectively give a layout a sell-by date, locking it to a finite resolution range in which it will “work.� Proportional units (ems, rems, and percentages) enable you to define the important relationships between elements, and are a crucial first step on the road to resolution independence.
Every layout has a natural “optimum� range for its content. How wide can you stretch it before it starts to break? How small can you squish it before it starts to collapse? For example, if the width available is less than 45 characters per line, your layout starts to feel cramped; if there’s more than a column’s worth of white space on either side of your layout, the content starts to feel dwarfed. Where these extremes occur differs for every design, and depends largely on your content.
Designing for the extremes first forces you to consider how best to present your content at either end of the spectrum. Consider the hierarchy, density, interaction, and width of each component at the smallest state, then do the same for the largest state.
For example, lets say my largest state is 75em wide (any larger and the white space starts to dwarf the content), and my smallest is 34em (any smaller and the measure is less than optimal). In the largest state it makes sense for my navigation to be a horizontal list (interaction) at the top (hierarchy), but in the smallest state it might make more sense to move it to the bottom of the layout (hierarchy), or collapse it into a show/hide list (interaction). Designing these independently of one another helps you be more objective about what is best for each state, rather than stretching a one-size-fits-all solution across every state.
Once you’ve worked out the extremes, it’s time to consider how and where one state should transition to another. Just like water changes to steam when its molecules get too far apart, one state should change to another when the relationships between its components begin to break down, such as when the measure is getting too wide, or the left-aligned logo is getting so far from the right-aligned menu that the visual connection between them is broken.
This is where live prototypes come in handy. It’s incredibly difficult to predict exactly at what width (in relation to the content) a layout needs to change from one state to another. A prototype allows you to easily resize your browser to find the exact point at which relationships break down, so you can add a breakpoint there. New tools (like Gridset and Responsive.is) are making it easier than ever to create and test responsive prototypes, so there’s no excuse not to.
The number of states you require will depend on how much your layout changes from one extreme to the other. For example, my smallest state has a single column with a collapsed menu, and my largest state has three columns and an expanded menu. However neither state looks quite right between 34em and 53em, so I’ve added an “in-between� state which maintains the smallest state’s single column article, but expands the menu and divides the footer into three columns to make the most of the space available. This smooths out the transition from one extreme to another quite nicely.
With each state change, remember to reconsider the hierarchy, density, interaction, and width of each component. Perhaps your main content column should be fixed width now to ensure the measure doesn’t get too wide, or maybe you have room to add more information (density) to your navigation?
So we now have a responsive layout with multiple states, that transitions smoothly from the smallest state to the largest. But that’s only a range of 34 to 75em. What about when the available space is smaller or greater than those states? How do we get a layout that truly goes from zero to ∞?
At the smaller end of the scale space is precious, so we need to make the most of what we have. For under 20em, I’ve reduced (but not removed) margins, decreased line height, and indented bulleted lists. Basically, I’ve done what I can to optimize readability, even though I have a less-than-optimum amount of space available.
At the other end of the scale, the problem is too much space, specifically whitespace. This makes content feel dwarfed, so we need to find ways to balance it out. Unfortunately, simply scaling up a layout indiscriminately doesn’t always work, as we start to come up against reading distance. If you scale up your text size to maintain approximately sixty characters per line, but the type is so big that I have to physically turn my head to read it, that’s not a good experience.
Instead, look for elements such as headers, dividers, or images that you can scale up with the canvas, which helps anchor a layout visually without ruining readability. In my example, the ruler element that stretches full-width helps “anchor� the design in the whitespace, and at 75em I start scaling up the elements relative to the viewport size using VW units. The body text starts to get uncomfortably large at 90em so I use rem units to keep it at a comfortable reading size while the other elements scale around it.
Either way, the goal is to make the most of the space available, relative to your content, to maximize readability and presentation.
Actually, infinity would be enough.
Using a predefined grid seems to make as much sense as using a predefined colour scheme.
I’ve tried to stay away from specifics here, because there are none. Each layout is different, and there are no magic numbers that will work every time.
Instead, we have to nail down the relationships between elements, and then let the specifics take care of themselves. We don’t have all the answers yet, but doing this will help us ask the right questions.
This is a problem worth solving. And we’re not just solving it for ourselves, but for everyone who designs for digital media in the future—and that could be a lot of people. An infinite number, even.
RSS readers: Don't forget to join the discussion!
If you’re making websites, chances are you’ve given some thought to what constitutes a responsive-friendly design process—and you’ve probably found that adding a mockup for every breakpoint isn’t a sustainable approach.
At least, that’s what happened at my company, Bearded, where we had spent years creating websites in Photoshop or Illustrator, having those mockups approved by our clients, then recreating those designs with CSS.
Until now. A few months ago, we stopped making static image-based mockups in favor of designing with code. This is not a new idea—heck, Andy Clarke was arguing for in-browser design in 2008. But new or not, you may still be mystified at where to begin—or feel unmoored and disoriented at the prospect of giving up the approach you’ve long relied on.
But fear not, gentle reader. Let’s take a look at our new mockup-less web design process and see just how easy it can be to get that Photoshop monkey off your back, and have a fresh new beginning with your old friend the web browser.
Before we begin designing, we work with our clients to clearly define and prioritize the information that will go on the site. My first question is simple: Why do you need a website? Then I ask, what do you hope to accomplish as an organization, and what is your audience looking for? The answers to questions like these will help us define the functionality and information hierarchy of the site.
Once we understand the purpose of the website as a whole, we’ll apply that goal to something finite and designable, like the homepage. Before we even get to wireframing, we can express our site’s information hierarchy in the simplest possible way: as a numbered list. For a recent client, the American Association for Homecare, we ended up with a homepage list that looks like this:
Without committing to any visual decisions about how to express it, we have created an accurate top-level informational hierarchy for the site’s homepage. We now know that—no matter what the homepage looks like—if it can correctly present this information, it will be a victory for the organization and the site’s users.
Once we understand the site’s content and priorities, our first visual step is to create wireframes. But as you may have already noticed, shuffling text around a Photoshop file can be time-consuming and frustrating.
But you know what’s really great for laying out content in a way that accurately expresses its hierarchy? You guessed it: HTML and CSS! So we give Photoshop a well-deserved break, fire up our favorite text editor and WebKit browser, and start wrapping our content in semantic tags using a mobile-first approach.
When you only have a few hundred pixels of width to work with, priorities become even clearer, and hard decisions even more necessary. You may often find yourself asking, “Does this really need to be here?� By focusing on mobile first, we can have these discussions with clients earlier and more effectively. And the more informational load we can jettison now, the more our users will thank us later.
Once our mobile hierarchy is clear, it’s time to progressively widen the browser and consider more complex layout decisions. Each time we encounter a width where things begin to fall apart, we can add a new media query to adjust the layout.
To help us with in-browser layout development at Bearded, we developed a responsive grid system that allows us to quickly apply nestable column properties with CSS (or, more accurately, SASS and Compass). With these handy mix-ins at our disposal, we can quickly experiment with different responsive layout approaches without a lot of cognitive overhead.
At this point, our HTML/CSS wireframes are looking pretty good. And since we’re working with the same medium (code and the browser) throughout the process, we can naturally evolve our wireframes into the final designs.
It’s right around this time that we’ll take a brief diversion from our HTML to define some sensible style elements (similar to Samantha Warren’s style tiles or Sparkbox’s style prototypes). This is usually a small Photoshop canvas where we bring in the typography we’ve been working with in the wireframes and start experimenting with color, texture, and imagery. Once defined, we can use these basic visual building blocks to nudge our wireframes toward website-ness.
As we layer in more visual elements, we tend to bounce back and forth between our text editors and Photoshop. But Photoshop is no longer the primary design canvas; it’s now more of a sketchpad. Do we need to tweak our typography to perfection? Nope. Can we just throw a browser screenshot into Photoshop to mock up a new background graphic on the site? Sure! Don’t want to show this sketchy, half-baked PSD to a client? Not a problem—you never will.
Not only does this method reinforce a content-driven approach to design, but it’s also crafting something that’s useful to the final product. The HTML you created for your design comp will also let developers know what kind of markup you’re looking for from the CMS. And if you’re both doing your jobs well, it means the CSS you’re about to write can be dropped into the final site with minimal adjustment.
No longer will you waste away your afternoons pushing pixels in Photoshop, only to perfect a thing you’ll ultimately throw away and rebuild in CSS anyway. Some things are accomplished more efficiently in CSS, while others render more quickly in Photoshop—so we pick the tools that feel natural in the moment. But ultimately, everything ends up in the browser. That’s how we design it, and that’s how our clients view it.
“Oh yes,� you might be saying, “clients! How does this new mockup-less world fit into our design approval process?� Glad you asked.
Sending clients in-browser comps is remarkably easy, as it turns out. We just e-mail them a URL. Clients can look at the designs in various browsers and on various devices, resize them, click links and navigation, and check out hover states. Instead of asking our clients to pretend that an image is a website, we show them… a website.
We always provide a permanent project URL with /v1 appended to it, such as aafh-css.heroku.com/v1. From that point on, version one never changes, and subsequent revisions are posted at their own URLs, like aafh-css.heroku.com/v2. This continues until we reach an approved version.
Because each version has a distinct permanent URL (we use Heroku’s free hosting for non-production environments like this), we can still have an agreed-upon number of revisions in our contract, just like we did with static comps. If the project requires more tweaking than we envisioned, it may be time to discuss allocating additional hours to the budget.
This also allows everyone to easily go back and review each comp whenever they want. When we’re done with revisions, clients get the same signoff form as usual. But in place of a file name, the final designs are specified by that version’s permanent URL.
Now, you may be wondering if your clients will accept this newfangled process. At Bearded we’ve had nothing but positive reactions so far. Our contact at AAHomecare even tweeted about it. I don’t know about you, but that’s the first time I’ve had a client tweet about liking the design approval process.
So that’s it. Signoff without a static mockup. Terrifying, right?
“But wait!� you say, “what about the budget? Won’t revisions take longer? What if the client hates it and we have to start all over?�
That could happen. But couldn’t it happen with a Photoshop mockup, too? And even if we have to start all over with look and feel, it’s likely that at least the HTML and wireframe layouts are good. And really with CSS (and especially with SASS) there are lots of situations where editing in code is significantly faster than editing a Photoshop file. Take, for instance, changing the link colors or font selections site-wide. Faster in CSS or Photoshop? Yep. High-five, CSS!
Luckily my early hunch has thus far proven true. With AAHomecare, our design process took longer than estimated—by about 35 percent. Not bad, in my opinion, for a brand-new way of working. Meanwhile, our CSS hours were less than half what we estimated. So at the end of the day, our project was actually more efficient and more profitable without mockups. I know your PM will be excited about that.
All of these changes to our process are also making our roles more fluid. With our designers writing CSS, where does design end and front-end development begin?
Overlap or not, there’s still something to be said for expertise. Front-end developers can collaborate with designers throughout the process. They review everything, refactoring redundant or overly complex code and removing vestigial styling. As they find problems, our developers keep a log of best practices for designers to review later, so they can improve their coding skills and avoid repeating the same mistakes in the future.
Our initial designs will also have features and views that we still need to elaborate on, as well as interaction enhancements that we’ve left for later. So not only is our design process more development-y, but our development process is becoming more design-y. As we all work together more, we’re also teaching each other about our respective specialties and becoming a more cohesive team. In my experience, that means building better internet.
This level of collaboration can lead to toe-stepping, so we use Git for version control. Git allows multiple people to work on a central repository of code at the same time, with methods to resolve conflicts and roll back changes when necessary. Technology aside, though, a simple “Hey, I’m working on the calendar CSS� often goes a long way—especially in an environment where collaboration and fluidity are the norms.
How do we waste less time on throwaway products? How do we make the hours we spend in front of a computer more meaningful, and the end results more effective? These are all part of the same problem.
Responsive design gives us the opportunity to rethink our whole approach to designing for the web. We can stop designing “websites� and “mobile sites.� We can create flexible content delivery systems: sets of rules that define how our content will be presented as its context shifts.
Rethinking our process is hard work, and it may strike you as challenging—even daunting. But ultimately any of the hurdles we’ll encounter are just that. They can be overcome. The internet will change, whether we like it or not—and we must adapt with it.
And really, weren’t you getting bored anyway? Let’s do something better—for our workflows, our users, and our clients. Starting right now. 
Translations:
Italian
RSS readers: Don't forget to join the discussion!
|
|
The future is mobile. As more and more people are turning to mobile devices, designers and developers are facing new challenges and opportunities. Web design has to adapt, but before it can do so, we have to do our homework first. We have to understand the new medium, discover the right techniques and tools, and be well-prepared before we start designing for it. The Mobile Book, our brand new printed book, serves exactly this purpose.
This beautiful hardcover book will be released late November/early December 2012, and will be provided as an eBook (ePUB, PDF, Kindle) as well. Starting from today, you can pre-order and save 20%!
Our new Mobile Book is available as a printed book, single eBook and as an Mobile eBook Bundle. The first and the last options include the brand new Smashing Mobile Bundle — four extra eBooks that contain the best articles on mobile on Smashing Magazine. You will receive them right away after the purchase.
Our brand new printed Mobile Book features the most important things that you need to know as a designer, developer or mobile strategist to make your websites optimized for mobile. You’ll dive deep into the peculiarities of the mobile industry, explore responsive design strategy, design patterns and optimization techniques, learn about wireframing and prototyping for mobile as well as the guidelines for designing with gestures and touch. The extra to the book will also provide insights into the popular platforms such as iOS and Windows Phone, as well as introduces developing and debugging techniques for advanced HTML5 Web applications.
When it comes to mobile, there are more open questions than definitive answers. Due to its fragmentation, it’s not so easy to understand how the mobile market looks and works in general. How can you pick the right mobile strategy and select the right approach for your website? What design patterns and what UX techniques can assist you to design faster and more effectively for mobile devices? What design patterns do you need to be aware of when building responsive websites and what patterns will help you optimize the performance for mobile? When you design with mobile in mind, how exactly should your design process differ from a traditional design workflow?
Our new book attempts to answer these questions. Well-known experts such as Peter-Paul Koch, Stephanie Rieger, Trent Walton, Brad Frost, Dave Olsen, Josh Clark and Remy Sharp have contributed to the book to present the most relevant and valuable insights. To ensure the quality of the material, the chapters have been reviewed by Scott Jenson, Bryan Rieger, Tim Kadlec, Bruce Lawson and other active members of the mobile design community. The foreword was written by Jeremy Keith. It wasn’t easy to bring together such a stellar line-up of experts, but a compromise wasn’t an option.
The mobile environment is a new major challenge, but also a great opportunity. In our upcoming Mobile Book, 12 brand new chapters from experts on mobile summarize the knowledge and best practices in mobile design and development to prepare you, dear reader, for the challenges of the mobile future.
The traffic coming from mobile devices is steadily increasing and has become significant in marketing. It’s time that we learn how to address these pressing issues — how to develop the best solutions for our clients so they don’t lose traffic, gain better brand awareness, find new customers and be prepared for the unpredictability of the mobile environment in the future. If there is a book that every Web designer and developer needs today, then it is surely this one.
Our new Mobile Book is available as a printed book, single eBook and as an Mobile eBook Bundle. The first and the last options include the brand new Smashing Mobile Bundle — four extra eBooks that contain the best articles on mobile on Smashing Magazine. You will receive them right away after the purchase.
When setting up the concept of the book, we worked hard to ensure a delicate balance between basic knowledge and the current state of the art. Please note that changes to chapter titles are still possible.
| AUTHOR | CHAPTER | DETAILS |
| Jeremy Keith | Foreword | |
| Jeremy Keith has been around on the Web for a while and saw the emerging mobile medium from its earliest days. With his preface for the Mobile Book, Jeremy introduces us to this new facet of the Web and the new possibilities and challenges that the Mobile industry produces as a relatively young medium. | ||
| Peter-Paul Koch | What’s Going on in Mobile? | |
| This chapter provides a general overview of what’s going in the mobile industry today, who are its main players and how they influence each other. From a technical perspective, the chapter reviews the peculiarities of mobile networks and platforms, existing mobile browsers and guidelines for testing websites on mobile. You’ll understand the mobile market, how it works, what it involves and how it affects our daily work.
Chapter keywords: mobile value chain, operators, device vendors, fragmentation, Android, iPhone, Windows Phone, OS vendors, proxy browsers, open device lab, mobile network. |
||
| Stephanie Rieger | The Future of Mobile | |
| This chapter provides a glimpse of where the future of mobile might lead, and what technologies will lead us there. These include new low-power computer chips, new display technologies, new APIs and the growing penetration of near field communication (NFC). But more important than the technologies themselves is how they will need to work together, enabling new and exciting ways to do business, to connect with friends and family and to interact with the world around us.
Chapter keywords: connected devices, TVs, consumer customization, display technologies, RFID, NFC, Device APIs. |
||
| Trent Walton | Responsive Design Strategies | |
| The main components of Responsive Web Design(RWD) — flexible grids, flexible images, and media queries — are just the tip of the iceberg. And with the ever-increasing number of devices flooding the market, RWD is the most effective way to address them all at once. This chapter by Trent Walton features strategies, techniques and design workflow tips on building effective and bulletproof responsive designs.
Chapter keywords: image aspect ratios, resolution independence, breakpoints organization, vertical and em-based media queries, content choreography, image hierarchy, fluid type. |
||
| Brad Frost | Responsive Design Patterns | |
| As Responsive Design continues to evolve, we’re confronted with difficult problems about how to create adaptive interfaces that look and function beautifully across many screen sizes and environments. E.g. how do we handle navigation that’s four levels deep? This chapter features emerging responsive design patterns and explains how to use them meaningfully in your projects. Brad Frost provides useful tips and expert advice on various design elements covering everything from complex navigation to advanced data tables.
Chapter keywords: style guides, layout, navigation, conditional loading, progressive disclosure, background images, icons, maps, type, carousels, accordions, forms, tables. |
||
| Dave Olsen | Optimization For Mobile | |
| Although Responsive design per se has provided a great fundamental concept for designing mobile-optimized websites, the core ideas that make up these concepts pre-date the mobile revolution. In this chapter, Dave Olsen reviews what it takes to optimize mobile experiences in terms of performance. How do we keep responsive websites lightweight? What do we need to know about caching, lazy loading, latency? How can we start using RESS? Device detection or feature detection? Also, how do we develop and test our websites for performance? This chapter answers all these questions and more.
Chapter keywords: mobile performance, latency, localStorage, lazy loading, Data URI scheme, JS frameworks, RESS, browser detection, feature detection. |
||
| Dennis Kardys | Hands On Design for Mobile (UX Perspective) | |
| Mobile requires us to rethink the way we create, develop and build experiences for our users. In this chapter, you’ll look at some of the more glaring pitfalls to conventional processes, specifically as they pertain to how we design—and how we communicate design—for an increasingly mobile-accessed Web. You’ll learn about implementing and selling processes that support a realistic understanding of what it means to design with mobile in mind.
Chapter keywords: psychology, contextual interviews, collaborative design workshops, design studio methods, sketching, wireframing, convergent prototyping. |
||
| Greg Nudelman Rian van der Merwe |
Mobile UX Design Patterns | |
| The key to using design patterns is not to get caught up in copying the exact implementations, but instead to witness the underlying reasons for why something works, and then adopt a unique design situation with authenticity, grace and vision. This chapter attempts to collect strategic patterns that reflect the underlying customer experience trends unique to the mobile environment, and use examples of particular implementations that call out important existing or emerging trends.
Chapter keywords: faceted refinement, parallel search, zero results recovery, tap-ahead, engagement, rollaway dashboard menu, tabbed views, reading and pagination. |
||
| Josh Clark | Designing With Gestures and Touch | |
| Among the many new opportunities of the mobile medium are the capabilities of mobile devices. One of the major interaction changes, however, involves gestures and touch. In this chapter, Josh Clark explains how we can use them to improve the mobile user experience and provides concrete examples of implementations in real-life applications. | ||
From left to right: Jeremy Keith, Peter-Paul Koch, Stephanie Rieger, Trent Walton, Brad Frost, Dave Olsen, Dennis Kardys, Greg Nudelman, Rian van der Merwe and Josh Clark.
The book is currently being finished, yet we don’t know whether all chapters will fit into the printed book. However, the remaining chapters will be offered as an extra document that will be available to download along with the digital version of the book.
| AUTHOR | CHAPTER | DETAILS |
| Nathan Barry | Developing and Designing for iOS | |
| As an experienced designer of iPhone and iPad applications, Nathan Barry takes us on a detailed journey through the iOS platform. Starting with general culture and language of iOS, he moves to iOS design patterns, technical implementations in Xcode, the design and development process for new iOS apps as well as pricing, marketing and submission guidelines. Each section is accompanied with examples, suggestions and best practices.
Chapter keywords: mobile, user experience, native applications, native as culture, interaction design principles, responsive Web design. |
||
| Remy Sharp | Developing and Debugging HTML5 Apps | |
| If you’ve had some experience with debugging in mobile browsers, you’ll know that debugging in IE6 back in the day was easy. In this chapter, Remy Sharp explains the technical workflow for developing, testing and debugging your Web applications on mobile devices. The chapter focuses on how to reduce the edit-refresh-test cycle and how to get inside these devices to debug.
Chapter keywords: mobile testing, debugging tools, open device lab, Android, Opera Mobile, Firefox for Android, simulators. |
||
| Sebastiaan de With | Understanding The Android Platform | |
| As an experienced designer of Android apps, Sebastiaan de With provides a detailed insight into the Android platform, its peculiarities, the difficulties caused by fragmentation of the Android OS as well the developing and submission process for Android apps. | ||
| Arturo Toledo | Designing For The Windows Phone | |
| With its new Windows design language, Microsoft created an entirely new design methodology focused on the content of applications, relying more on type and less on graphics. In this chapter, Arturo Toledo, former UX designer at Microsoft, explains the new design concepts such Hub & Spoke model, Panoramas, Pivots and Pages, reviews Windows Phone design grid and design guidelines, provides UX advice on when what model is most appropriate and presents a workflow from the ideation phase to the design and development phase of a Windows phone app.
Chapter keywords: sketching, flow, hub & spoke model, panoramas, pages, list views, design grid, app bar, animations, branding. |
||
From left to right: Nathan Barry, Remy Sharp, Sebastiaan de With and Arturo Toledo.
In discussions about user experience on mobile, we tend to make general assumptions about the environment in which users will be using an app or a website on their mobile device. However, mobile context is a myth. We can’t make any realistic assumptions about the context because we just don’t know anything definite about it — when and how the device is used or what connectivity it currently has. Obviously we can plan for different scenarios — and so we should — but mobile context is often as unpredictable as particle physics. We just don’t know for sure when mobile devices are being used – on-the-go, in the kitchen, or when watching TV.
In the first chapter of the book, Peter-Paul Koch and Stephanie Rieger explore the mechanics of the mobile world and the ongoing developments in the industry.
“[We've had] a total of 880 million Android & iOS devices entering the market in just over five years. Consider the shift that occurs when iOS & Android put a combined billion [mobile] devices in people’s hands. That’s almost half the Internet population of the world and equivalent to the total number of (Windows) PCs in use around the world. Mobile first yet?”
— Luke Wroblewski
The first chapter of our new “Mobile Book” describes the mobile landscape and provides insights about the future of mobile.
As a result of random assumptions, we tend to think that mobile experiences should be the “light” versions of traditional “desktop” experiences — because well, that’s what users need. However, research shows that 80% of users want to have all “desktop” features on mobile — they want to be able to use the features everywhere, and in a similar way. That’s when meaningful, performance-optimized responsive design solutions become important. In the second chapter, Trent Walton introduces strategies for developing responsive websites, Brad Frost discusses emerging responsive design patterns and Dave Olsen explains what you need to know to optimize the performance of mobile websites.
The second chapter explains the strategies, design patterns and optimization techniques for Responsive Web design.
Whether you are designing a mobile-optimized website or a native app, you will have to use emerging design patterns and techniques that wouldn’t work on desktop. The mindset shift affects not only layout, but general interaction paradigms, especially since mobile devices are actually “smartphones”, with capabilities that can’t be used in a similar way on desktop devices — e.g. gestures, touch, accelerometer, gyroscope etc. Users want to have access to information and functionality, and they want the content to be usable — wherever they use it. It’s our task to make it work, using emerging UX design patterns.
In the third chapter, Dennis Kardys explores the wireframing and prototyping process for mobile, Greg Nudelman and Rian van der Merwe explores mobile design patterns and Josh Clark explains how we can utilize gestures and touch meaningfully on mobile.
The third chapter explores the implications of the mobile medium for UX design process and mobile UX design patterns.
When it comes to desktop browsers, we are used to obvious big players and traditional platforms Mac, Windows, Linux. The mobile world is entirely different, and the platforms are very different — they have a different culture and a different design language. In these extras of the book, you’ll look closely at the various mobile platforms — iOS, Android, Windows Mobile as well as the Web itself (HTML5 Apps).
The last chapter provides insights into the mobile platforms: iOS, Android, Windows Mobile as well as HTML5 Apps.
The Mobile Book consists of 320 pages sized at 165×240 mm (6,5 x 9,45″). It’s a damn real hardcover with a luminous red bookmark and stitched binding. The minimalist cover is coated with original gray fabric and has a shiny metal imprint. It’s printed on sophisticated 130/gram paper. Of course, the printed book comes with a portable companion — an eBook edition that you get for free along with the printed book.
After three successful “Smashing Booksâ€�, we wanted to do something entirely different this time — something that does not look like yet another item of our series (which in fact is coming in spring 2013). And so we did. If you prefer to have a printed book, you want it to be a beautiful, honest, classic book. We wanted to achieve a high contrast between the modern content of today, but with that cozy little feeling from the good ol’ times. So we went to great efforts to create something unique, memorable and valuable. A book with a classic, conservative look and feel, a book in the best sense of its kind – that is guaranteed to look good on a desk or on a bookshelf.
The chapters of the book are illustrated by talented, well-respected UK-based designer and illustrator Mike Kus who is known for his artistic, vivid and memorable artwork. We’ve asked him to create abstract, minimalistic illustrations that will fit nicely within the concept of the traditional, classic book layout. After a couple of iterations, Mike knew exactly how he wanted the illustrations to be, so the design process didn’t take as much time as we thought.
Here are some insights from Mike about the design process:
“When Vitaly asked me if I was interested in producing a series of illustrations for ‘The Mobile Book’, I jumped at the chance. I always love to get my teeth into a creative project.”
It was an open brief, so I wanted to do something interesting. I didn’t want to go down the route of illustrating mobile phones and computer screens etc. It felt too obvious. Instead I opted for an abstract approach. Based on the section titles of the book, I created a visual representation of the titles.
For example, for the title ‘Responsive Web Design’ I created an illustration that shows circles based on a grid that are overlapping and morphing into each other. This is represent the fluid and reactive nature of ‘Responsive Web Design’. For the ‘Mobile Platforms’ section my idea came from the overlapping highways on a spaghetti junction. This is to represent the the complexity of developing for multiple platforms and mobile browsers. For the cover of the book I created four icons, which are essentially simplified versions of my illustrations.
This was one of the most difficult projects I’ve worked on in recent months but it was also one of the most rewarding. I’m supper happy with the outcome and thankful I was asked to be involved.”
— Mike Kus
Mike Kus’ early sketches for Smashing Magazine’s Mobile Book.
We wanted to create a simple cover design, so Mike has designed four icons, which are essentially simplified versions of his illustrations. The cover is coated with original gray fabric and has a shiny metal imprint for the icons.
You can pre-oder The Mobile Book starting from today. The official release is scheduled for late November/early December 2012. Please note that two options also include the brand new Smashing Mobile Bundle — four extra eBooks containing the best Smashing Magazine articles based on mobile.
The printed books will be sent only via air mail. You can find the anticipated delivery time for your country in the delivery times overview. We ship books from Berlin, Germany — the eBook version will be available for download on launch day, and those who pre-order will be informed of the launch via email.
Our new Mobile Book is available as a printed book, single eBook and as an Mobile eBook Bundle. The first and the last options include the brand new Smashing Mobile Bundle — four extra eBooks that contain the best articles on mobile on Smashing Magazine. You will receive them right away after the purchase.
We want to make it as easy as possible for everyone to buy the new Smashing book. We welcome all suggestions and advice that could improve Smashing Magazine’s user-friendliness. Here are answers to some frequently asked questions about the brand new Smashing Mobile Book:
| What are the costs for shipping to my country? | |
| The shipping cost for one book or a bundle is $5 — wherever you are in the world. We ship everywhere worldwide. We are paying a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay! | |
| What about delivery times? | |
| All books will be shipped via air mail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview. Please note that we will start to ship the books late November/early December 2012. | |
| Will the book be available in other languages? | |
| Maybe in future, but we have not made arrangements for that yet, so don’t hold your breath. | |
| Is the Mobile Book available as an eBook? | |
| Yes, the book will be available in PDF, EPUB and Kindle (Mobipocket) formats, and you can pre-order the eBook bundle now. | |
| Is “Mobile Book” the “Smashing Book #4″? | |
| No, “The Mobile Book” is a new series that we are starting here at Smashing Magazine. It is not Smashing Book #4 — it has a different design, layout and concept than other Smashing books. However, the Smashing Book #4 will be published in May 2013 — please stay tuned! | |
| What payment methods are accepted? | |
| We accept PayPal, VISA, MasterCard and American Express. We use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. | |
| Is there a money-back guarantee? | |
| Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back—no ifs, ands or buts about it. | |
| I have a question that is not covered here. | |
| Please leave a comment below, or get in touch with us via the contact form or via @SmashingSupport on Twitter. We would love to help you in any way we can! | |
Thank you for your support, everybody! We truly appreciate it.
Yours sincerely,
The Smashing Team
© Smashing Editorial for Smashing Magazine, 2012.
|
|
The future is mobile. As more and more people are turning to mobile devices, designers and developers are facing new challenges and opportunities. Web design has to adapt, but before it can do so, we have to do our homework first. We have to understand the new medium, discover the right techniques and tools, and be well-prepared before we start designing for it. The Mobile Book, our brand new printed book, serves exactly this purpose.
This beautiful hardcover book will be released late November/early December 2012, and will be provided as an eBook (ePUB, PDF, Kindle) as well. Starting from today, you can pre-order and save 20%!
Our new Mobile Book is available as a printed book, single eBook and as an Mobile eBook Bundle. The first and the last options include the brand new Smashing Mobile Bundle — four extra eBooks that contain the best articles on mobile on Smashing Magazine. You will receive them right away after the purchase.
Our brand new printed Mobile Book features the most important things that you need to know as a designer, developer or mobile strategist to make your websites optimized for mobile. You’ll dive deep into the peculiarities of the mobile industry, explore responsive design strategy, design patterns and optimization techniques, learn about wireframing and prototyping for mobile as well as the guidelines for designing with gestures and touch. The extra to the book will also provide insights into the popular platforms such as iOS and Windows Phone, as well as introduces developing and debugging techniques for advanced HTML5 Web applications.
When it comes to mobile, there are more open questions than definitive answers. Due to its fragmentation, it’s not so easy to understand how the mobile market looks and works in general. How can you pick the right mobile strategy and select the right approach for your website? What design patterns and what UX techniques can assist you to design faster and more effectively for mobile devices? What design patterns do you need to be aware of when building responsive websites and what patterns will help you optimize the performance for mobile? When you design with mobile in mind, how exactly should your design process differ from a traditional design workflow?
Our new book attempts to answer these questions. Well-known experts such as Peter-Paul Koch, Stephanie Rieger, Trent Walton, Brad Frost, Dave Olsen, Josh Clark and Remy Sharp have contributed to the book to present the most relevant and valuable insights. To ensure the quality of the material, the chapters have been reviewed by Scott Jenson, Bryan Rieger, Tim Kadlec, Bruce Lawson and other active members of the mobile design community. The foreword was written by Jeremy Keith. It wasn’t easy to bring together such a stellar line-up of experts, but a compromise wasn’t an option.
The mobile environment is a new major challenge, but also a great opportunity. In our upcoming Mobile Book, 12 brand new chapters from experts on mobile summarize the knowledge and best practices in mobile design and development to prepare you, dear reader, for the challenges of the mobile future.
The traffic coming from mobile devices is steadily increasing and has become significant in marketing. It’s time that we learn how to address these pressing issues — how to develop the best solutions for our clients so they don’t lose traffic, gain better brand awareness, find new customers and be prepared for the unpredictability of the mobile environment in the future. If there is a book that every Web designer and developer needs today, then it is surely this one.
Our new Mobile Book is available as a printed book, single eBook and as an Mobile eBook Bundle. The first and the last options include the brand new Smashing Mobile Bundle — four extra eBooks that contain the best articles on mobile on Smashing Magazine. You will receive them right away after the purchase.
When setting up the concept of the book, we worked hard to ensure a delicate balance between basic knowledge and the current state of the art. Please note that changes to chapter titles are still possible.
| AUTHOR | CHAPTER | DETAILS |
| Jeremy Keith | Foreword | |
| Jeremy Keith has been around on the Web for a while and saw the emerging mobile medium from its earliest days. With his preface for the Mobile Book, Jeremy introduces us to this new facet of the Web and the new possibilities and challenges that the Mobile industry produces as a relatively young medium. | ||
| Peter-Paul Koch | What’s Going on in Mobile? | |
| This chapter provides a general overview of what’s going in the mobile industry today, who are its main players and how they influence each other. From a technical perspective, the chapter reviews the peculiarities of mobile networks and platforms, existing mobile browsers and guidelines for testing websites on mobile. You’ll understand the mobile market, how it works, what it involves and how it affects our daily work.
Chapter keywords: mobile value chain, operators, device vendors, fragmentation, Android, iPhone, Windows Phone, OS vendors, proxy browsers, open device lab, mobile network. |
||
| Stephanie Rieger | The Future of Mobile | |
| This chapter provides a glimpse of where the future of mobile might lead, and what technologies will lead us there. These include new low-power computer chips, new display technologies, new APIs and the growing penetration of near field communication (NFC). But more important than the technologies themselves is how they will need to work together, enabling new and exciting ways to do business, to connect with friends and family and to interact with the world around us.
Chapter keywords: connected devices, TVs, consumer customization, display technologies, RFID, NFC, Device APIs. |
||
| Trent Walton | Responsive Design Strategies | |
| The main components of Responsive Web Design(RWD) — flexible grids, flexible images, and media queries — are just the tip of the iceberg. And with the ever-increasing number of devices flooding the market, RWD is the most effective way to address them all at once. This chapter by Trent Walton features strategies, techniques and design workflow tips on building effective and bulletproof responsive designs.
Chapter keywords: image aspect ratios, resolution independence, breakpoints organization, vertical and em-based media queries, content choreography, image hierarchy, fluid type. |
||
| Brad Frost | Responsive Design Patterns | |
| As Responsive Design continues to evolve, we’re confronted with difficult problems about how to create adaptive interfaces that look and function beautifully across many screen sizes and environments. E.g. how do we handle navigation that’s four levels deep? This chapter features emerging responsive design patterns and explains how to use them meaningfully in your projects. Brad Frost provides useful tips and expert advice on various design elements covering everything from complex navigation to advanced data tables.
Chapter keywords: style guides, layout, navigation, conditional loading, progressive disclosure, background images, icons, maps, type, carousels, accordions, forms, tables. |
||
| Dave Olsen | Optimization For Mobile | |
| Although Responsive design per se has provided a great fundamental concept for designing mobile-optimized websites, the core ideas that make up these concepts pre-date the mobile revolution. In this chapter, Dave Olsen reviews what it takes to optimize mobile experiences in terms of performance. How do we keep responsive websites lightweight? What do we need to know about caching, lazy loading, latency? How can we start using RESS? Device detection or feature detection? Also, how do we develop and test our websites for performance? This chapter answers all these questions and more.
Chapter keywords: mobile performance, latency, localStorage, lazy loading, Data URI scheme, JS frameworks, RESS, browser detection, feature detection. |
||
| Dennis Kardys | Hands On Design for Mobile (UX Perspective) | |
| Mobile requires us to rethink the way we create, develop and build experiences for our users. In this chapter, you’ll look at some of the more glaring pitfalls to conventional processes, specifically as they pertain to how we design—and how we communicate design—for an increasingly mobile-accessed Web. You’ll learn about implementing and selling processes that support a realistic understanding of what it means to design with mobile in mind.
Chapter keywords: psychology, contextual interviews, collaborative design workshops, design studio methods, sketching, wireframing, convergent prototyping. |
||
| Greg Nudelman Rian van der Merwe |
Mobile UX Design Patterns | |
| The key to using design patterns is not to get caught up in copying the exact implementations, but instead to witness the underlying reasons for why something works, and then adopt a unique design situation with authenticity, grace and vision. This chapter attempts to collect strategic patterns that reflect the underlying customer experience trends unique to the mobile environment, and use examples of particular implementations that call out important existing or emerging trends.
Chapter keywords: faceted refinement, parallel search, zero results recovery, tap-ahead, engagement, rollaway dashboard menu, tabbed views, reading and pagination. |
||
| Josh Clark | Designing With Gestures and Touch | |
| Among the many new opportunities of the mobile medium are the capabilities of mobile devices. One of the major interaction changes, however, involves gestures and touch. In this chapter, Josh Clark explains how we can use them to improve the mobile user experience and provides concrete examples of implementations in real-life applications. | ||
From left to right: Jeremy Keith, Peter-Paul Koch, Stephanie Rieger, Trent Walton, Brad Frost, Dave Olsen, Dennis Kardys, Greg Nudelman, Rian van der Merwe and Josh Clark.
The book is currently being finished, yet we don’t know whether all chapters will fit into the printed book. However, the remaining chapters will be offered as an extra document that will be available to download along with the digital version of the book.
| AUTHOR | CHAPTER | DETAILS |
| Nathan Barry | Developing and Designing for iOS | |
| As an experienced designer of iPhone and iPad applications, Nathan Barry takes us on a detailed journey through the iOS platform. Starting with general culture and language of iOS, he moves to iOS design patterns, technical implementations in Xcode, the design and development process for new iOS apps as well as pricing, marketing and submission guidelines. Each section is accompanied with examples, suggestions and best practices.
Chapter keywords: mobile, user experience, native applications, native as culture, interaction design principles, responsive Web design. |
||
| Remy Sharp | Developing and Debugging HTML5 Apps | |
| If you’ve had some experience with debugging in mobile browsers, you’ll know that debugging in IE6 back in the day was easy. In this chapter, Remy Sharp explains the technical workflow for developing, testing and debugging your Web applications on mobile devices. The chapter focuses on how to reduce the edit-refresh-test cycle and how to get inside these devices to debug.
Chapter keywords: mobile testing, debugging tools, open device lab, Android, Opera Mobile, Firefox for Android, simulators. |
||
| Sebastiaan de With | Understanding The Android Platform | |
| As an experienced designer of Android apps, Sebastiaan de With provides a detailed insight into the Android platform, its peculiarities, the difficulties caused by fragmentation of the Android OS as well the developing and submission process for Android apps. | ||
| Arturo Toledo | Designing For The Windows Phone | |
| With its new Windows design language, Microsoft created an entirely new design methodology focused on the content of applications, relying more on type and less on graphics. In this chapter, Arturo Toledo, former UX designer at Microsoft, explains the new design concepts such Hub & Spoke model, Panoramas, Pivots and Pages, reviews Windows Phone design grid and design guidelines, provides UX advice on when what model is most appropriate and presents a workflow from the ideation phase to the design and development phase of a Windows phone app.
Chapter keywords: sketching, flow, hub & spoke model, panoramas, pages, list views, design grid, app bar, animations, branding. |
||
From left to right: Nathan Barry, Remy Sharp, Sebastiaan de With and Arturo Toledo.
In discussions about user experience on mobile, we tend to make general assumptions about the environment in which users will be using an app or a website on their mobile device. However, mobile context is a myth. We can’t make any realistic assumptions about the context because we just don’t know anything definite about it — when and how the device is used or what connectivity it currently has. Obviously we can plan for different scenarios — and so we should — but mobile context is often as unpredictable as particle physics. We just don’t know for sure when mobile devices are being used – on-the-go, in the kitchen, or when watching TV.
In the first chapter of the book, Peter-Paul Koch and Stephanie Rieger explore the mechanics of the mobile world and the ongoing developments in the industry.
“[We've had] a total of 880 million Android & iOS devices entering the market in just over five years. Consider the shift that occurs when iOS & Android put a combined billion [mobile] devices in people’s hands. That’s almost half the Internet population of the world and equivalent to the total number of (Windows) PCs in use around the world. Mobile first yet?”
— Luke Wroblewski
The first chapter of our new “Mobile Book” describes the mobile landscape and provides insights about the future of mobile.
As a result of random assumptions, we tend to think that mobile experiences should be the “light” versions of traditional “desktop” experiences — because well, that’s what users need. However, research shows that 80% of users want to have all “desktop” features on mobile — they want to be able to use the features everywhere, and in a similar way. That’s when meaningful, performance-optimized responsive design solutions become important. In the second chapter, Trent Walton introduces strategies for developing responsive websites, Brad Frost discusses emerging responsive design patterns and Dave Olsen explains what you need to know to optimize the performance of mobile websites.
The second chapter explains the strategies, design patterns and optimization techniques for Responsive Web design.
Whether you are designing a mobile-optimized website or a native app, you will have to use emerging design patterns and techniques that wouldn’t work on desktop. The mindset shift affects not only layout, but general interaction paradigms, especially since mobile devices are actually “smartphones”, with capabilities that can’t be used in a similar way on desktop devices — e.g. gestures, touch, accelerometer, gyroscope etc. Users want to have access to information and functionality, and they want the content to be usable — wherever they use it. It’s our task to make it work, using emerging UX design patterns.
In the third chapter, Dennis Kardys explores the wireframing and prototyping process for mobile, Greg Nudelman and Rian van der Merwe explores mobile design patterns and Josh Clark explains how we can utilize gestures and touch meaningfully on mobile.
The third chapter explores the implications of the mobile medium for UX design process and mobile UX design patterns.
When it comes to desktop browsers, we are used to obvious big players and traditional platforms Mac, Windows, Linux. The mobile world is entirely different, and the platforms are very different — they have a different culture and a different design language. In these extras of the book, you’ll look closely at the various mobile platforms — iOS, Android, Windows Mobile as well as the Web itself (HTML5 Apps).
The last chapter provides insights into the mobile platforms: iOS, Android, Windows Mobile as well as HTML5 Apps.
The Mobile Book consists of 320 pages sized at 165×240 mm (6,5 x 9,45″). It’s a damn real hardcover with a luminous red bookmark and stitched binding. The minimalist cover is coated with original gray fabric and has a shiny metal imprint. It’s printed on sophisticated 130/gram paper. Of course, the printed book comes with a portable companion — an eBook edition that you get for free along with the printed book.
After three successful “Smashing Booksâ€�, we wanted to do something entirely different this time — something that does not look like yet another item of our series (which in fact is coming in spring 2013). And so we did. If you prefer to have a printed book, you want it to be a beautiful, honest, classic book. We wanted to achieve a high contrast between the modern content of today, but with that cozy little feeling from the good ol’ times. So we went to great efforts to create something unique, memorable and valuable. A book with a classic, conservative look and feel, a book in the best sense of its kind – that is guaranteed to look good on a desk or on a bookshelf.
The chapters of the book are illustrated by talented, well-respected UK-based designer and illustrator Mike Kus who is known for his artistic, vivid and memorable artwork. We’ve asked him to create abstract, minimalistic illustrations that will fit nicely within the concept of the traditional, classic book layout. After a couple of iterations, Mike knew exactly how he wanted the illustrations to be, so the design process didn’t take as much time as we thought.
Here are some insights from Mike about the design process:
“When Vitaly asked me if I was interested in producing a series of illustrations for ‘The Mobile Book’, I jumped at the chance. I always love to get my teeth into a creative project.”
It was an open brief, so I wanted to do something interesting. I didn’t want to go down the route of illustrating mobile phones and computer screens etc. It felt too obvious. Instead I opted for an abstract approach. Based on the section titles of the book, I created a visual representation of the titles.
For example, for the title ‘Responsive Web Design’ I created an illustration that shows circles based on a grid that are overlapping and morphing into each other. This is represent the fluid and reactive nature of ‘Responsive Web Design’. For the ‘Mobile Platforms’ section my idea came from the overlapping highways on a spaghetti junction. This is to represent the the complexity of developing for multiple platforms and mobile browsers. For the cover of the book I created four icons, which are essentially simplified versions of my illustrations.
This was one of the most difficult projects I’ve worked on in recent months but it was also one of the most rewarding. I’m supper happy with the outcome and thankful I was asked to be involved.”
— Mike Kus
Mike Kus’ early sketches for Smashing Magazine’s Mobile Book.
We wanted to create a simple cover design, so Mike has designed four icons, which are essentially simplified versions of his illustrations. The cover is coated with original gray fabric and has a shiny metal imprint for the icons.
You can pre-oder The Mobile Book starting from today. The official release is scheduled for late November/early December 2012. Please note that two options also include the brand new Smashing Mobile Bundle — four extra eBooks containing the best Smashing Magazine articles based on mobile.
The printed books will be sent only via air mail. You can find the anticipated delivery time for your country in the delivery times overview. We ship books from Berlin, Germany — the eBook version will be available for download on launch day, and those who pre-order will be informed of the launch via email.
Our new Mobile Book is available as a printed book, single eBook and as an Mobile eBook Bundle. The first and the last options include the brand new Smashing Mobile Bundle — four extra eBooks that contain the best articles on mobile on Smashing Magazine. You will receive them right away after the purchase.
We want to make it as easy as possible for everyone to buy the new Smashing book. We welcome all suggestions and advice that could improve Smashing Magazine’s user-friendliness. Here are answers to some frequently asked questions about the brand new Smashing Mobile Book:
| What are the costs for shipping to my country? | |
| The shipping cost for one book or a bundle is $5 — wherever you are in the world. We ship everywhere worldwide. We are paying a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay! | |
| What about delivery times? | |
| All books will be shipped via air mail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview. Please note that we will start to ship the books late November/early December 2012. | |
| Will the book be available in other languages? | |
| Maybe in future, but we have not made arrangements for that yet, so don’t hold your breath. | |
| Is the Mobile Book available as an eBook? | |
| Yes, the book will be available in PDF, EPUB and Kindle (Mobipocket) formats, and you can pre-order the eBook bundle now. | |
| Is “Mobile Book” the “Smashing Book #4″? | |
| No, “The Mobile Book” is a new series that we are starting here at Smashing Magazine. It is not Smashing Book #4 — it has a different design, layout and concept than other Smashing books. However, the Smashing Book #4 will be published in May 2013 — please stay tuned! | |
| What payment methods are accepted? | |
| We accept PayPal, VISA, MasterCard and American Express. We use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. | |
| Is there a money-back guarantee? | |
| Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back—no ifs, ands or buts about it. | |
| I have a question that is not covered here. | |
| Please leave a comment below, or get in touch with us via the contact form or via @SmashingSupport on Twitter. We would love to help you in any way we can! | |
Thank you for your support, everybody! We truly appreciate it.
Yours sincerely,
The Smashing Team
© Smashing Editorial for Smashing Magazine, 2012.
