Transcription
WHYRESPONSIVEWEB DESIGN?LEAN LABS 05
WHY RESPONSIVE WEB DESIGN?During Cyber Monday in 2013, IBM reported that mobile traffic grew to 31.7 percentof all online traffic. This is an increase by 45 percent compared to the statisticsproduced by IBM in 2012. The internet is moving into a new era. Never before has theinternet ever experienced a time thus far where it’s users are accessing it on a trulyglobal scale. Until the invention and introduction of the smartphone, the internet wasmainly accessed by computers acting as a lone terminal chained to a desk and usuallyhard wired straight to a router. The smartphone has become the fastest growingmeans of accessing the internet and has revolutionized the way we connect, accessand browse the internet. In order to keep up with the development of these devicesand their screens, we need to change the way we build, run and strategies websites.Responsive Web Design is that solution.LEAN LABS11184 Antioch Rd Ste 524, Overland Park, KS 66210T 913.871.6500 hello@lean-labs.com http://www.lean-labs.com/
TABLE OFCONTENTSIntroduction to Responsive Web DesignWhy you should implement Responsive Web DesignAlternatives to Responsive Web DesignStrategizing Responsive Web DesignRemember: Responsive Web Design is not a Tool; It’s a PhilosophyHow to get started:Why Responsive Web Design?28131928301
INTRODUCTIONTO RESPONSIVEWEB DESIGNWHAT ISRESPONSIVEWEB DESIGN?Responsive web design is the philosophy of applyingweb development techniques to allow a website todynamically and automatically change elements on thescreen, in real time, to optimize viewing of said websiteacross multiple devices. Responsive websiteprogramming instructs browsers on where to placeelements of a website on various screen sizes anddevice types.Why Responsive Web Design?2
Ultimately, responsive web design is the application ofthe philosophy that web design and web developmentshould respond to the user’s environment as they areviewing the website. This a huge improvementcompared to the previous methods of making “mobilefriendly” websites where a developer would write codeto check for every mobile device for it’s manufacturerand model. From there, the website would redirect auser, using a device on this “list”, to a mobile specificwebsite, resulting in the entire process being verycomplex and very expensive in both site creation andmaintenance.HISTORY OFRESPONSIVE WEB DESIGNThe phrase Responsive Web Design was coined andexpanded upon by Ethan Marcotte in May 2010 whenwe wrote the industry changing article “ResponsiveWeb Design” for A List Apart. In the article, Marcottespeaks about how the web is always changing, adaptingWhy Responsive Web Design?3
and re-inventing itself andhighlights that webdevelopers and designers arefaced with the task of buildingwebsites for widest range ofdevices that the web industryhas ever had to considerbefore.Marcotte continues on in thearticle to discuss, which wasat the time, a recent change inthe attitude of architecture inwhich spaces can respond tothe interactivity and usage we as humans have withthem. This movement was titled ResponsiveArchitecture. From here, Marcotte presented the ideaof not only designing and building for the optimizedview but to also include methods in which a websitewould respond to the users device via it’s screen size.He was able to present a working example and the timeWhy Responsive Web Design?4
thanks to a Cascading Stylesheet (CSS) functionalitycalled Media Queries and the use of the layout gridbased technique known as Fluid Grids. The mediaquery functionality had been submitted as a proposalto be included in CSS back in 2001 and in yearsfollowing had been picking up attention for thefunctionality it offered.It wasn’t until two years a"ter Marcotte’s groundbreaking article that media queries were considered asstandard functionality into CSS, enforcing all currentand future browsers to support the functionality whenrendering websites.RESPONSIVE WEB DESIGN INTHE BOARDROOMFast forward to today, Responsive Web Design is nowone of the many buzzwords that can be heard comingout of marketing offices, web development & designoffices and every single client meeting where websiteWhy Responsive Web Design?5
development and design is a topic of discussion. Thesame question can be heard every time a client isshown their companies new website; “Can I view thison my mobile and/or my tablet?”.Mobile and tablet traffic is set to takethe crown as the most popular deviceused for accessing the internet in 2014Responsive web design is seen in the eyes of manydesigners, developers and agencies as the greatestsolution to this question and to future proofing anywebsite in terms of optimization for viewing onmultiple devices ranging in screen sizes.The rise in popularity and implementation ofresponsive web design philosophies online has helpedto make mobile traffic rival traditional desktop trafficon a global scale online and with more businessimplementing responsive web design to their companyWhy Responsive Web Design?6
website, mobile and tablet traffic is set to take thecrown as the most popular device used for accessingthe internet in 2014. During a ComScore State of theInternet Webinar in June 2012, Comscore, usingresearch data collected by Morgan Stanley, indicatedthat Mobile devices numbers will exceed those ofdesktop and laptop computers worldwide in 2014,which aligns with Morgan Stanley’s own predictions in2010 that Mobile devices will surpass Desktop andLaptop computers within five years.Responsive web design isn’t just the method ofpreparing your business’ website for mobile and tabletusers. Responsive web design is actually a set ofphilosophies and principles which in turn allows youto prepare you website for any device, any screen sizeand for a multitude of customer types. The techniquesused to achieve this, range from web based coding, allthe way through to content strategy and assessingwhat your customers are looking for when they visityour website from different types of devices.Why Responsive Web Design?7
Responsive web design truly allows you to createwebsites which adapt and respond to your customersonline accessibility with your business, for the firsttime in the history of the internet.WHY YOU SHOULDIMPLEMENTRESPONSIVE WEBDESIGNResponsive Web Design isn’t just a tool, a newtechnical coding practice, nor is it simply somethingyour company needs to say they have implemented inorder to join the cool kids table. It’s a philosophy thatchanges your business’ attitude to online business andthe expanding online device market. In a nutshell, byimplementing responsive web design principles, youare also telling your customers that your companyWhy Responsive Web Design?8
values their business regardless of how they approachyou. This may seem like a bit of an over statement, buttoday’s users are on the go constantly. Think aboutyour typical day and how many times you use yourphone to connect to the internet: In the morning queuing for your !irst cup co!fee. Sitting in your when car stuck in tra!!ic or whilst onpublic transport if you don’t drive. Walking to your desk checking those emails as youarrive at your o!!ice.In addition, think about your usage during work hours: During your lunch break when you quickly grab asandwich from a local vendor, shop or cafe. The walk between di!ferent meeting throughout the dayin meeting rooms spread throughout your o!!icebuilding. Just before (and a!ter) a meeting.Why Responsive Web Design?9
Now thinking about how o"ten you check in with yoursmartphone on evenings and weekends: Waiting in the car when picking your kids up fromschool or an a!ter school activity. Checking emails or news whilst chatting to family justa!ter you arrive home. Lying in bed reading and catching up with news articleor interesting blog posts you missed throughout the day.The list goes on and on but each scenario has the sameattributing factors which need to be taken intoconsideration. The first thing to note is that users onthe go will spend very little time thinking about whatthey are searching for on the internet. Their time isspent interacting on a much smaller screen andwanting answers or solutions instantly. If userslanding on your website are met with a huge amount ofpinching and scrolling through paragraphs of text,they’ll simply leave your site and move on all becausethey don’t have the same time or the patience askWhy Responsive Web Design?10
desktop users. If your bounce rates are higher andpageviews are lower for mobile or tablet users, it'slikely because your site is not delivering your site is notdelivering the same quality experience as it is fordesktop users.Responsiveness does not make your website 100%future proof. It will however, allow you to set in placethe foundation to embrace the future of the web andallow your company to start the process of runningwith the online trends and technology, rather thanbeing le"t behind. Your customers will appreciate howyour website meets their needs even when on the go.This will elevate your brand’s image, making yourcustomers feel like your company is there when theyneed you, and will enhance the perception that yourcompany is accessible, helpful and keeping up with thelatest trends.The most important part of implementing aResponsive Web Design solution is planning forimplementation to suit not only your company butWhy Responsive Web Design?11
your customers too. Online customers are some of themost intellectual shoppers commerce has ever faced.They are prepared to shop around online to find thebest deal or best quality and are less likely to be backedinto a corner when making a purchase online.Customers no longer tie themselves down to one shopor one brand anymore so it’s now more important thanever to ensure you keep the masses happy. Delayingthe implementation of Responsiveness keeps the doorclosed to potential customers and can give yourcompetitors an edge against you. In addition, delayingthe implementation may cause extra headaches if inthe meantime you’re producing content that is notcompatible with a responsive website.Why Responsive Web Design?12
Furthermore, if you are in the camp that thinks “Ourcustomers don’t care about this” then you may have thewrong way of thinking. If your current customer baseis not visiting your site using mobile devices, it may bebecause your site is not usable via mobile. Also, areyou considering how a Responsive Web Design mayhelp you open up a new market to customers who wereput off from using your website because of it’s lack ofoptimization for mobile?ALTERNATIVES TORESPONSIVE WEBDESIGNThere some alternatives to Responsive Web Designwhich your business or company should be aware ofand consider as an option. Each choice has pros andcons, and it’s only wise to collect all the informationbefore choosing the best solution.Why Responsive Web Design?13
MOBILE SPECIFIC(MDOT) WEBSITESResponsive web design is not simply a solution formobile and tablets. It is preparing your website for it tobe accessed from a wide range of devices. However,with mobile devices having a larger amount ofrestrictions due to their screen size, but being such ahighly used device, there is the option of create anaddition part of your website which is specificallymobile optimized. These mobile specific websitesnormally show less content than the full view websitesdo and are generally introduced when the full websiteis attempting to do special animation or interactionwhich cannot be emulated on a mobile device.Mobile specific websites tend to be geared towardslower page data sizes and are optimized for mobileinternet connections. This may seem like an everybodywins solution, but what you need to remember is withWhy Responsive Web Design?14
this solution is that you have effectively built yourselftwo different websites.This brings up a second layer of overhead in siteevolution and maintenance. Every new page, graphic,offer, or feature will need a mobile specific version.Plus, it’s very hard to address both tablets and smartphones of various screen sizes with just one mdot site.It has SEO implications that go beyond the scope of thisarticle, but to summarize you may be producingcontent twice and you may be saving multiple versionsof images in order to support your mobile site. Aresponsive web design solution does not face thesechallenges, hence its popularity for companies aroundthe globe.MOBILE APPSMobile apps have become an incredibly trendysolution to enhance and improving a business’ onlinepresence. For e-commerce sites, a mobile app isWhy Responsive Web Design?15
becoming almost essential for mobile device basedcustomers as an online shopping experience can betricky at the best of times on laptop or dekstopcomputer, let alone on the small screens. Mobile appsallow business to streamline their customers shoppingexperience and allow their customers to be directly fedcontent, offers and quick access to specific itemscustomers are looking for or interested in, thusimproving their overall experience. In an example ofthis success, the ebay mobile app for android has beendownloaded by almost 43% of android smartphoneowners, a real indication that e-commerce mobile appsare an extremely popular option for customers whowant to shop on a particular website or with aparticular brand online.Why Responsive Web Design?16
Mobile apps, however, are only successful if theoptions they provide align with the services yourbusiness is offering. Even then, the success of yourmobile app will only impact on those who have aspecific type of mobile device and within that category,it will only affect those that have a mobile device inwhich the mobile app has been written for.The problems we discussed with a mobile (mdot)website are exponentially greater with mobile apps!You’ll need to maintain a version of content for everyversion of your mobile app. If you support ipad andiphone separately, that’s two versions just for iOS. Ifyou support Android and Blackberry, that’s two more.Plus you have the new job of marketing these apps inaddition to your website, as they won’t downloadthemselves. You still won’t able to assist users ondevices like Xbox and mobile devices with otheroperating systems or older versions you don’t support.Every time a new operating system update comes out,you’ll need to make sure your apps are compatible. AllWhy Responsive Web Design?17
of this tends to be a great distraction from marketingyour main website, causing stagnation with yourprimary marketing plan. This of course assumes youpass the strict rules that allow your app to be submittedto certain app stores in the first place. Furthermore, thecherry on top comes with the price your businesswould have to pay to bring in an app developer andeven then some developers only specialise in particularcoding languages, so you may need to bring multipleapp developers to create a range of apps for all themobile devices out there.In contrast, all mobile devices’ browser render HTML,CSS and JS efficiently and so a responsive web designsolution is only needs to be coded up once for it to beavailable for access across all mobile devices’ browsers.A significant reduction of production and maintenancecosts get you back into marketing and growing yourbusiness.Why Responsive Web Design?18
STRATEGIZINGRESPONSIVE WEBDESIGNWhen it comes to plan how a Responsive Web Designsolution can be implemented, there are some factorsyou need to consider which will ultimately shape thewhole solution. You need to consider: How will your current content !it in a responsive webdesign? How will you approach the process of your websiteresponding and adapting to devices? How much of the website’s visual aspects are to bein!luenced by responsive web design?These are the same factors that were considered whenGiles Talbot was tasked with creating the Lean Labsresponsive website. Talbot was able to create a website,Why Responsive Web Design?19
from the ground up, for Lean Labs that not only wasaccessible from all devices but also used ResponsiveWeb Design techniques to enhance a users experienceon any device:“(In the past) When we built websites, we were building mobilewebsites separate from desktop sites. Something had to changewith web design and the way we built websites. Now withResponsive Web Design, we are dealing with one website andone set of content across multiple devices. Therefore it’s onlylogical that we start with the website’s content. Our process ofstarting the project with a content strategy helps us really moveforward productively and with limited revision.” - GilesTalbotCONTENT STRATEGYA content strategy is the planning, development andmanagement of content. Another way to look atcontent strategy is to summarize it like RachelLovinger did for her 2007 Boxes and Arrows article“Content Strategy: The Philosophy of Data”:Why Responsive Web Design?20
“The main goal of content strategy is to use words and data tocreate unambiguous content that supports meaningful,interactive experiences.”Lovinger shares some insightful thoughts on contentstrategy and highlights an important point which isnow becoming more incredibly vital when planningcontent for responsive websites:“As website functionality has increased and web users havebecome savvier, sites have had to meet the demand forsophisticated interaction and more content to support it. Butsimply more content won’t do; it has to be accurate andrelevant. It has to be meaningful.”It’s important to remember that your responsivewebsite is going to be showcasing the same contentacross multiple devices and that content will need tospeak as effectively to the person sitting at their deskon a laptop or desktop computer as to the person ontheir tablet or mobile device whilst they are on themove. The old strategy of re-using content written for aWhy Responsive Web Design?21
company’s websites back in the 90s is no longer anoption. Companies who are smart will realise that theywill never have a better time to fix their content thanwhen they are implementing a responsive web designsolution.Karen McGrane from Bond Art Science wrote anarticle for A List Apart entitled “Responsive DesignWon’t Fix Your Content Problem”. The title tells thetruth that a website’s content problem will not be fixedinstantly by applying responsive web design solutionwithout a content strategy. Your content is the mostimportant thing on your website, it’s why your usersare on your website. McGrane talks about herexperience while speaking to a large corporation’sdigital team about challenges the team will face whencreating content for responsive websites. McGranebrings up two points in which any company mustchallenge and find a solution to during their contentstrategy phase:Why Responsive Web Design?22
Evaluating whether content is useful, valuable, actuallyworthy of being on mobile (or the desktop, for thatmatter). Assessing the amount of content that can appear on a“page” on di!ferent devices, and striking a balance fordi!ferent form factors.It’s vital to remember these challenges when creatingand analysing your content. The content on yourwebsite is the focal point and the backbone of yourwebsite and you must ensure your content is one of thestrongest parts of your website. When speaking toGiles Talbot about content strategy and the contentfirst approach to responsive web design, he said:“We need to stop shoehorning content into web pages and startbuilding !lexible systems that scale. This is even more apparentnow that screen size is an assumption.”When you build your content strategy, you have to askyour self a few questions about your company: What are the key elements to you company or business?Why Responsive Web Design?23
What is the purpose of the content? Why does it need to be read? What e!fect will this content have on the website’s SEO? Is this content useable? Will users want to share it?"Content is the what drives engagement and conversions, andshould be the primary focus of your Internet marketing." Kevin BarberFor more information on Content Strategy, we highlyrecommend reading through Kristina Halvorson’s AList Apart article “The Discipline of Content Strategy”.BEYOND MOBILE & TABLETResponsive Web Design has a myth attached to it’sname. The myth is that Responsive Web Designsolutions are basically a solution to ensure your site ismobile and tablet friendly. This is not the whole truth.Like most myths, it does contain some truth. However,Why Responsive Web Design?24
the real truth is that Responsive Web Design ensuresthat your website enhances the experience of userswho use any device, no matter of it’s screen size, toaccess your companies websites.Large screen devices should be considered just asimportant as small screen devices. TV screens and largemonitors can reach resolution sizes of 2560x2048,which is twice the size of a 1080i TV screen and over50% bigger than a 13 inch Macbook Pro & Air’s screenresolution (1440x900). Loading a website which has noResponsive Web Design solution implemented on tothese size screens will result in a user having toconstantly zoom in the read text, having trouble withlinks and buttons which are hard to find and interactwith and overall will result is the user leaving thewebsite dissatisfied. Therefore, it’s important to thinkabout what could be done and what needs to be donespace and fine pixel detail on large screens, in additionto the lack of space on the smaller screens.Why Responsive Web Design?25
“The bigger the screen the more real estate. Add decoration andvisual design elements that support the content. Big screensindicate faster connections, no mobile data restrictions. Desktopusers are more capable of downloading high resolution images.They have larger bandwidth and patience to enjoy a richer,fuller experience - so give it to them.” - Giles TalbotADAPTIVE VS RESPONSIVEWhen planning to implementing an online solution formultiple device access to your company or business’website, you are faced with two options: Adaptive orResponsive. An adaptive solution will onlyaccommodate to predefined screen sizes, defined in thecoding of the solution. These are most commonly thesizes of the most popular brands of Mobile and Tabletdevices and will have limits when applying layoutchanges to a website at screen resolutions sizes such as1200 pixels wide. The changes in the website’sstructure is defined within the predefined screen sizesencoded into the solution and will adjust to theseWhy Responsive Web Design?26
dimensions only. Adaptivesolutions can be slightlycheaper and slightly quicker toproduce. However, one thingcan be agreed upon when itcomes to adaptive solutions;You will find yourself comingback around in the future tochange the solution in order tokeep up with the ongoingchanges in device screen sizes.You’ll need to test your siteagainst every iPad Mini andNexus whatever that comesout - great fun for your kids but not efficient for thecompany. A Responsive solution ensures that allscreen sizes are planned for and there is no hard codingof pre-defined device screen sizes. ResponsiveSolutions will use specific screen sizes to changespecific elements within the layout but the website’soverall layout will be defined by the users device andWhy Responsive Web Design?27
not by code written into the solution itself. Thisensures that all screen sizes now and in the future willwork with a Responsive Solution.REMEMBER:RESPONSIVE WEBDESIGN IS NOT ATOOL; IT’S APHILOSOPHYThe most important thing to remember aboutresponsive web design is that it is not a tool. It’s not apiece of so"tware you install or a plugin you downloadand your website becomes instantly responsive. It’smore than just one method or process. It combines thebest practices and processes in website planning,design, development and marketing all into one.Why Responsive Web Design?28
Implementing a Responsive Web Design Solution givescompanies and business the opportunity to swi"tlychange, improve and optimize their online presencewhile ensuring that users on any device receive anoptimal website experience.A"ter the huge impact that mobile traffic had on 2013,2014 is set to be an even bigger year with expertspredicting that the number users connecting withmobile and tablet devices will surpass desktop andlaptop computers. As customer behavior shows theweb moving towards a mobile society, adapt early witha responsive website and stay ahead of the curve. It’seasier to take the needed time to optimize your brandand marketing when your website is already ahead ofthe game.Why Responsive Web Design?29
HOW TO GETSTARTED:Want to start planning the implementation of aResponsive Web Design solution for your business?Lean Labs can help with the planning andimplementation process of a customized ResponsiveWeb Design solution for you business. We experiencedwith working with business of all shapes and sizes andwe can guide you through the whole process painlesslyand at a pace that suits your business.Step 1 is to request a free website assessment from LeanLabs. We’ll review where you’re at and help you devisea strategy to reach your business goals and fulfill yourcustomers’ needs.Why Responsive Web Design?30
About the authors:Callum Hopkins (callum@lean-labs.com) works as a developer at LeanLabs and is based in the North East of Scotland. He has a range of skillwhich help him to spread his work load from backend coding & server maintenance,all the way through to front-end design and content writing. Callum is a publishedauthor and a keen blogger and likes to stay on top of the latest web trends and newsitems. In addition, he is an avid football fan and when he’s away from his laptop, helikes to spent his time in his kitchen cooking meals and baking for friends and family.Kevin Barber (kevin@lean-labs.com) is the founder and president of Lean Labs. AtLean Labs Kevin defines the vision, strategy, and resources that achieve ResponsiveWeb Design, Internet Marketing, Inbound Marketing, and Web App Development.Kevin is also head entrepreneur at Net Profit Services, Inc. Kevin values beingspiritually grounded and living a principled life focused on family and serving others.His interests include: Cycling, Motorcycling, Boating, Homesteading, FamilyLife, everything Entrepreneurial, and talking with motivated/driven people.Why Responsive Web Design?31
The end.or is it the beginning?Need a hand withResponsive Web Design?Lean Labs can help. We create engaging, responsive,high conversion web solutions for deserving brands,using a proven lean methodology.LEARN MORE View all our resourcesWhy Responsive Web Design?32
Responsive web design is seen in the eyes of many designers, developers and agencies as the greatest solution to this question and to future proofing any website in terms of optimization for viewing on multiple devices ranging in screen sizes. The rise in popularity and implementation of resp
