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