10 STOPS TOWARDS A RESPONSIVE WEB DESIGN MINDSETMiika Puputti miikap@

www.frantic.com

THE MOBILE WEB IS ALREADY HERE

• In 2011, smartphone shipments surpassed desktop device shipments.

• The web is changing and we need to change the way we design and develop for it...

LETS GO!

1. PLANT THE SEED

• Just start thinking that the site you’re creating is going to be viewed on different devices and, more importantly, in different contexts.

• Knowing that there are variable screens and ways of use will spark new ideas about the way your content can shine.

2. PROTOTYPE!

• Start developing your content with context in mind. What do you want to say when the screen is huge or small? What will the priorities be?

• Wireframe these stages, where the site is different, and prototype with tools like Twitter’s Bootstrap or Zurb’s Foundation. They will help you take your wireframes to the next level and help you understand the way fluid grids work.

3. DO TEAMWORK. SERIOUSLY, DO IT.

• The lone wolf tactic does not work here, so teamwork is needed from the start. Designers have to talk with developers about the solutions that are on the drawing board.

• Nobody likes last minute surprises that need to work on multiple devices and browsers.

4. CREATE A DESIGN LANGUAGE

• How to design for a vast number of devices? What are they? Should we make different visuals for all of them? No.

• Create a design language that will be consistent on all of the devices; it still may vary a little from device to device.

5. SIMPLIFY AND GET TO THE POINT

• When browsing with a mobile device, users tend to want content right away, so keep it simple and straightforward. Take the load times in count and hide stuff that the mobile-phone user does not need right away.

6. MOBILE FIRST

• The mindset of creating content for mobile first creates focus and opportunity to make the desktop version come to life, while the core idea of the website is optimal for the smallest of screens.

7. TEST AS MUCH AS POSSIBLE

• Test your solution with the devices at hand and test it on the go, just to get a feel for the content while your out and about.

8. PICK THE RIGHT TOOLS

• To help your workflow there’s many tools, for example Adobe Shadow, that help you preview the code and designs on multiple devices at once. These come in handy when you don’t have a testing server.

http://labs.adobe.com/technologies/shadow/

9. GOD IS IN THE DETAILS

• Be ready to clock some extra hours to fine tune the details of the content, visuals and code.

• Add special treats for retina displays, Easter eggs for the desktop users, turbo boost the analytics and check the error pages and Humans.txt file.

10. FUTURE FRIENDLY

• What next? Your site should now be ready for a myriad of situations and displays, and maybe in the future your food blog will be on the retina screens of modern fridges or an automotive fuel saver application page will be found on electric vehicle dashboards.

• Let’s start making the web future friendly.

http://futurefriend.ly

THAT’S IT FOLKS!

AUTHOR:MIIKA PUPUTTImiika.puputti@frantic.comskype: miikapuputti

Working as a designer atFrantic in Helsinki, Finland.

Special thanks to:

http://ethanmarcotte.com/, http://bradfrostweb.com/ and http://www.lukew.com/

Follow me at: @miikap