Responsive Web DesignUX Considerations
Responsive Web Design (RWD)1 | What exactly is responsive web design?2 | Should every website be responsive?3 | The respon...
1 |What exactly isresponsive webdesign?
What is responsive web design?A design approach that aims to provide aconsistent and easily accessible experienceon all de...
“We‟re faced with a greater number ofdevices, input modes, and browsers thanever before. Therefore, rather than tailoringd...
Fluid layoutFlexible mediaMedia queriesRWD 3 key components
Fluid layoutNon-fixed layout, with percentage-based fluidcolumns.1/** Four-column grid active* ---------------------------...
Fluid layoutColumn percentages based on the amount ofEMs as opposed to pixels.1PixelsVSEM’s
Fluid layoutContent defines the breaking points.1
- Should also be fluid and scale with thebrowser’s dimensions.- Scale in measurements but also in filesizes.- Should rende...
Flexible media2Icons and graphics as symbol fonts.
Flexible media2The average size of an image on a web pageis 788kB. All images add up to 62% of the totalfile size of a web...
Flexible media2Use video platforms that already successfullyhandle videos across devices.
Flexible media… and content2Ensure hierarchy and relationships staytruthful to messaging and strategy.Content should also ...
Flexible media… and content2Content Everywhere: Strategy and Structure for Future-Ready Content / by Sara Wachter-Boettcher.
Flexible media… and content2InterdigitationTrent WaltonContentchoreographyJordan Moore
Flexible media… and contentCreate once, publish everywhere2Nissan team @ Critical Mass.- From a single CMS.- Highly struct...
Media queries3Allow to readjust a layout when certainphysical conditions are present.
RWD 3 key componentsBeyond Squishy: The Principles of Adaptive Design / by Brad Frost.
- Device feature detection- User Agents- Server-side components (RESS)- Inter-device communication- API’s- Conditional or ...
Performance“If somebody cannot load yourwebsite, they will never evenknow how it is to use it.”Anna Debenham
Performance“When someone builds a 4MBresponsive site, blame theimplementation, not thetechnique.”Tim Kadlec
Performance“You want a huge headerimage at the top of the page?Sure, but that‟s a 100kB ofyour budget used up, so you‟llha...
2 |Should everywebsite beresponsive?
Device diversityFuture proofTodays internet usageInput methods diversityConsistent brand messaging5 key reasons for RWD
Device diversityWe cannot think of the web in termsof devices.1
“People thinking RWD ismobile design, tabletdesign, game consoledesign, or even futuristic-screen-on-your-fridge designare...
Future proofThe web is not static.2
Todays internet usage3The Mobile Consumer: A Global Snapshot 2013 / by Nielsen.How many users perform web browsing ontheir...
Todays internet usage3The Mobile Consumer: A Global Snapshot 2013 / by Nielsen.How many users perform mobile shopping?
Todays internet usage3“By 2015, the ITU predictsmobile traffic will exceeddesktop traffic, and the „mobile-mostly‟ group a...
The other end of the spectrum:game consoles.- 51% of children aged 12-17 own aportable game console.- 80% of children aged...
Input methodsUsers access websites using a variety ofinput modes.4
Consistent brand messageAcross multiple experiences and platforms, allfrom a single content management system.5
3 |The ResponsiveDesign workflow.
RWD, a more expensive approach?More time + more effort & skills =higher cost for the client.
RWD, a more expensive approach?- There’s a cost too for ignoring the multitudeof devices currently accessing websites.- Cr...
RWD workflow, getting it rightOur current design workflowneeds to change.- Prototyping fluid layouts, instead ofwireframin...
RWD workflow, getting it rightProject planning needs to adaptas well.-Set an optimisation budget upfront.-Consider which e...
ConclusionRWD represents an exciting challenge, andthe opportunity to create not only userinterfaces, but full online expe...
Thank youMichelle Constantehttp://michelleconstante.com@michellula
Upcoming SlideShare
Loading in …5
×

Responsive Web Design, UX Considerations @ Digital Shoreditch Festival

1,019 views

Published on

This presentation aims to tackle a simple question: should every website be responsive?
To answer this question it explores:
What exactly is responsive web design
5 key reasons why every website should be responsive
The responsive design workflow

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,019
On SlideShare
0
From Embeds
0
Number of Embeds
135
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Consistent content delivered through one URL, one CMS, andone code base. Adapting the presentation of that content based on the capabilities of the device and browser in which they are displayed.
  • Best practice tip.Columns that expand and contract in percentages proportional to the screen size, until they reach a breaking point, at which the grid changes to fit the new screen size.
  • Best practice tip.EM units will adapt automatically to the font the browser is using.Which means the grid itself, will scale up & down in proportion to the font size, which itself adapts proportionally to the screen size.Content will never feel squeezed or pulled apart as the screen size changes./////EM comes from the letter ‘M’ and is a unit of measurement in typography –an M represented the maximum width of all letters at a given point size. Nowadays the em unit refers to the point size of the font.On CSS:1em = current font size 2em = 2 times the size of the current font… and so on.
  • Best practice tip | Experience BT vs Nissan.Not based on device dimensions or when it will specifically be rendered on an mobile, a tablet, or web TV.
  • Tip: …will be rendered in any site where OpenType features are supported.Other option is SVG > Filament Group’s Grunticon.
  • Mobile connections are slower, and game console browsers don’t have a lot of memory allocated, therefore, files in these devices should be light for them to render fast.Techniques:Different image sets, retina images compressed down to 75% of the base image, or server-side image resizing.
  • Tip: Don’t reinvent the wheel.File sizes of videos should also scale and adapt to the browsers and device capabilities.
  • Many responsive websites simply stack their content, slipping sidebars below “main” content, rather than taking their meaning and message into account. This is a one-size-fits-all approach that can be easily improved.
  • “Weave bits of one piece of content in between parts of another, rather than just plopping it to the bottom of the page.”In order to offer valuable and useful information at the right time.Flexbox a CSS property. | “Content first, navigation last” Brad Frost.
  • Content Management System
  • Identify the media rendering our design, and inspects its physical characteristics (e.g. how wide is it). Based on which it adjusts the CSS stylesheet and therefore the characteristics of the fluid layout.
  • Performance is a big part of the user experience, maybe the most important one.
  • Devs need time to craft their code, and ensure they are using all the possible tricks to create a light and fast-loading site, that makes the most of each device features. On average, light sites should not go past the 1MB file size.
  • EVERY UX & DESIGN DECISION AFFECTS PERFORMANCEOnce decisions are made, devs can only do so much to improve performance.
  • One-size-fits-all approaches are never good.Is not about Web vs Native apps, but how to handle websites.
  • 5 key reasons why websites should be responsive.
  • We don’t access a ‘web’ on desktop, then access a different ‘web’ on mobiles, a new one on TV’s. There is only one web, which is fluid, and it gets accessed from an ever-increasing number of devices.
  • RWD is device agnostic.
  • As breaking points in RWD are based on the content, designs will be ready for any new device that appears in the market.Google Glass / Samsung’s smart fridge
  • India > high mobile ownership penetration of81% > BUT from that 80% own a feature phone vs. 10% own a smartphone.
  • Mainly in South Korea, China, and the U.S. users shop or use a retail app at least once a month.The rest of users browse products, conduct price comparisons, and read product reviews.
  • People using mobile devices as their main platform to access the web.
  • Behind the numbers:Kids are most likely to go online using a console instead of a phone, as they don't have a smartphone, or they don't have a smartphone with a data plan.Low income houses tend to have a game console instead of a computer, therefore consoles might be the only way they haveto access the web.
  • Mouse, keyboard, trackpad, handheld game controller, touch, gestures, & voice. RWD is not only about layout and content adapting to smaller screens, we need to ensure our interfaces are accessible for all those input methods.
  • …after all RWD might not be that expensive.
  • The RWD workflow is not yet defined.
  • When specifying timelines and costs…Sarah Parmenter: client sign off in content hierarchy (not on the visual side of things, neither on wireframes, which use to be the guide for the placement of things –as the web is fluid, placement will not be consistent across devices but content hierarchy will be).Code, style guides, pattern libraries, prototypes, as deliverables, not PSD files.
  • The more we make it, the easier it will get.As Anna Debenham says: “Next time you design something, make sure you are designing for the internet.”
  • Responsive Web Design, UX Considerations @ Digital Shoreditch Festival

    1. 1. Responsive Web DesignUX Considerations
    2. 2. Responsive Web Design (RWD)1 | What exactly is responsive web design?2 | Should every website be responsive?3 | The responsive design workflow.
    3. 3. 1 |What exactly isresponsive webdesign?
    4. 4. What is responsive web design?A design approach that aims to provide aconsistent and easily accessible experienceon all devices and screen sizes.
    5. 5. “We‟re faced with a greater number ofdevices, input modes, and browsers thanever before. Therefore, rather than tailoringdisconnected designs, we should treatthem as facets of the same experience.”What is responsive web design?Ethan Marcotte, 2010.
    6. 6. Fluid layoutFlexible mediaMedia queriesRWD 3 key components
    7. 7. Fluid layoutNon-fixed layout, with percentage-based fluidcolumns.1/** Four-column grid active* ----------------------------------------* Margin | # 1 2 3 4 | Margin* 5.5% | % 25 50 75 100 | 5.5%*/
    8. 8. Fluid layoutColumn percentages based on the amount ofEMs as opposed to pixels.1PixelsVSEM’s
    9. 9. Fluid layoutContent defines the breaking points.1
    10. 10. - Should also be fluid and scale with thebrowser’s dimensions.- Scale in measurements but also in filesizes.- Should render sharply on the smallestand biggest screens.Flexible mediaIcons, graphics, images & videos2
    11. 11. Flexible media2Icons and graphics as symbol fonts.
    12. 12. Flexible media2The average size of an image on a web pageis 788kB. All images add up to 62% of the totalfile size of a website.An Event Apart: Responsive and Responsible / by Luke Wroblewski.
    13. 13. Flexible media2Use video platforms that already successfullyhandle videos across devices.
    14. 14. Flexible media… and content2Ensure hierarchy and relationships staytruthful to messaging and strategy.Content should also be fluid
    15. 15. Flexible media… and content2Content Everywhere: Strategy and Structure for Future-Ready Content / by Sara Wachter-Boettcher.
    16. 16. Flexible media… and content2InterdigitationTrent WaltonContentchoreographyJordan Moore
    17. 17. Flexible media… and contentCreate once, publish everywhere2Nissan team @ Critical Mass.- From a single CMS.- Highly structured content.- Systematically defined in modules.
    18. 18. Media queries3Allow to readjust a layout when certainphysical conditions are present.
    19. 19. RWD 3 key componentsBeyond Squishy: The Principles of Adaptive Design / by Brad Frost.
    20. 20. - Device feature detection- User Agents- Server-side components (RESS)- Inter-device communication- API’s- Conditional or lazy loading- Platform optimisation- Performance- Etc……below the tip
    21. 21. Performance“If somebody cannot load yourwebsite, they will never evenknow how it is to use it.”Anna Debenham
    22. 22. Performance“When someone builds a 4MBresponsive site, blame theimplementation, not thetechnique.”Tim Kadlec
    23. 23. Performance“You want a huge headerimage at the top of the page?Sure, but that‟s a 100kB ofyour budget used up, so you‟llhave to loose a weight or twoof webfont to bring things backunder the limit.”Mark Perkins
    24. 24. 2 |Should everywebsite beresponsive?
    25. 25. Device diversityFuture proofTodays internet usageInput methods diversityConsistent brand messaging5 key reasons for RWD
    26. 26. Device diversityWe cannot think of the web in termsof devices.1
    27. 27. “People thinking RWD ismobile design, tabletdesign, game consoledesign, or even futuristic-screen-on-your-fridge designare mistaken.”Elliot Jay StocksDevice diversity1
    28. 28. Future proofThe web is not static.2
    29. 29. Todays internet usage3The Mobile Consumer: A Global Snapshot 2013 / by Nielsen.How many users perform web browsing ontheir mobiles?
    30. 30. Todays internet usage3The Mobile Consumer: A Global Snapshot 2013 / by Nielsen.How many users perform mobile shopping?
    31. 31. Todays internet usage3“By 2015, the ITU predictsmobile traffic will exceeddesktop traffic, and the „mobile-mostly‟ group already make upa staggering 20% of users inthe US and UK.”Stephanie Rieger
    32. 32. The other end of the spectrum:game consoles.- 51% of children aged 12-17 own aportable game console.- 80% of children aged 12-17 own a TVgame console.- 1 in 8 adults access internet on aconsole.Todays internet usage3Playing with Game Console Browsers / by Anna Debenham.
    33. 33. Input methodsUsers access websites using a variety ofinput modes.4
    34. 34. Consistent brand messageAcross multiple experiences and platforms, allfrom a single content management system.5
    35. 35. 3 |The ResponsiveDesign workflow.
    36. 36. RWD, a more expensive approach?More time + more effort & skills =higher cost for the client.
    37. 37. RWD, a more expensive approach?- There’s a cost too for ignoring the multitudeof devices currently accessing websites.- Creating an experience for each one, orsome, of those devices will also add extratime & money.- Multiple content strategies, deployments,and code bases to maintain, keep addingup to the cost…
    38. 38. RWD workflow, getting it rightOur current design workflowneeds to change.- Prototyping fluid layouts, instead ofwireframing multiple viewports.- Working closer with content strategy.- Exchanging / expanding skill sets.
    39. 39. RWD workflow, getting it rightProject planning needs to adaptas well.-Set an optimisation budget upfront.-Consider which elements require clientsign off.-Define relevant deliverables.
    40. 40. ConclusionRWD represents an exciting challenge, andthe opportunity to create not only userinterfaces, but full online experiences.
    41. 41. Thank youMichelle Constantehttp://michelleconstante.com@michellula

    ×