Tweet
Tweet

Slide 1

Slide 1 text

Going Responsive for Developers

Slide 2

Slide 2 text

Mike van Riel @mvriel M e

Slide 3

Slide 3 text

I'm not a Designer

Slide 4

Slide 4 text

What is Responsive

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Most time is spent thinking and not coding

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Let's learn by example

Slide 10

Slide 10 text

Now

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Find inspiration

Slide 13

Slide 13 text

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/

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Example layouts

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Back to Joind.in

Slide 20

Slide 20 text

Exercise

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Design

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Inkscape

Slide 26

Slide 26 text

Demo This must go terribly terribly wrong

Slide 27

Slide 27 text

Back to Joind.in II

Slide 28

Slide 28 text

Use a CSS Framework

Slide 29

Slide 29 text

Twitter Bootstrap 2 960gs Blueprint YUI and many more

Slide 30

Slide 30 text

Each of these combine the experience of several designers

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Needs HTML 5 ... ...

Slide 33

Slide 33 text

Defining a row
... ...
... ...

Slide 34

Slide 34 text

Defining columns
...
...
...
...
12 Columns

Slide 35

Slide 35 text

Nesting columns
...
...
...
...
...
...

Slide 36

Slide 36 text

Two column example
...
...
...
...
...
...

Slide 37

Slide 37 text

Three column example
...
...
...
...
...
...
...
...

Slide 38

Slide 38 text

Modern example
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...

Slide 39

Slide 39 text

Sidebar example
...
...
...
...
...
...
...
...
...
...
...
...

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Back to Joind.in III

Slide 43

Slide 43 text

Back to Joind.in IV

Slide 44

Slide 44 text

Is there time for a Demo?

Slide 45

Slide 45 text

Time's up. (What a shame)

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

➔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