Adaptive Web Design, does size really matter?
- 2. Does size matter? An agency approach to adaptive web design
- 3. What we’ll be covering… • Why adaptive? • Adaptive UX / Layouts • Sensors • Challenges http://www.flickr.com/photos/national_library_of_australia_commons/6174070848
- 4. What is already out there? http://www.flickr.com/photos/alui0000/4814280779
- 5. • Native apps • Adaptive websites • Web apps • Non-scalable websites
- 6. Speed, cost and scalability are the biggest factors for choosing adaptive websites or web apps rather than native apps http://www.flickr.com/photos/rubberdragon/6652378679
- 7. Considerations for adaptive web design Which devices? Input method Features Sensors & limitations Content Context of user
- 8. Designing for every device or breakpoint? Not only would this be impossible but it is a pointless and costly exercise. Instead focus on key break points that the design fluidly adapts to. http://www.flickr.com/photos/nnova/5022567963
- 9. What are my key breakpoints? Well, who is your audience? •Look at analytics Pick key breakpoints that will still enable a good user experience on in-between devices/widths
- 10. Planning an adaptive layout We went for 3 key breakpoints: 1024 – Desktop or tablet landscape 768 – Tablet portrait 320 - Mobile
- 11. Fluid columns or less columns?
- 12. Fluid percentage based grids Fluid % based columns alone = Columns / gutters become too narrow
- 13. Fixed width grids Reducing / stacking columns alone = Design only works on fixed widths
- 14. Better = Fluid grids with fixed breakpoints There are lightweight CSS grid frameworks which already support this. http://www.getskeleton.com http://csswizardry.com/inuitcss/ http://twitter.github.com/bootstrap/ http://foundation.zurb.com/ http://cssgrid.net/
- 15. Is using a responsive grid on its own enough? http://www.flickr.com/photos/kristiand/3223920178/sizes/m/in/photostre am/
- 16. We need to consider input methods and context http://www.flickr.com/photos/kose/4143558754
- 17. Tailor UX for touch
- 18. Sensors There are several options here: •Media queries (CSS based on screen size/orientation) •JS screen size detection •JS feature detection •User agent detection (back-end)
- 19. Media Queries VS JS validation VS UA (back-end) Pros Pros Pros •Easy •Can differentiate •Only serves exactly •Powerful on client- more than just what’s needed side screen size •Helps interactivity Cons Cons Cons •Not easy to •Support •Relies on JS implement and •Accessibility? therefore more •Cannot handle costly server calls •Not so easy to implement •Browsers can fake it. •Accessibility?
- 20. Challenges • Mobile first? • Images & video • Forms • Tables http://www.flickr.com/photos/epublicist/3546059144
- 21. Designing for mobile first? • Progressive enhancement is the ideal. • Sometimes impractical – based on traffic, type of site or even the client. • If the website still has a heavy IE userbase then the order of the CSS needs to be carefully considered.
- 22. Touch gestures • For a better user experience tailor the interfaces and inputs to the capabilities of the device. • Touch based gestures can improve usability on mobile websites – E.g. overscroll, swipe, dragging.
- 23. Adaptive images • display: none doesn’t stop content being downloaded • Low res images not a solution, as many devices have higher pixel density than desktop • Doesn’t apply to background images http://www.flickr.com/photos/ooh_food/3219732465
- 24. Scaling images using JS feature detection Scale from low res (or hidden) up to hi res images based on detecting the browser capabilities. However, if the user does not have javascript enabled, this will present a problem.
- 25. Example Desktop Mobile
- 26. Video Embedding via 3rd party players such as YouTube or Vimeo can be problematic – a more professional solution is needed in this instance. http://www.flickr.com/photos/colinwood0/5814240909
- 27. Forms & Tables • Long forms with unnecessary fields = bad UX regardless of mobile. • Auto-select the appropriate keyboard on mobile. • Establish the context your users will be using data tables on mobile before considering UX. All mobile UX decisions come down to context. Where / How / Why will people be using your website on mobile.
- 28. Thanks! Please show your appreciation by following us below www.cyber-duck.co.uk Twitter.com/Cyberduck_uk