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

1. 10 STOPS TOWARDS
A RESPONSIVE WEB
DESIGN MINDSET
Miika Puputti miikap@
www.frantic.com

2. 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...

3. LETS GO!

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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/

12. 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.

13. 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 http://futurefriend.ly
vehicle dashboards.
• Let’s start making the web future
friendly.

14. THAT’S IT FOLKS!

15. AUTHOR:
MIIKA PUPUTTI
miika.puputti@frantic.com
skype: miikapuputti
Working as a designer at
Frantic in Helsinki,
Finland.
Special thanks to:
http://ethanmarcotte.com/, http://bradfrostweb.com/
and http://www.lukew.com/
Follow me at: @miikap