Responsive Design & Development

Slide 1

Slide 1 text

Max Shelley @maxshelley

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

What is a ‘responsive’ layout?

Slide 4

Slide 4 text

“an approach to web design in which a designer intends to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)” - Wikipedia “Use CSS media queries to make layout changes based on viewport size, pixel density and orientation.” - Me

Slide 5

Slide 5 text

http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

Slide 6

Slide 6 text

Ubiquitous mention of @beep. http://www.alistapart.com/articles/responsive-web-design/

Slide 7

Slide 7 text

ok, so what’s changeD? we’ve built percentage based websites before... “ ”

Slide 8

Slide 8 text

@media only screen and (max-width:599px) { .class_name { border-color: red; } } @media only screen and (min-width:600px) and (max-width:767px) { .class_name { border-color: red; } } @media (min-width: 768px) and (max-width: 979px) { .row-fluid .span12 { width: 99.999999993%; *width: 99.9468085036383%; } .row-fluid .span11 { width: 91.436464082%; *width: 91.38327259263829%; } .row-fluid .span10 { width: 82.87292817100001%; *width: 82.8197366816383%; } .row-fluid .span9 { width: 74.30939226%; *width: 74.25620077063829%; } .row-fluid .span8 { width: 65.74585634900001%; *width: 65.6926648596383%; } .row-fluid .span7 { width: 57.182320438000005%; *width: 57.129128948638304%; } .row-fluid .span6 { width: 48.618784527%; *width: 48.5655930376383%; } .row-fluid .span5 { width: 40.055248616%; *width: 40.0020571266383%; } .row-fluid .span4 { width: 31.491712705%; *width: 31.4385212156383%; } .row-fluid .span3 { width: 22.928176794%; *width: 22.874985304638297%; } .row-fluid .span2 { width: 14.364640883%; *width: 14.311449393638298%; } .row-fluid .span1 { width: 5.801104972%; *width: 5.747913482638298%; } }

Slide 9

Slide 9 text

Slide 10

Slide 10 text

What’s it good for?

Slide 11

Slide 11 text

• Sites with a high (or rising) percentage of mobile traffic. • Sites that represent other mobile content e.g. websites for apps, web apps etc. • Lightweight eCommerce. • Content-based sites. • Landing pages. • Anyone (if they’re willing to do the legwork and check that it’s doing what they need it to do).

Slide 12

Slide 12 text

What’s it not good for?

Slide 13

Slide 13 text

• Web-apps (although you can use elements of it). • Fully-targeted/tested content i.e. If you want mobile users to see mobile-only content. • Heavily optimised sites (there’s a trade-off there). • Image-heavy content (again, unless you’re willing to put in the legwork). • You’ll probably know if it’s not right...

Slide 14

Slide 14 text

How it changes your workflow. Content first. Mobile first. Mobile first. Content first. More design in the browser. Clients. No PSD? What?

Slide 15

Slide 15 text

Are there any useful tools that can help me? “ ”

Slide 16

Slide 16 text

Frameworks. “Everything is a framework.” http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/ http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

Slide 17

Slide 17 text

Gridset - gridsetapp.com

Slide 18

Slide 18 text

Gridset - gridsetapp.com

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

https://docs.google.com/spreadsheet/ccc?key=0AoUAJWmYgaHHdHZZWWpPQkx4eHpBaUxna3dyMGkzLUE

Slide 21

Slide 21 text

CSS Pre-compilers. LESS, SASS.

Slide 22

Slide 22 text

http://incident57.com/codekit/

Slide 23

Slide 23 text

responsivepx.com (by Remy Sharp @rem)

Slide 24

Slide 24 text

‘View Responsive Layouts’ in Web Developer Toolbar for Firefox.

Slide 25

Slide 25 text

Oh cool, I can see some uses for that, let’s get started... “

Slide 26

Slide 26 text

http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them • Explaining RWD to clients • The lack of a static design phase • Navigation • Images • Tables • Converting old fixed-width sites • What to serve users of old versions of IE • Testing time and cost

Slide 27

Slide 27 text

Responsive Navigation Patterns http://bradfrostweb.com/blog/web/responsive-nav-patterns/ • Top Nav or “Do Nothing” Approach • The Footer Anchor • The Select Menu • The Toggle • The Left Nav Flyout • The Footer Only • The “Hide and Cry”

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Images http://css-tricks.com/which-responsive-images-solution-should-you-use/ • Do I have legacy content? • Do I care about special markup? • Do I care about semantics? • Do I care about validity? • Do I care about art direction? • Do I care about JavaScript? • Do I care about Server Side Components? • Do I care about bandwidth testing? • Do I care about relying on third parties? • Is there a specific CMS with specific CMS powers involved? • Can I wait for the future?

Slide 34

Slide 34 text

http://www.w3.org/community/respimg/ Responsive Images Community Group http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html The picture Element and the srcset attribute

Slide 35

Slide 35 text

“Hiding” content on mobile? Dynamically loading content on certain viewports? Making it up as we go along? Awesome.