Responsive Web Design, UX Considerations @ Digital Shoreditch Festival
•Download as PPTX, PDF•
2 likes•1,123 views
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
Recommended
More Related Content
Similar to Responsive Web Design, UX Considerations @ Digital Shoreditch Festival
Similar to Responsive Web Design, UX Considerations @ Digital Shoreditch Festival (20)
Recently uploaded
Recently uploaded (20)
Responsive Web Design, UX Considerations @ Digital Shoreditch Festival
- 1. Responsive Web Design UX Considerations
- 2. Responsive Web Design (RWD) 1 | What exactly is responsive web design? 2 | Should every website be responsive? 3 | The responsive design workflow.
- 3. 1 | What exactly is responsive web design?
- 4. What is responsive web design? A design approach that aims to provide a consistent and easily accessible experience on all devices and screen sizes.
- 5. “We‟re faced with a greater number of devices, input modes, and browsers than ever before. Therefore, rather than tailoring disconnected designs, we should treat them as facets of the same experience.” What is responsive web design? Ethan Marcotte, 2010.
- 6. Fluid layout Flexible media Media queries RWD 3 key components
- 7. Fluid layout Non-fixed layout, with percentage-based fluid columns. 1 /* * Four-column grid active * ---------------------------------------- * Margin | # 1 2 3 4 | Margin * 5.5% | % 25 50 75 100 | 5.5% */
- 8. Fluid layout Column percentages based on the amount of EM's as opposed to pixels. 1 Pixels VS EM’s
- 9. Fluid layout Content defines the breaking points. 1
- 10. - Should also be fluid and scale with the browser’s dimensions. - Scale in measurements but also in file sizes. - Should render sharply on the smallest and biggest screens. Flexible media Icons, graphics, images & videos 2
- 11. Flexible media2 Icons and graphics as symbol fonts.
- 12. Flexible media2 The average size of an image on a web page is 788kB. All images add up to 62% of the total file size of a website. An Event Apart: Responsive and Responsible / by Luke Wroblewski.
- 13. Flexible media2 Use video platforms that already successfully handle videos across devices.
- 14. Flexible media… and content2 Ensure hierarchy and relationships stay truthful to messaging and strategy. Content should also be fluid
- 15. Flexible media… and content2 Content Everywhere: Strategy and Structure for Future- Ready Content / by Sara Wachter-Boettcher.
- 16. Flexible media… and content2 Interdigitation Trent Walton Content choreography Jordan Moore
- 17. Flexible media… and content Create once, publish everywhere 2 Nissan team @ Critical Mass. - From a single CMS. - Highly structured content. - Systematically defined in modules.
- 18. Media queries3 Allow to readjust a layout when certain physical conditions are present.
- 19. RWD 3 key components Beyond Squishy: The Principles of Adaptive Design / by Brad Frost.
- 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. Performance “If somebody cannot load your website, they will never even know how it is to use it.” Anna Debenham
- 22. Performance “When someone builds a 4MB responsive site, blame the implementation, not the technique.” Tim Kadlec
- 23. Performance “You want a huge header image at the top of the page? Sure, but that‟s a 100kB of your budget used up, so you‟ll have to loose a weight or two of webfont to bring things back under the limit.” Mark Perkins
- 24. 2 | Should every website be responsive?
- 25. Device diversity Future proof Today's internet usage Input methods diversity Consistent brand messaging 5 key reasons for RWD
- 26. Device diversity We cannot think of the web in terms of devices. 1
- 27. “People thinking RWD is mobile design, tablet design, game console design, or even futuristic- screen-on-your-fridge design are mistaken.” Elliot Jay Stocks Device diversity1
- 28. Future proof The web is not static. 2
- 29. Today's internet usage3 The Mobile Consumer: A Global Snapshot 2013 / by Nielsen. How many users perform web browsing on their mobiles?
- 30. Today's internet usage3 The Mobile Consumer: A Global Snapshot 2013 / by Nielsen. How many users perform mobile shopping?
- 31. Today's internet usage3 “By 2015, the ITU predicts mobile traffic will exceed desktop traffic, and the „mobile- mostly‟ group already make up a staggering 20% of users in the US and UK.” Stephanie Rieger
- 32. The other end of the spectrum: game consoles. - 51% of children aged 12-17 own a portable game console. - 80% of children aged 12-17 own a TV game console. - 1 in 8 adults access internet on a console. Today's internet usage3 Playing with Game Console Browsers / by Anna Debenham.
- 33. Input methods Users access websites using a variety of input modes. 4
- 34. Consistent brand message Across multiple experiences and platforms, all from a single content management system. 5
- 35. 3 | The Responsive Design workflow.
- 36. RWD, a more expensive approach? More time + more effort & skills = higher cost for the client.
- 37. RWD, a more expensive approach? - There’s a cost too for ignoring the multitude of devices currently accessing websites. - Creating an experience for each one, or some, of those devices will also add extra time & money. - Multiple content strategies, deployments, and code bases to maintain, keep adding up to the cost…
- 38. RWD workflow, getting it right Our current design workflow needs to change. - Prototyping fluid layouts, instead of wireframing multiple viewports. - Working closer with content strategy. - Exchanging / expanding skill sets.
- 39. RWD workflow, getting it right Project planning needs to adapt as well. -Set an optimisation budget upfront. -Consider which elements require client sign off. -Define relevant deliverables.
- 40. Conclusion RWD represents an exciting challenge, and the opportunity to create not only user interfaces, but full online experiences.
Editor's Notes
- 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.”