Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beyond responsive design - UI for the modern web application

6,353 views

Published on

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!

Published in: Design, Software
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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
  5. A brief history
  6. Simplify.
  7. The problem with web apps...
  8. There is no such thing as a 'Single Page Application'
  9. 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...
  10. App design case study
  11. Menus
  12. Dialogs
  13. Navigation
  14. Content
  15. 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
  16. 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
  17. 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...
  18. Simplify.
  19. Demo & Code
  20. 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
  21. Tips and tricks ● Viewport meta tag ● Icon link tags ● Save to home screen modes ● App manifest
  22. 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/
  23. 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
  24. 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/
  25. Simplify.
  26. 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
  27. Beyond Responsive Design – UI for the Modern Web Application https://github.com/roysvork/BeyondResponsiveDesign @roysvork Pete Smith roysvork.wordpress.com

×