We’ve previously explored the philosophy of responsive web design. Responsive design involves blurring the lines separating users from their environment, and technology from structure. In concrete terms, this translates to fluid web design; building digital environments capable of adapting to the needs and demands of users, regardless of the platform or device. Responsive design then represents a paradigm shift in web design; it encourages designers to conceive of sites as environments that engage end-users, rather than environments that end-users engage with.

Responsive design therefore encourages us to fundamentally rethink a lot of our assumptions about web design – even up to the platforms we design on and for. This is where mobile-first design comes into play.

Laptop and desktop

Killing the PC within you

While PC usage hasn’t declined, estimates show that mobile device usage has just overtaken it for the first time. The average person in the UK is now spending approximately 13 minutes more on a mobile device than on a PC per day. That usage is exponentially increasing as mobile technology becomes more powerful and more readily available.

Traditionally, designers tended to design for desktop first, and then adapt the site later on for mobile browsers. However, if responsive web design naturally involves meeting the increasing demands of mobile browsers rather than desktops, then it makes sense to think about reversing this process. As Luke Wroblewski argues, applying our deeply-ingrained PC-driven instincts to mobile design can lead to a number of big mistakes. Web design needs to trickle-up from the smallest resolutions up to the biggest.

Wroblewski gives a good example of a PC-driven mistake. Mobile connectivity is often much more inconsistent than hard connections. WiFi signal depends heavily on location, and anyone with a 4G-capable smartphone will tell you how difficult it is to get a consistent high-speed connection. This can lead to much heavier wait times on mobile apps and browsers, breaking the immersion and interaction a user is engaging in.

A PC-first process waits for an interaction, contacts a server, the server responds, and the app or site updates. With slower mobile connections, this can mean users are waiting for a very long time to feel as if the device has recognised their actions. A mobile-first solution to this problem shows users the results of their actions immediately, even though their request is still being background processed. Wroblewski gives the example of the Instagram app doing this well: “While designers can’t speed up the network, they can provide users with the sense that response times are faster than they actually are. This flips the previous PC paradigm around.”

Mobile use

Mobile-first design then requires us to move away from conventional PC-centric wisdom and come up with creative solutions to the new problems posed by mobile browsing. It forces designers to concentrate on functionality and content. With small screen sizes, layouts must be streamlined and content must be focused. These concerns become integral to the whole mobile-first design process. Most importantly, the structural constraints of mobile-first design – limited screen size and connectivity – demands that designers meet users’ most basic requirements first. By designing an app or site in a concise and effective way, whereby users feel as if their interaction is instantaneous and felt, scaling up becomes no problem. Getting the hardest part right first, and extending that strong design upwards, more readily ensures that your designs will respond to all users.

 

Adam Parrish

Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.