Beyond responsive design - UI for the modern web application
•Download as ODP, PDF•
41 likes•7,136 views
Applications written for the modern web are being consumed not just on desktop browsers, but also on a myriad of other devices... even watches and glasses. If you design your application with a pc screen in mind, at worst you're either cutting your userbase in half or setting yourself up for an expensive redesign. In this talk I'll introduce you to some modern web design constructs, and the technologies that bring them to life. Learn how to create apps that work just as well on phone, mobile and desktop with no extra effort, and without restrictive layout frameworks. Who knows... you may even even see things that begin to rival native apps!
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Beyond responsive design - UI for the modern web application
Similar to Beyond responsive design - UI for the modern web application (20)
Recently uploaded
Recently uploaded (20)
Beyond responsive design - UI for the modern web application
- 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
- 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
Editor's Notes
- Where are all the mobile-friendly 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 sheets flow layouts creative 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
- 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 sheets flow layouts creative 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
- Mention media queries
- Meta tag Icon link tags mobile-web-app-capable App manifest