NoVA UX Responsive Design
Upcoming SlideShare
Loading in...5
×
 

NoVA UX Responsive Design

on

  • 1,470 views

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!

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!

Statistics

Views

Total Views
1,470
Views on SlideShare
1,465
Embed Views
5

Actions

Likes
1
Downloads
28
Comments
1

2 Embeds 5

http://www.twylah.com 4
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

NoVA UX Responsive Design NoVA UX Responsive Design Presentation Transcript

  • Responsive Design TechniquesOctober 24th, 2012Matt FiorePrincipal DesignerSiteworx
  • Responsive sites aredevice agnostic,responding to the devicethey are viewed inDelivering the richest userexperience to that device http://bostonglobe.com
  • 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
  • The web is viewed onhundreds, if not thousands,of distinct devicesEach has its own screen size,resolution and interaction model(click, swipe, drag, etc.)
  • 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.
  • Device specific sites? No. Less engaging user experience across devices? Nohttp://www.mobilusdesign.com/responsive-web-designed-websites-for-wordpress/
  • 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
  • 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 repository to manage •  No redirects can increase speed •  Reach more channels in traditional timeframe
  • 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 out (phone through desktop)Control all layouts via CSS (Tablet, Mobile, Desktop)Offer graceful degradation
  • Responsive Alignment  
  • Responsive  Component  Order  
  • “Mobile First”helps focus on onlythe most importantdata and actions inan applicationMobile internetadoption hasoutpaced desktopinternet adoption byas much as eighttimes
  • 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 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
  • Staged  Approaches   Mobile First Desktop and Down Tablet and Out
  • 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
  • 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
  • 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 you part of the way
  • DeWalt  Demo Video  
  • 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/
  • Visit us at Siteworx.comMatthew FiorePrincipal Designermfiore@siteworx.comwww.linkedin.com/in/matthewfiore