Responsive Design TechniquesOctober 24th, 2012Matt FiorePrincipal DesignerSiteworx
Responsive sites aredevice agnostic,responding to the devicethey are viewed inDelivering the richest userexperience to tha...
OverviewAward-winning interactive agency7 offices, 200+ strong50% annual company growthStrong qualifying track record in t...
The web is viewed onhundreds, if not thousands,of distinct devicesEach has its own screen size,resolution and interaction ...
Responsive Design.The practice of creating digital experiences thatadapt to seamlessly deliver content suited to thedevice...
Device specific sites? No. Less engaging user experience across       devices? Nohttp://www.mobilusdesign.com/responsive-w...
Device	  Agnos,c	  Approach	  	  Defining breakpoints where the designbreaks, not using device sizes•  Too many new device...
One Codebase.One CodebaseOne Content Platform  One Content Platform.One URL  One URL.  One site to rule them all.
Content Design rather than web design
Other	  Posi,ves	  to	  Responsive	   •  Increases SEO •  Simplifies Analytics •  One codebase to maintain •  One content ...
Responsive design combines flexible grids, flexibleimages/media, and CSS media queries
RESPONSIVE	  DESIGN	  Consider content priority and implications on experience and brand across all devicesDesign inside o...
Responsive Alignment	  
Responsive	  Component	  Order	  
“Mobile First”helps focus on onlythe most importantdata and actions inan applicationMobile internetadoption hasoutpaced de...
Answer this question:          If it’s not needed on mobile,         is it needed in the first place?
The	  Reality	  •    Most companies already have a web presence•    Some have gone through recent costly redesigns of one ...
Staged	  Approaches	                              Mobile First                           Desktop and Down                 ...
Responsive	  Solu,ons	     •    Show desktop and mobile together, make those        decisions really demonstrate the issue...
Responsive	  Tips	  •    Don’t make radical changes in layout or style•    Be cognizant of page load, hidden structure and...
Responsive	  Naviga,on	  Menus	  Convert a Menu to a Dropdown for Small Screens
Responsive	  Data	  Tables	  Swap out tables for graphs
Images	  &	  Video	  Resize and swap
Hiding	  Components	  •  Can hack to point   to dummy content•  Markup still exists
Test	  on	  Devices!!	  •  Even when   prototyping in Axure•  Use designs in their   environment•  Emulators only get   yo...
DeWalt	  Demo Video	  
Responsive	  Layout	  PaIerns	   http://www.zurb.com/playground/off-canvas-layouts http://bradfrost.github.com/this-is-res...
Visit us at Siteworx.comMatthew FiorePrincipal Designermfiore@siteworx.comwww.linkedin.com/in/matthewfiore
NoVA UX Responsive Design
NoVA UX Responsive Design
NoVA UX Responsive Design
NoVA UX Responsive Design
NoVA UX Responsive Design
NoVA UX Responsive Design
NoVA UX Responsive Design
NoVA UX Responsive Design
Upcoming SlideShare
Loading in...5
×

NoVA UX Responsive Design

1,086

Published on

Presentation for NoVA UX Meetup Group on October 24th, 2012. Thanks to everyone for coming out! Looking forward to seeing you at the next event!

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
1,086
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

NoVA UX Responsive Design

  1. 1. Responsive Design TechniquesOctober 24th, 2012Matt FiorePrincipal DesignerSiteworx
  2. 2. Responsive sites aredevice agnostic,responding to the devicethey are viewed inDelivering the richest userexperience to that device http://bostonglobe.com
  3. 3. OverviewAward-winning interactive agency7 offices, 200+ strong50% annual company growthStrong qualifying track record in the Global 500Expertise in mobile, web content management,eCommerce and analyticsClientsAwards
  4. 4. The web is viewed onhundreds, if not thousands,of distinct devicesEach has its own screen size,resolution and interaction model(click, swipe, drag, etc.)
  5. 5. Responsive Design.The practice of creating digital experiences thatadapt to seamlessly deliver content suited to thedevice context of the user’s operating system,screen size, or orientation.
  6. 6. Device specific sites? No. Less engaging user experience across devices? Nohttp://www.mobilusdesign.com/responsive-web-designed-websites-for-wordpress/
  7. 7. Device  Agnos,c  Approach    Defining breakpoints where the designbreaks, not using device sizes•  Too many new devices•  Sizes change all the time•  What’s next is too hard to predict
  8. 8. One Codebase.One CodebaseOne Content Platform One Content Platform.One URL One URL. One site to rule them all.
  9. 9. Content Design rather than web design
  10. 10. Other  Posi,ves  to  Responsive   •  Increases SEO •  Simplifies Analytics •  One codebase to maintain •  One content repository to manage •  No redirects can increase speed •  Reach more channels in traditional timeframe
  11. 11. Responsive design combines flexible grids, flexibleimages/media, and CSS media queries
  12. 12. RESPONSIVE  DESIGN  Consider content priority and implications on experience and brand across all devicesDesign inside out (phone through desktop)Control all layouts via CSS (Tablet, Mobile, Desktop)Offer graceful degradation
  13. 13. Responsive Alignment  
  14. 14. Responsive  Component  Order  
  15. 15. “Mobile First”helps focus on onlythe most importantdata and actions inan applicationMobile internetadoption hasoutpaced desktopinternet adoption byas much as eighttimes
  16. 16. Answer this question: If it’s not needed on mobile, is it needed in the first place?
  17. 17. The  Reality  •  Most companies already have a web presence•  Some have gone through recent costly redesigns of one of their platforms•  Mobile First is sometimes unrealistic and difficult for stakeholders to process•  Desktop first, is usually the most common and sometimes easy upfront•  Educating clients and stakeholders about what responsive really means is crucial
  18. 18. Staged  Approaches   Mobile First Desktop and Down Tablet and Out
  19. 19. Responsive  Solu,ons   •  Show desktop and mobile together, make those decisions really demonstrate the issues clearly •  Prototyping in Axure, before HTML •  Mobile research for user types is really helpful •  Designing in a static format doesn’t really work anymore •  Design needs to understand development and how it will actually work •  Design and Development communication is crucial
  20. 20. Responsive  Tips  •  Don’t make radical changes in layout or style•  Be cognizant of page load, hidden structure and markup•  Timing of loading content, subnav, hidden components•  Interactions are limited more so in responsive•  Impact from a budget, mindset, decision making standpoint•  Content prioritization is crucial
  21. 21. Responsive  Naviga,on  Menus  Convert a Menu to a Dropdown for Small Screens
  22. 22. Responsive  Data  Tables  Swap out tables for graphs
  23. 23. Images  &  Video  Resize and swap
  24. 24. Hiding  Components  •  Can hack to point to dummy content•  Markup still exists
  25. 25. Test  on  Devices!!  •  Even when prototyping in Axure•  Use designs in their environment•  Emulators only get you part of the way
  26. 26. DeWalt  Demo Video  
  27. 27. Responsive  Layout  PaIerns   http://www.zurb.com/playground/off-canvas-layouts http://bradfrost.github.com/this-is-responsive/ patterns.html http://bradfrostweb.com/blog/web/complex-navigation- patterns-for-responsive-design/ http://www.thismanslife.co.uk/projects/lab/ responsivewireframes/
  28. 28. Visit us at Siteworx.comMatthew FiorePrincipal Designermfiore@siteworx.comwww.linkedin.com/in/matthewfiore
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×