Slide 1

Slide 1 text

Responsive Web Design A brief overview Monday, 30 April 12 Introduce myself - Creative technologist - here to help bridge any gaps between design and development... - we keep on top of front end trends Introduce the talk - What is RWD - some examples - The challenges

Slide 2

Slide 2 text

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. John Allsopp A Dao of Web Design http://www.alistapart.com/articles/dao/ Monday, 30 April 12 What is responsive design? Going way back to April 2000 - John Allsopp published a great article called ‘A Dao of web design’ - about the web as a medium compared to print + challenges it faced as an emerging medium at the time. - this quote is from that and comes well before responsive design was conceived as an idea. Interesting read - eery how prophetic it has turned out to be when considering the challenges the web is currently facing.

Slide 3

Slide 3 text

Monday, 30 April 12 Flexibility was being talked about in 2000 - but we’ve really been designing inflexibly since then really - 800x600 -> 1024x768 Designers have simply been adapting by - increasing the canvas of your chosen design tool and carry on as before - Not very futureproof When designs hit development, sites were usually static fixed widths - a small number of sites used fluid layouts, stretching to full width

Slide 4

Slide 4 text

Monday, 30 April 12 With the evolution of new devices... forced to think about flexibility more - makes it hard to know what resolution you are actually designing for New devices are now released regularly ...expand Older devices being retro fitted with internet capabilities - like TV’s.

Slide 5

Slide 5 text

http://www.456bereastreet.com/archive/200704/poll_results_504_of_respondents_maximise_windows/ 1070 respondents 50.4% maximise their browser window Split 65% on Windows, 20% on Mac POLL CONDUCTED APRIL 2007 RESPONSIVE DESIGN Monday, 30 April 12 It’s not just devices that are changing though. - Just because someone has a large monitor, doesn’t mean they’ll choose to use it all Poll - April 2007 online - showed that out of over 1000 responses, just 65% of Windows users maximised their browser window. - only 20% of Mac users expand... It’s harder than ever to predict how users will actually be viewing your finished site - the main thing to remember as designers...

Slide 6

Slide 6 text

Monday, 30 April 12 ...you can’t assume anything about the device or platform users will be viewing your site from. Or as a politician once put it much better:

Slide 7

Slide 7 text

There are known knowns; these are the things we know we know. There are known unknowns; these are the things that we know we don't know. But there are also unknown unknowns. These are the things we don't know we don't know. Donald Rumsfeld Monday, 30 April 12 I actually think he was thinking about RWD when he said this But, there is no such thing as a desktop site anymore - any device can potentially view your website at any resolution....

Slide 8

Slide 8 text

Monday, 30 April 12 ...and it’s these changes and unknowns that caused people to start developing the idea of ‘responsive design’. As mentioned earlier, fluid grids had been used by some websites previously - but not particularly successfully, and fluid never become widely adapted Responsive is the evolution of fluid grids into something that’s much more flexible. != proportional sizing, more a new way of thinking about how you design...

Slide 9

Slide 9 text

Monday, 30 April 12 fluid grids = reliant robin then Responsive design = Batmobile = much better So when designing, where should you start with RWD?

Slide 10

Slide 10 text

Mark Boulton A Richer Canvas http://www.markboulton.co.uk/journal/comments/a-richer-canvas We need to shed the notion that we create layouts from a canvas in. We need to flip it on its head and create layouts from the content out. Monday, 30 April 12 Content - most important part of any site, no matter what the resolution or device. quote... Strip it all back and think about what’s important to the user, irrespective of device. - read the content - share the content - to engage with the content? Myth that mobile users don’t need ‘all the information’ - just needs to be presented in a usable way.

Slide 11

Slide 11 text

Monday, 30 April 12 Going back to the number of devices - click - don’t think too much about the devices you want to design for at the start One of the key aspects of RWD is the flow of the design and how it scales - this leads to breakpoints in the design. But let the design dictate the breakpoints, rather than device resolution dictating break points...

Slide 12

Slide 12 text

Monday, 30 April 12 ...mainly because if a new device comes out tomorrow, your design should work on it not about making a website that works perfectly at 2 or 3 resolutions, and then just OK in between. The design should work on any device at any resolution to be truly responsive.

Slide 13

Slide 13 text

Navigation MAIN CHALLENGES RESPONSIVE DESIGN Monday, 30 April 12 So taking some of the main challenges when designing RWD - Nav Responding width navigations can be hard...

Slide 14

Slide 14 text

NAVIGATION PATTERNS Monday, 30 April 12 ...there’s a good article on how designers are dealing with responsive menus pro’s and cons of each - here’s a few...

Slide 15

Slide 15 text

SELECT LIST NAVIGATION PATTERNS Monday, 30 April 12 select list

Slide 16

Slide 16 text

TOGGLE NAVIGATION PATTERNS Monday, 30 April 12 toggle menu (accordion style)

Slide 17

Slide 17 text

LEFT SIDE NAVIGATION PATTERNS Monday, 30 April 12 Flyout from the left side - popularised by Facebook.

Slide 18

Slide 18 text

Navigation Images MAIN CHALLENGES RESPONSIVE DESIGN Monday, 30 April 12 Images Not just how they scale - think about how they serve different purposes on smaller resolutions compared larger resolutions. (Youtube video to just a thumbnail)

Slide 19

Slide 19 text

DCONSTRUCT 2012 RESPONSIVE SITES Monday, 30 April 12 So let’s go through some examples: 100% fluid vs snappy dConstruct

Slide 20

Slide 20 text

SMASHING MAGAZINE RESPONSIVE SITES Monday, 30 April 12 Examples go here

Slide 21

Slide 21 text

BOSTON GLOBE RESPONSIVE SITES Monday, 30 April 12 Examples go here

Slide 22

Slide 22 text

CSS TRICKS RESPONSIVE SITES Monday, 30 April 12 Examples go here

Slide 23

Slide 23 text

LYCOS RESPONSIVE SITES Monday, 30 April 12 Examples go here

Slide 24

Slide 24 text

INFORMATION ARCHITECTS RESPONSIVE SITES Monday, 30 April 12 Examples go here

Slide 25

Slide 25 text

RESPONSIVE EMAILS Monday, 30 April 12

Slide 26

Slide 26 text

RESPONSIVE EMAILS Monday, 30 April 12

Slide 27

Slide 27 text

BEST PRACTICE 590px - best practice for desktop 320px - best practice for email iPhone4s and iPhone4 require designs to be worked up at 640x960, rather than 320x480 RESPONSIVE EMAILS Monday, 30 April 12

Slide 28

Slide 28 text

You can hide things on the mobile version (but not the other way around) Use 14pt as a minimum font size on mobile Keep CTAs big enough for a finger tap (44px of ‘space’) Think about how you can keep your logo / key imagery crisp (crops, clever slices etc) TIPS RESPONSIVE EMAILS Monday, 30 April 12 You can alter the font size from desktop to mobile (and colour etc)

Slide 29

Slide 29 text

T-MOBILE RESPONSIVE EMAILS Monday, 30 April 12

Slide 30

Slide 30 text

T-MOBILE RESPONSIVE EMAILS Monday, 30 April 12 h"p://t-­‐mobilenews.co.uk/poll h"p://t-­‐mobilenews.co.uk/paymiphone-­‐eurobooster

Slide 31

Slide 31 text

SAINSBURY’S RESPONSIVE EMAILS Monday, 30 April 12

Slide 32

Slide 32 text

Navigation Images How to design ‘responsively’ MAIN CHALLENGES RESPONSIVE DESIGN Monday, 30 April 12 BIGGEST CHALLENGE - finding the best way to design responsively How do you show how something scales in flat files? - not feasible for 5 designs

Slide 33

Slide 33 text

Monday, 30 April 12 It will be slightly different for every designer, and how they prefer to work. Best RWD designs will come from those designers most willing to ‘let go’ of their designs - trust and collaborate the devs that are tasked with bringing them to life. - could learn some front end yourself (controversial) - know what’s possible Letting go is implicitly difficult - people (rightly) feel protective of their work

Slide 34

Slide 34 text

Design for components and elements DESIGNING FOR RESPONSIVE RESPONSIVE DESIGN Monday, 30 April 12 Couple of things that might help when designing RWD Design for components and elements on the page

Slide 35

Slide 35 text

Design for components and elements Style guides DESIGNING FOR RESPONSIVE RESPONSIVE DESIGN Monday, 30 April 12 Style guides Consistent font sizes, line heights, margins, colours etc

Slide 36

Slide 36 text

Design for components and elements Style guides Flexible Grids DESIGNING FOR RESPONSIVE RESPONSIVE DESIGN Monday, 30 April 12 Grids - Help think about flexibility and scale - lots of grid systems out there

Slide 37

Slide 37 text

WHY BOTHER? RESPONSIVE DESIGN Monday, 30 April 12 Why Bother? Why am I going on about RWD so much anyway?...

Slide 38

Slide 38 text

If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. Web design is responsive design. Responsive Web Design is web design, done right. Andy Clarke http://the-pastry-box-project.net/andy-clarke/2012-january-3/ Monday, 30 April 12 I think Andy Clarke summed it up when he said...‘quote’ If you don’t embrace responsive web design, the web will start to leave you behind - evolve to shift in tech

Slide 39

Slide 39 text

Web Apps ...AND IT’S GOOD BECAUSE RESPONSIVE DESIGN Monday, 30 April 12 ...and it has some major advantages over static widths Web apps better than native - Cross platform

Slide 40

Slide 40 text

Web Apps More stylable UI than native ...AND IT’S GOOD BECAUSE RESPONSIVE DESIGN Monday, 30 April 12 More stylable UI - native can be constrained, the web isn’t apart from your imagination

Slide 41

Slide 41 text

Web Apps More stylable UI than native Easier sell ...AND IT’S GOOD BECAUSE RESPONSIVE DESIGN Monday, 30 April 12 Easier sell - make 1 site rather than multiple

Slide 42

Slide 42 text

WHY BOTHER? RESPONSIVE DESIGN Monday, 30 April 12 ...and it’s an exciting, fast changing area You could end up pioneering something that hasn’t been done ...like the guy in the red trousers at this party Lots of things haven’t been ironed out - which makes it challenging, but fun