Beyond Responsive Design – UI for the Modern Web Application

@roysvork

roysvork.wordpress.comPete Smith

Agenda

● Introduction– 'Pages' in the modern web

● The problem with web apps● What is the solution?● Technologies

– CSS transforms

– HTML5 semantic elements

– Open source libraries

● Summary

A brief history

Simplify.

The problem with web apps...

There is no such thing as a 'Single Page Application'

The problem with web apps...

● Pinch-zoom and other oddities● No clear guiding design principals● Browser versions – IE 9 and below● Frameworks galore – phonegap, bootstrap, zurb...

What doesn't work so well

What doesn't work so well

● Misusing dialogs● Long streams of content where context is easily lost● Pop-out menus can be poor on smaller screens, consider

replacing with pop-up on mobile● Relying purely on browser for navigation● Supporting older browsers

Design from the ground up

● Select UI patterns that work well for both desktop and mobile● Use responsive design only for edge cases or for patterns that

are simply superior in one or the other● Do it yourself● And don't forget...

Simplify.

Demo & Code

What works

● Hamburger menus with auto-hide● 75% or 50% 'property sheets' for asides

What works

● Hamburger menus with auto-hide● 75% or 50% 'property sheets' for asides● Sliding panes instead of full page reloads

What works

● Hamburger menus with auto-hide● 75% or 50% 'property sheets' for asides● Sliding panes instead of full page reloads● Tabbed content/windows phone style horizontal scroll● Responsive images

Technology

● Absolute positioning is your friend● Use CSS transforms for hardware accelerated sugar● HTML5 semantic elements allow you to write more meaningful

markup● Make use of the history API and client-side routing● Abandon support for IE9 and below if you can

Tips and tricks

● Viewport meta tag● Icon link tags● Save to home screen modes● App manifest

Open source libraries

● iOS elastic scroll fix - http://stackoverflow.com/questions/16889447/prevent-full-page-scrolling-ios?answertab=active#22041340

● Fastclick - https://github.com/ftlabs/fastclick● Detect swipe - https://github.com/marcandre/detect_swipe● Ungrid - http://chrisnager.github.io/ungrid/

The future... Webcomponents

● A new specification, not a framework● Aid to encapsulation and re-usability● Supported in Chrome & Opera● Try it out today using Polymer JS

Open Web Apps Group (OWAG)

● Created to enable developers to easily build web apps that behave like native apps.

● Recipies, guidance and best practices● Common look and feel for modern web apps

● http://github.com/owag

Further reading

● http://tympanus.net/codrops/category/playground/● https://blog.andyet.com/2014/01/17/web-has-outgrown-the-

browser● http://weblog.west-wind.com/posts/2014/Aug/18/The-broken-

Promise-of-the-Mobile-Web ● http://brokenmobile.tumblr.com/ ● http://blog.futuremedium.com.au/2013/06/17/responsive-web-

apps-good-or-bad/

Simplify.

Image Credits

● Installing System 7https://flic.kr/p/9Bx4hc

● One massive load https://flic.kr/p/BWrLN

● Rage wallpaper https://flic.kr/p/6BfjCB

● Meditating Silverback Gorillahttps://flic.kr/p/7aKPF6

● Sleeping Hawaiian monk sealhttps://flic.kr/p/9Ak5ue

● The Calm Giant (re-edit)https://flic.kr/p/hSD27d

● Mobile computinghttps://flic.kr/p/8k2Byy

● A friday night inhttps://flic.kr/p/9UmsCJ

● Graphic arrayshttps://flic.kr/p/dXWrJ6

● Don't mess with emmyhttps://flic.kr/p/cVgX9b

Beyond Responsive Design – UI for the Modern Web Application

@roysvork

roysvork.wordpress.comPete Smith

https://github.com/roysvork/BeyondResponsiveDesign

Special thanks to Gareth Rampton(@GarethRampton) for providing base design\css for the sample app!

Design and images from the oredev sample app belong to their respective owners