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