Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Best Prac*ces in Responsive Website Design
Agenda
• Who is Stew? • What is responsive? • Why responsive? • What should a designer remember? • When do things go wrong? • Where can I learn more?
Who is Stew? • Ski Bum / Sailor • Dad • First web project 1994 • Ad / Interac*ve side for 20 Years • NOT A PROGRAMMER • Past Clients: MarrioS, Best SoUware, BlueCross BlueShield, Fletcher Allen Hospital, SAM Magazine, Ea*ngWell Magazine, Burton, Arrow Fasteners, Orvis, Revision Eyewear, Synergy SoUware, Vermont Public Radio, Line Skis, Solidworks, Redington Fly Rods, Crystal Springs Resort, Vermont Chamber of Commerce, Dale of Norway, Special Olympics Vermont, Killington VT, Mount Snow VT, Hunter Mountain NY, Schweitzer ID, Valdez Heli-‐camps AK, Stowe VT, Whiteface NY, Bolton Valley VT, Waterville Valley NH, Sunday River ME, Bromley VT, Gunstock NH, Peak'n Peak NY, Mountain Creek NJ, Shawnee Peak ME, Ski Vermont VT, Haystack Club VT, Windham NY, Burke VT, and Trapp Family Lodge VT.
VP / Partner nxtConcpets, Ltd
Example
What is responsive? • Built on a flexible, fluid grid that adapts to the orienta*on,
browser, and/or device that is rendering the website. • Op*mized content, naviga*on, and features that are best
suited to the par6cular user’s needs based on device, connec*on speed, and even loca*on.
Why responsive?
Users are there and spending money: • More than 60% of all internet traffic is already from “mobile”
devices. (InMobi)
• Users expect easy-‐to-‐use interfaces and site sta*s*cs confirm approval. “40% of people using mobile devices will choose another search result if it is not mobile friendly.” (iacquire)
• 62% of companies that designed a website specifically for mobile had increased sales. (Econsultancy)
• Mobile Phone and Tablet E-‐Commerce to More Than Double by 2018 (Forrester)
Why responsive? Results! Time Inc. Responsive Redesign • Pages per visit, across mobile, tablet and desktop are up
considerably. • Mobile is up 23% compared to what it had been. • Homepage uniques are up 15%, and *me spent is up
7.5%. • The mobile bounce rate decreased by 26%. • Source The Associa*on of Magazine Media
O’Neill Clothing Responsive Redesign • 65.7% conversion rate increase on iPhone/iPod • 101.2% revenue growth on iPhone/iPod • 407.3% conversion rate increase on Android devices • 591.4% revenue growth on Android devices • 20.3% conversion rate increase on non-‐mobile devices • 41.1% revenue growth on non-‐mobile devices • Source hSp://electricpulp.com
Why responsive? Results! Fathead Responsive Redesign • 90% improvement in mobile conversions YOY. • Revenue per visitor increased more than 70%, and
mobile revenue increased more than 538% YOY. • The responsive site is credited with a 275% increase in
mobile traffic YOY. • On the non-‐phone side, conversion rates increased
17% and revenue increased 25%. • Source mobilecommercedaily.com
Regent College Responsive Redesign • 99% increase in unique visitors • 77% increase pageviews • 63% increase in online applica*ons • Source Domain7
Why responsive? It saves you 6me and money: • One CMS, one set of content. Reduce duplicate effort and
training / solu*on overhead. • Ini*al development and design *me is more than a
comparable sta*c site, but less than building separate mobile templates or apps for mul*ple OS.
• SEO is only done once and is preferred by Google.
What should a designer remember?
Strategy & Content: • Look at mobile user behavior on your analy*cs. • Mobile first design approach. • Create a new mobile naviga*on that emphasizes the most
accessed informa*on. • Cut content and make the mobile experience even more
streamlined. • Review features and remove those that are cumbersome or
won’t work on the mobile plaqorm. • Consider a geoloca*on approach. Different offers to different
users depending on loca*on.
What should a designer remember? Design 6ps: • There is no fold. However, when stacking content, keep your
desired primary users goals and ac*ons high in the column. • Use obvious menu icons or buSons. “Hamburger” alone is just
catching on. • Mobile and tablet users would rather swipe than click. Long
content pages are OK. • Put your phone number in the header. Most phones allow
you to “click to call”. • Avoid visual complexity. Drop shadows, photo treatments,
design flourishes or embellishments.
What should a designer remember?
Design 6ps: • Paralax and responsive. Too many moving parts. • Avoid Google fonts. • Photo op*miza*on – use Adap*ve Images or other
techniques. • “Flat” design. A trend with a reason. • Use whitespace – give designs space to breath. • BulliS points make things easy to digest. • Make buSons large and avoid text links. • Make sure the developer knows all the performance saving
tricks available.
When do things go wrong? Issues: • Responsive ad units. • Ecommerce carts that are not responsive. • Flash. • Load *me / server calls. • Pictures that are not op*mized. • Mega naviga*on, dropdowns, and hover. • Wide data tables. • Re*na high resolu*on screens.
Where can I learn more? Download Presenta6on: hSp://www.nxtconcepts.com/ideas/seminars Resources: • Google -‐ hSps://developers.google.com/web/fundamentals/
layouts/rwd-‐fundamentals/ • W3C -‐ hSp://www.w3.org/standards/webdesign/mobilweb • Mashable -‐ hSp://mashable.com/category/responsive-‐web-‐design • Responsive Design -‐ hSp://responsivedesign.is/resources • Brad Frost List -‐ hSp://bradfrost.github.io/this-‐is-‐responsive/
resources.html
Ques6ons & (perhaps) Answers
Thank You!