10 stops towards a responsive web design mindset

Download 10 stops towards a responsive web design mindset

If you can't read please download the document

Post on 27-Jan-2015




0 download

Embed Size (px)


A quick look how to start thinking responsive in your design and development of websites.


  • 1. 10 STOPS TOWARDSA RESPONSIVE WEBDESIGN MINDSETMiika Puputti miikap@www.frantic.com

2. THE MOBILE WEB IS ALREADY HEREIn 2011, smartphoneshipments surpasseddesktop deviceshipments. The web is changingand we need to changethe way we design anddevelop for it... 3. LETS GO! 4. 1. PLANT THE SEED Just start thinking that the site youre creatingis going to be viewed on dierent devicesand, more importantly, in dierent contexts. Knowing that there are variable screens andways of use will spark new ideas about theway your content can shine. 5. 2. PROTOTYPE! Start developing your content with context inmind. What do you want to say when thescreen is huge or small? What will the prioritiesbe? Wireframe these stages, where the site isdierent, and prototype with tools like TwittersBootstrap or Zurbs Foundation. They will helpyou take your wireframes to the next level andhelp you understand the way uid grids work. 6. 3. DO TEAMWORK. SERIOUSLY, DO IT. The lone wolf tactic does not work here, soteamwork is needed from the start. Designershave to talk with developers about thesolutions that are on the drawing board. Nobody likes last minute surprises that needto work on multiple devices and browsers. 7. 4. CREATE A DESIGN LANGUAGE How to design for a vast number of devices?What are they? Should we make dierentvisuals for all of them? No. Create a design language that will beconsistent on all of the devices; it still mayvary a little from device to device. 8. 5. SIMPLIFY AND GET TO THE POINT When browsing with a mobile device, userstend to want content right away, so keep itsimple and straightforward. Take the loadtimes in count and hide stu that the mobile-phone user does not need right away. 9. 6. MOBILE FIRST The mindset of creating contentfor mobile rst creates focus andopportunity to make the desktopversion come to life, while thecore idea of the website is optimalfor the smallest of screens. 10. 7. TEST AS MUCH AS POSSIBLE Test your solution with the devices at handand test it on the go, just to get a feel for thecontent while your out and about. 11. 8. PICK THE RIGHT TOOLS To help your workow theres many tools, forexample Adobe Shadow, that help youpreview the code and designs on multipledevices at once. These come in handy whenyou dont have a testing server. http://labs.adobe.com/ technologies/shadow/ 12. 9. GOD IS IN THE DETAILS Be ready to clock some extra hours to ne 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 le. 13. 10. FUTURE FRIENDLY What next? Your site should now beready for a myriad of situations anddisplays, and maybe in the futureyour food blog will be on the retinascreens of modern fridges or anautomotive fuel saver applicationpage will be found on electric http://futurefriend.lyvehicle dashboards. Lets start making the web futurefriendly. 14. THATS IT FOLKS! 15. AUTHOR:MIIKA PUPUTTImiika.puputti@frantic.comskype: miikapuputtiWorking 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


View more >