第1章
The Mobile Revolution: Why Your Website Should Start Small to Win Big
In 2011, Luke Wroblewski made a bold prediction that would transform the web design industry: mobile devices would soon dominate the internet. At a time when most designers were still creating websites for desktop computers first, Wroblewski's "Mobile First" approach seemed radical. Fast forward to today, and his vision has become our reality. The book has achieved cult status among web designers, with industry leaders like Google's former CEO Eric Schmidt publicly endorsing its philosophy. Beyond professional circles, the approach has influenced how billions of people experience the internet daily. What makes this slim volume so powerful is not just its technical advice but its fundamental rethinking of how we approach digital design. As smartphone usage continues to skyrocket globally, Wroblewski's principles have proven remarkably prescient-showing that sometimes the smallest screens demand the biggest ideas.
第2章
Why Mobile First Is No Longer Optional
Remember when browsing the web on your phone was a frustrating experience reserved for emergencies? Those days are long gone. Mobile device usage has exploded beyond all predictions, fundamentally changing how we interact with digital content. Smartphones began outshipping PCs two years earlier than experts anticipated, while home PC usage declined as mobile took over. The statistics are staggering: mobile web traffic grew 600% in 2010 alone, and the average smartphone user visits 24 websites daily.
This growth isn't just about browsing-it's driving serious business. PayPal processes $10 million daily in mobile payments. eBay generated $2 billion in mobile sales back in 2010 (a figure that has multiplied many times since). Google's mobile searches grew 130% year over year. Someone even purchased a $265,000 airplane through eBay's iPhone app!
What catalyzed this transformation? Better devices and dramatically improved networks. AT&T experienced a mind-boggling 4,932% increase in mobile data traffic in the early smartphone era, explaining their notorious service issues. In 2009, a single iPhone generated as much traffic as 30 basic feature phones. Network speeds doubled in 2010 alone, with data usage per smartphone doubling in response.
The mobile revolution has also democratized internet access. For millions of people worldwide, smartphones represent their first and only computing device-bringing the web to those who could never afford traditional computers. This expansion continues as devices become more affordable and networks improve, with global mobile data traffic projected to increase 26-fold between 2010 and 2015.
The native app versus mobile web debate isn't about choosing sides-both approaches have compelling advantages. Native apps offer smoother interfaces and hardware access, while the mobile web provides broader access across platforms without requiring separate development for each operating system. Surprisingly, mobile web often outperforms native apps in usage-Twitter sees 14% of members using mobile web versus 8% on iPhone apps, while Facebook has 19% of posts from mobile web compared to 4% each from their native applications.
The mobile opportunity extends beyond creating smaller versions of websites. It's about improving the overall customer experience. As former Facebook iPhone developer Joe Hewitt noted, his goal evolved from creating "a mobile companion" to "a version of Facebook that was actually better than the website"-which encapsulates the true potential of mobile-first thinking.
第3章
The Hidden Power of Constraints
While mobile's growth comes from better devices, it remains a constrained environment with small screens, unreliable networks, and varied usage contexts. These constraints, however, are beneficial for both business and design. As the saying goes, design is the process of gradually applying constraints until an elegant solution emerges.
After years of debate about desktop screen sizes, mobile drastically reduces available space. Early smartphones with 320x480 resolution eliminated 80% of desktop screen space-forcing designers to remove navigation clutter, content fluff, and irrelevant promotions. Southwest Airlines' website exemplifies the "everything-including-the-kitchen-sink" problem, with competing messages and calls to action filling every pixel. By contrast, their mobile experience focuses solely on core functions: booking travel, checking in, flight status, miles, and alerts.
When Flickr designed their mobile web experience, they distilled over 60 navigation options into just six core functions by focusing on what users actually do: check their photos, see friends' images, and explore interesting content. This mobile-first approach creates agreement upfront on what matters most, which can then be applied to desktop experiences. The end result is an experience focused on key tasks without the extraneous detours that litter many websites.
Mobile networks present additional challenges-coverage can be expensive, spotty, and slow. Designing for mobile means optimizing performance by sending less data and leveraging available technologies. Key techniques include using image sprites to combine multiple images, bundling and minifying CSS/JavaScript files, limiting dependencies on heavy libraries, reducing CSS grid systems, implementing proper HTTP caching, and utilizing modern browser capabilities.
Speed isn't just important on mobile-studies by Amazon, Yahoo!, Microsoft and Google show that even tiny delays (100ms) drive users away, with negative effects lasting weeks after issues are fixed. By focusing on mobile-first performance, websites become blazingly fast on desktop too-a significant advantage of embracing mobile constraints upfront.
Context encompasses the circumstances under which something happens. While desktop computers are typically used at a desk with consistent power and network connections, mobile devices go everywhere. Location data shows smartphones are used in diverse settings: 84% at home, 80% during downtime, 74% while waiting, 69% while shopping, 64% at work, 62% while watching TV, and 47% during commutes. The high home usage challenges assumptions about mobile users always being "on the go."
Most mobile contexts share one trait: divided attention. Users are often "one eyeball and one thumb"-holding their device in one hand while partially distracted. Different devices show distinct usage patterns throughout the day, with mobile usage typically occurring in shorter bursts-what Nokia's Rachel Hinman calls "snorkeling" versus desktop "diving."
Mobile's constraints-small screens, slow connections, and users' partial attention-may initially seem limiting but actually drive better design. Small screens force prioritization of what truly matters. Performance concerns lead to faster-loading websites everywhere. And understanding mobile usage patterns throughout the day creates new engagement opportunities and innovation potential.
第4章
Unlocking Innovation Through Mobile Capabilities
Mobile design isn't just about limitations-it's about extending possibilities. Modern smartphones combine powerful capabilities that can transform user experiences in ways desktop computers simply cannot match.
Consider finding London Underground stations on desktop versus mobile. On desktop, you navigate a well-designed website to download a PDF map. But the mobile app Nearest Tube uses location detection, digital compass, video camera and accelerometer to create an augmented reality experience, overlaying station markers on the real world through the camera view. The app even changes information based on how you position the device. This dramatic difference shows how mobile capabilities can reinvent user experiences.
While not all native app capabilities are available in mobile browsers, many powerful features are accessible. Location detection on mobile devices offers far more precision than desktop computers, which typically only know your country. Smartphones combine GPS (10m accuracy), WiFi (50m accuracy), and cell tower triangulation to determine location. This capability enables relevant local information like nearby restaurants, weather, traffic updates, and location-based search results.
Unlike desktop computers, mobile devices can detect rotation and movement. This enables responsive design changes like Google's Android email app expanding the composition area in landscape mode. Accelerometers also enable innovative interactions like Instapaper's tilt-scrolling feature, which lets users read at their own pace by tilting the device.
Touch interfaces enable direct manipulation of on-screen elements without mouse or keyboard intermediaries. This opens new interaction possibilities that feel natural and intuitive. Gestures like "pull down to refresh" and "swipe for more options" are becoming standard expectations. Yahoo's Sketch a Search application demonstrates this potential by letting users draw circles or lines directly on maps to define search areas-making the experience not just easier but more enjoyable than traditional text-based searching.
Mobile web browsers continue gaining access to device capabilities previously reserved for native applications. Beyond location detection, orientation, and touch, upcoming capabilities include direction detection via digital compass, gyroscope for 360-degree motion sensing, audio input/output, video and image capture, dual cameras, Bluetooth connectivity, proximity sensing, ambient light detection, and Near Field Communications.
Starting with mobile first puts these innovative capabilities in your hands now, allowing you to rethink how people interact with your website and the world around them. This approach grounds your website in what people actually want to do, wherever they may be.
第5章
Rethinking Content Organization for Mobile Success
When organizing content and actions on mobile, solid information architecture principles remain important, but mobile experiences must also align with device usage patterns, emphasize content over navigation, provide relevant exploration options, and maintain clarity and focus.
Rather than simply porting desktop experiences to mobile, effective mobile design aligns with how people actually use their devices. Mobile usage generally falls into four interaction types: Lookup/Find (urgent local information), Explore/Play (idle time distractions), Check In/Status (monitoring important updates), and Edit/Create (urgent tasks). Sites like Flickr and Basecamp succeed by organizing their mobile experiences around these real-world behaviors, grounding their design in actual user needs.
Content takes precedence over navigation on mobile. With precious time and potentially costly downloads, users want immediate answers rather than site maps. YouTube and ESPN exemplify this principle by using simple headers with minimal navigation controls while filling screens with timely, relevant content that meets users' immediate needs.
While content should take precedence, users still need ways to navigate and discover what's available. Better approaches include YouTube's full-screen navigation menu (accessed via header icon) and ESPN's clearly labeled dropdown menu that keeps users on the current page while considering where to go next.
Controls at the bottom of the screen are easier to interact with one-handed and present choices when users reach the end of content. Bagcheck's mobile web experience uses a simple anchor link in the header to jump users to navigation options at the bottom of the page, allowing them to pivot to other site areas after consuming content. Content pages also feature contextual navigation for deeper exploration of related topics.
Design solutions often migrate across digital borders, sometimes unnecessarily. Many native iPhone apps include prominent "back" links in their navigation headers because Apple's devices lack physical back buttons. However, this pattern has needlessly migrated to mobile web experiences where it creates redundancy. Android, Blackberry, and Windows Phone devices have physical back buttons, and even Apple's mobile browser includes a prominent back control in its toolbar. When designing mobile web interfaces, you can leave "back" to the native functionality.
While fixed-position navigation bars at the bottom of the screen work well in native iOS apps (making actions thumb-accessible), they're problematic for mobile web experiences. Yahoo! Mail's implementation demonstrates how browser chrome combined with fixed menus leaves little room for actual content. Mobile web experiences must work across multiple platforms with varying browser interfaces and physical controls.
Mobile users are often distracted, with only "one eyeball and one thumb" available as they navigate the real world. They need clear, focused designs with minimal navigation options to complete tasks efficiently. Yahoo! Mail's compose screen exemplifies this approach with just a single navigation action ("cancel"), keeping the interface focused entirely on writing an email. Minimizing navigation options not only maintains focus but also prevents accidental taps that might disrupt the user's current objective.
第6章
Designing for Touch: The New Interface Paradigm
As mobile screens get smaller and are used in our hands, touch screens have become increasingly prevalent, turning the entire device into an interactive surface. Nokia's smartphones illustrate this transition well, with touch support growing dramatically over time. While some devices retain hardware inputs like trackpads and keyboards, touch is increasingly how people interact with the mobile web.
Web designers often respond to smaller mobile screens by shrinking interface elements, but this is counterproductive. For touch interfaces, elements should actually be bigger than you might be comfortable with. Human fingers are imprecise pointing instruments-they lack pixel-level accuracy, come in different sizes, and can slip during interactions. Larger touch targets help people get things done when they're in "one eyeball and one thumb" mode.
Touch targets should be 9mm (Microsoft) to 44x44 points (Apple), with at least 2mm spacing between them. MIT's Touch Lab found finger pads average 10-14mm and fingertips 8-10mm. Visual elements can be 50-100% of the actual touch target size, with padding making up the difference. Poorly sized and spaced actions can lead to serious usability issues, as seen in Quora's login screen where "Cancel" and "Login" are dangerously close together.
Action placement should consider how people hold their devices. Since most people (70-90%) are right-handed and use their thumbs while operating a mobile with one hand, primary actions work best in the middle or bottom of the screen, arranged left to right. The upper left corner is a stretch for right-thumb users-perfect for destructive actions like cancel or delete, making users think twice before tapping them.
Despite different terminology across platforms, there's remarkable consistency in touch gestures. Core gestures include tap, double tap, drag, swipe, pinch, spread, press, and variations of these. For mobile web experiences specifically, the list narrows to mainly tap, drag, and swipe due to browser limitations.
Natural user interfaces (NUIs) represent the future of computing, enabling direct interaction with content rather than through windows, icons, menus, and pointers. While touch gestures like spreading fingers to zoom are more intuitive and reflective of real-world interactions, we're still transitioning from graphical user interfaces (GUIs) to NUIs. For now, buttons remain necessary for primary actions, but designers should experiment with gestures for advanced controls or shortcuts.
Touch-only devices can't support hover interactions since there's no pointer to position over elements. This forces designers to rethink hover-dependent features. For mobile, designers have several options: place hover content directly on screen (as Twitter did with Favorite, Retweet, and Reply actions), make it available on tap/swipe, move it to a separate screen, or eliminate it entirely if the content wasn't valuable to begin with.
When designing for mobile, we must also consider non-touch and hybrid devices with indirect manipulation controls like trackpads, trackballs, and physical keyboards. For these devices, properly defined CSS :hover and :focus states provide crucial feedback about which elements are currently actionable.
第7章
Reimagining Input for the Mobile Era
The web's power has always come from people's ability to not only consume but also create content. Mobile input is just as important as output, but requires its own approach: embracing mobile as an opportunity for creation anywhere inspiration strikes, using optimized labels, leveraging appropriate input types and attributes, choosing the right form layouts, and exploring device capabilities beyond traditional input fields.
While past mobile design guidelines often advised limiting input on mobile devices, we should instead embrace mobile as an incredible opportunity for diverse user contributions. Despite the "one eyeball and one thumb" constraint, users clearly want to input content-evidenced by billions of daily text messages sent even through difficult feature phone keypads. Modern devices with improved touch screens, microphones, cameras, and other capabilities make input easier than ever. Most importantly, we must stop assuming people won't complete complex tasks on mobile-someone even purchased a $265,000 plane using eBay's iPhone app!
How we request input significantly impacts the answers we receive. On mobile, form labels need special consideration due to screen constraints. Top-aligned labels work best since they optimize limited screen real estate, accommodate longer text, and remain visible when virtual keyboards appear. Twitter's mobile signup form exemplifies this approach, with labels above fields and supporting text below-all remaining visible during input.
While asking questions with well-designed labels is important, making it easy for people to answer accurately is the real challenge on mobile. Thankfully, mobile devices offer capabilities that help overcome their constraints. Standard input types like checkboxes, radio buttons, and select menus provide touch-optimized controls when properly implemented. Mobile browsers automatically adapt these controls with appropriately sized touch targets and platform-specific interfaces.
Standard controls sometimes reach their limits on mobile-select menus with lengthy content can get cut off or force users through multiple taps. Custom controls can be more efficient: Kayak uses spinner controls that require just a single tap to adjust guest numbers, and implements smart defaults that make forms four times faster to complete. Their custom date picker with appropriately sized touch targets eliminates unnecessary tapping compared to American Airlines' three select menus.
HTML5 offers new input types that optimize mobile input without requiring custom code. Type="url" displays a keyboard with ".com" and "/" keys; type="email" shows "@" and "." keys; type="number" brings up a numeric keyboard. These input-specific keyboards make entering formatted data easier, and older browsers simply treat them as standard text inputs.
Input masks help users provide accurate answers by offering clear input cues and restricting entries to prevent mistakes. The most effective masks reveal their format upfront and maintain consistency throughout the input process. Good examples include email masks that show "@me.com" and tax ID masks that display the required format while blocking invalid characters.
When designing mobile forms, consider three key input scenarios: sequential questions, non-linear updates, and in-context inputs. For sequential forms (like registration or checkout), ruthlessly minimize the number of questions. For non-linear updates (like profile editing), list inputs with their current values and allow editing through focused dialogs or separate screens. For in-context inputs, enable quick contributions directly inline, like Quora's comment system.
Today's mobile devices offer capabilities that transcend traditional form inputs. Location detection allows services like Kayak and Twitter to capture position with a single tap instead of typing. Google Goggles uses device cameras to identify products, scan business cards, and translate languages-tasks that would require extensive typing in conventional forms. While native apps currently have better access to device APIs for these features, web browser support is rapidly expanding, promising richer input methods for web experiences soon.
第8章
Creating Adaptive Layouts for an Unpredictable World
Creating effective mobile layouts requires adapting our desktop design thinking to the unique constraints and capabilities of mobile devices. This means embracing the rapid pace of change in mobile, properly configuring mobile browsers, creating flexible and responsive designs, understanding device experience boundaries, and reducing content to what's truly necessary.
The mobile industry transforms dramatically and continuously-platform leaders get unseated, new devices emerge with different capabilities and constraints, and partnerships between manufacturers, platform vendors, and carriers constantly shift. Despite focusing on enduring design principles for consistent trends (powerful processors, faster networks, touch interfaces, better browsers), change remains inevitable. Rather than being overwhelmed, designers should embrace this uncertainty, take risks, and experiment while the boundaries between devices, browsers, and the web are still being defined.
The most important step in creating effective mobile layouts is signaling to mobile browsers that we've designed specifically for them. Understanding the meta viewport tag is crucial for designing mobile web experiences. Viewports help manage differences in pixel density, which impacts how elements appear on screens. Higher pixel density means physically smaller pixels, making elements that were large and legible on desktop appear tiny on high-density mobile screens.
Despite some mobile devices using common viewport widths, we can't count on a single width for our mobile web experiences. Even if every device used 320 pixels for device-width, orientation changes would still create different widths. To handle this and future device variations, we need highly elastic layouts that expand and contract based on available screen space.
When differences between screen sizes grow significant, flexible layouts reach their limits. Through fluid layouts, flexible media, CSS3 media queries, and sometimes JavaScript, responsive web design allows more substantial adaptation to different devices. By setting resolution "break points," you can apply different layout rules as device capabilities change. These rules can reposition elements, adjust image sizes, or remove elements altogether to make the best use of available space.
Devices differ not just in technical capabilities but in how people use them. Connected TVs, desktops, tablets, smartphones, and feature phones each have unique user postures, primary input methods, and display sizes. These differences often require different interface solutions. Many web applications design distinct solutions for different device experiences. Netflix, for example, has separate HTML5 solutions for connected TVs, tablets, desktops, and mobile devices.
Reduction is the best layout approach for mobile. Appropriately sized touch targets need room to respond to imprecise fingers. Responsive designs need to adapt to various screen sizes. Multiple device-specific solutions need maintenance as content evolves. All these factors push toward simpler screens-fewer variations to manage and fewer options for users to consider. Aim for the minimum necessary to help people meet their needs. When customers start asking for your desktop experience to be more like your simple, easy-to-use mobile one-you're doing it right.
第9章
Embracing the Mobile Future
Mobile-first design gives us powerful ways to approach the web. Today's mobile device is our true personal computer: always with us, connected, and filled with capabilities for productivity, communication, and entertainment. Starting with mobile in mind allows us to leverage enormous growth in mobile internet usage, embrace constraints that focus our services, use mobile capabilities to innovate customer experiences, and rethink web design principles for mobile contexts.
For best results, always test on actual mobile devices, as simulators and desktop browsers cannot substitute for the real thing. Don't be afraid to start small-some of the biggest mobile successes came from small experiments and passionate teams. You don't need to know everything about mobile-just take what you do know and go.
The mobile revolution isn't just a technical shift-it's fundamentally changing how people interact with information and each other. By designing for mobile first, we're not just adapting to smaller screens; we're creating experiences that are more focused, more capable, and ultimately more human. The constraints of mobile force us to prioritize what truly matters, while its capabilities enable us to connect with users in more meaningful ways.
As we look to the future, the line between mobile and desktop continues to blur. The principles of mobile-first design-focus, performance, touch-optimization, context-awareness-are increasingly becoming simply good design principles for all digital experiences. By starting with mobile now, you're not just preparing for today's mobile users; you're building the foundation for better digital experiences everywhere.
