1. Beyond Responsive Design – UI for the Modern
Web Application
@roysvork
Pete Smith roysvork.wordpress.com

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

3. Agenda
● Introduction
● A brief history
– The problem with web apps
– 'Pages' in the modern web
● App design case study
– What works well
– What doesn't work so much

4. Agenda
● The Homogenous Approach
● Technologies
– CSS transforms
– HTML5 semantic elements
– Open source libraries
● Summary

5. A brief history

17. Simplify.

18. The problem with web apps...

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

24. 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...

25. App design case study

26. Menus

35. Dialogs

40. Navigation

44. Content

52. 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

53. 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

54. 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...

55. Simplify.

56. Demo & Code

57. 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

58. Tips and tricks
● Viewport meta tag
● Icon link tags
● Save to home screen modes
● App manifest

59. 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/

60. 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

61. 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/

62. Simplify.

63. 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

64. Beyond Responsive Design – UI for the Modern
Web Application
https://github.com/roysvork/BeyondResponsiveDesign
@roysvork
Pete Smith roysvork.wordpress.com