Date post: | 13-Jan-2015 |
Category: |
Technology |
Upload: | cyber-duck |
View: | 161 times |
Download: | 4 times |
Does size matter?An agency approach to adaptive web design
What we’ll be covering…
http://www.flickr.com/photos/national_library_of_australia_commons/6174070848
• Why adaptive?• Adaptive UX / Layouts• Sensors• Challenges
What is already out there?
http://www.flickr.com/photos/alui0000/4814280779
• Native apps
• Adaptive websites
• Web apps
• Non-scalable websites
http://www.flickr.com/photos/rubberdragon/6652378679
Speed, cost and scalability are the biggest factors for choosing adaptive websites or web apps rather than native apps
Considerations for adaptive web design
FeaturesWhich devices?
Sensors & limitations
Input method
Content Context of user
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
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
Planning an adaptive layout
We went for 3 key breakpoints:1024 – Desktop or tablet landscape
768 – Tablet portrait
320 - Mobile
Fluid columns or less columns?
Fluid percentage based grids
Fluid % based columns alone =Columns / gutters become too narrow
Fixed width grids
Reducing / stacking columns alone = Design only works on fixed widths
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/
http://www.flickr.com/photos/kristiand/3223920178/sizes/m/in/photostream/
Is using a responsive grid on its own enough?
http://www.flickr.com/photos/kose/4143558754
We need to consider input methods and context
Tailor UX for touch
SensorsThere are several options here:
•Media queries (CSS based on screen size/orientation)•JS screen size detection•JS feature detection•User agent detection (back-end)
Pros
•Easy
•Powerful on client-side
Cons
•Support
•Cannot handle server calls
Media Queries VS JS validation VS UA (back-end)
Pros
•Can differentiate more than just screen size
•Helps interactivity
Cons
•Relies on JS
•Accessibility?
•Not so easy to implement
Pros
•Only serves exactly what’s needed
Cons
•Not easy to implement and therefore more costly
•Browsers can fake it.
•Accessibility?
http://www.flickr.com/photos/epublicist/3546059144
Challenges
• Mobile first?• Images & video• Forms• Tables
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.
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.
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
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.
Example
Mobile
Desktop
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
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.
Thanks!Please show your appreciation by following us below
www.cyber-duck.co.uk
Twitter.com/Cyberduck_uk