Going Responsive for Developers

Mike van Riel @mvriel M e

I'm not a Designer

What is Responsive

“Responsive design does not replace Mobile applications but empowers the
user to experience your website from any device.” -- Me

Most time is spent thinking and not coding

Primary aids ✔ Media queries (CSS) ✔ Grid layouts ✔
Adapting images

Let's learn by example

Goals ✔ Mobile-enabled ✔ More focus on what matters ✔
Ratings ✔ Events and scheduling ✔ Call for Papers ✔ Face-lift Did you know?

Find inspiration

Inspiration ✔ Look at the competition ✔ What can you
improve on that? ✔ Look at existing websites ✔ http://mediaqueri.es/ ✔ http://templatemonster.com ✔ http://www.4templates.com/

Think about your Grid 1. Divide into contextual rows 2.
Identify content blocks per context 3. Divide into columns 4. Consider order of importance

Example layouts

“I did get Tom Hanks to say, Life is just
a box of chocolates.” -- James Lipton

Back to Joind.in

Exercise

Find the grid in the website http://joind.in

Design

Sketch your first tries • Makes grid tangible • Cheap
try-outs • Quick • Tools • Pen and paper • iPad with Stylus Paper by 42

“The best ideas come to you under the shower or
on the toilet” -- Me

Inkscape

Demo This must go terribly terribly wrong

Back to Joind.in II

Use a CSS Framework

Twitter Bootstrap 2 960gs Blueprint YUI and many more

Each of these combine the experience of several designers

Example: Twitter Bootstrap • Combines a CSS and JS Framework
• Responsive design is a first citizen • Provides elements with strong symbiosis • Less bootstrapping yourself

Needs HTML 5 <!DOCTYPE html> <html lang="en"> ... </html> <!DOCTYPE
html> <html lang="en"> ... </html>

Defining a row <div class="row"> ... ... </div> <div class="row">
... ... </div>

Defining columns <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> <div
class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> 12 Columns

Nesting columns <div class="row"> <div class="span4"> <div class="row"> <div class="span1">...</div>
<div class="span4">...</div> </div> </div> <div class="span8">...</div> </div> <div class="row"> <div class="span4"> <div class="row"> <div class="span1">...</div> <div class="span4">...</div> </div> </div> <div class="span8">...</div> </div>

Two column example <div class="row"> <div class="span12">...</div> </div> <div class="row">
<div class="span4">...</div> <div class="span8">...</div> </div> <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>

Three column example <div class="row"> <div class="span12">...</div> </div> <div class="row">
<div class="span3">...</div> <div class="span6">...</div> <div class="span3">...</div> </div> <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div class="span3">...</div> <div class="span6">...</div> <div class="span3">...</div> </div>

Modern example <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div
class="span3">...</div> <div class="span3">...</div> <div class="span3">...</div> <div class="span3">...</div> </div> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> <div class="span4">...</div> </div> <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div class="span3">...</div> <div class="span3">...</div> <div class="span3">...</div> <div class="span3">...</div> </div> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> <div class="span4">...</div> </div>

Sidebar example <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div
class="span8"> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> </div> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> </div> </div> <div class="span4">...</div> </div> <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div class="span8"> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> </div> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> </div> </div> <div class="span4">...</div> </div>

Responsiveness • Grids help to collapse elements • Think about
which to throw away • Consider which elements should be dominant • Scrolling is good; clicking not so much

More responsiveness • Do not forget to link to bootstrap-responsive.css!
• Use media queries for conditional CSS @media (minwidth: 980px) { … }

Back to Joind.in III

Back to Joind.in IV

Is there time for a Demo?

Time's up. (What a shame)

http://london2012.live.symfony.com/ Symfony Live London 2012

Questions? Y es, you! Please rate this talk http://joind.in/6711 Please
rate this talk http://joind.in/6711

➔Navigation http://bradfrostweb.com/blog/web/responsive-nav-patterns/ ➔Layout types http://www.lukew.com/ff/entry.asp?1514 ➔Screen sizes http://spirelightmedia.com/responsive-design-device-resolution-reference ➔CSS Frameworks
➔ http://twitter.github.com/bootstrap/ ➔ http://960.gs/ ➔ http://blueprintcss.org/ ➔ http://yuilibrary.com/ ➔Examples ➔ http://responsive.is/ ➔ http://mediaqueri.es/ Resources Please rate this talk http://joind.in/6711 Please rate this talk http://joind.in/6711

Going Responsive for Developers

Going Responsive for Developers

More Decks by Mike van Riel

Other Decks in Technology

Featured

Transcript