Beyond Responsive Design UI for the Modern Web Application

@roysvorkroysvork.wordpress.com

Pete Smith

* 'Age of the web application' may not compare directly in stature to other ages. Consult internet for true stature.

Agenda

Introduction

A brief historyThe problem with web apps

'Pages' in the modern web

App design case studyWhat works well

What doesn't work so much

Agenda

The Homogenous Approach

TechnologiesCSS transforms

HTML5 semantic elements

Open source libraries

Summary

A brief history

Where are all the mobile-friendly web apps?

Simplify.

The problem with web apps...

Above 1080p, there is simply so much screenspace that most apps don't even attempt to design for it, they simply impose some form of fixed width.

Personally, I rarely have a browser window full screen on my home monitor.

Options include

50% property sheetsflow layoutscreative design inc proper floating

Mobile friendly often companies don't even bother at all and instead put up offensive notices!

Frameworks lead to frustrating half-assed attempts at mobile friendlyness that are difficult to maintain and control

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

The problem with web apps...

What to do with all this screen space?

No clear guiding design principals

Reliant on browser for navigation

Browser versions IE 9 and below

Frameworks galore phonegap, bootstrap, zurb...

Above 1080p, there is simply so much screenspace that most apps don't even attempt to design for it, they simply impose some form of fixed width.

Personally, I rarely have a browser window full screen on my home monitor.

Options include

50% property sheetsflow layoutscreative design inc proper floating

Mobile friendly often companies don't even bother at all and instead put up offensive notices!

Frameworks lead to frustrating half-assed attempts at mobile friendlyness that are difficult to maintain and control

App design case study

Menus

Dialogs

Navigation

Content

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

What doesn't work so well

Limit use of dialogs, favour roll-down notifications

Bottom-anchored elements on the desktop

Pop-out menus can be poor on smaller screens, consider replacing with pop-up on mobile

Relying purely on browser for navigation

Trying to support older browsers

The Homogeneous Approach

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

Make use of hardware acceleration & swipe gestures

Do it yourself

And don't forget...

Simplify.

Demo & Code

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

Mention media queries

Tips and tricks

Viewport meta tag

Icon link tags

Save to home screen modes

App manifest

Meta tag

Icon link tags

mobile-web-app-capable

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/

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 7
https://flic.kr/p/9Bx4hc

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

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

Meditating Silverback Gorilla
https://flic.kr/p/7aKPF6

Sleeping Hawaiian monk seal
https://flic.kr/p/9Ak5ue

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

Mobile computing
https://flic.kr/p/8k2Byy

A friday night in
https://flic.kr/p/9UmsCJ

Graphic arrays
https://flic.kr/p/dXWrJ6

Don't mess with emmy
https://flic.kr/p/cVgX9b

Beyond Responsive Design UI for the Modern Web Application

@roysvorkroysvork.wordpress.com

Pete Smith

https://github.com/roysvork/BeyondResponsiveDesign