Planning A Website FREE Chapter - Teach Yourself HTML5 In .

Excerpt from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 HoursISBN: 978-0672338380 By Jennifer KyrninPlanning a Responsive WebsitePlanning a website is important for both web designers and websiteowners. Planning your website before you start building it can saveyou time, keep your site code more accurate and fast, and best ofall, it will save you money.Website owners can use the information in this chapter to create asite plan to present to their design team. And web designers canuse this chapter to work with their clients to plan the website theyare going to build.Every web designer I’ve everworked with has always beenway more interested in divinginto the code of a website thanplanning how to build that site.Planning, for most of us, isboring and gets in the way ofthe meat of the project. Buteven doing a little bit ofplanning before you dive in canprevent a lot of problems beforeyou start.What You’ll Learn in This Chapter: How to determine if responsiveweb design (RWD) is right foryour site How to create a site plan How to use analytics to evaluateyour current site How to look at your contentcritically with regards toresponsive designHere are some examples, fromreal sites that I’ve worked on. In most of these situations, we did a little bitof planning, but often the planning was along the lines of asking the contentwriters “How many articles do you have ready to go on the site?” One site I worked on, we spent two weeks designing an amazingnavigation menu. It was responsive, flexing with the width of thebrowser window and it contained sections for every area of thewebsite. However, when we put the site live, we learned that one ofthe site sections was rolling out a new section name that was over 30characters long. The content team had tested this name, gotten itapproved by upper management, and had already spent a lot ofmoney on it, they were waiting for the redesign to make it live. But 30characters didn’t fit in our design. If we had gone to the content teamsat the beginning of the process, we would have known about thisname, but because we didn’t, we had to spend another two weeksreworking the menu to make it fit. On another site, my team worked hard to create a mobile version ofthe site. The company had done research and felt that a separatemobile site was more cost-effective than doing RWD. It wasn’t until weput the new mobile site live that anyone thought to look at currentmobile usage. It turns out that only 3-5% of the traffic was fromThis is a free sample chapter from the book Sams Teach Yourself Responsive Web Design with HTML5 andCSS3 in 24 Hours by Jennifer Kyrnin (http://htmljenn.com/). Available on Amazon.com(http://bit.ly/tyrwdbook) or wherever books are sold.

Excerpt from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 HoursISBN: 978-0672338380 By Jennifer Kyrninmobile. When the mobile site went live, it ended up getting only afraction of the page views that the desktop site got, and when I leftafter six months, that number had not increased significantly. I once worked on an ecommerce site where the site owner wasconvinced that he was losing customers by not offering his productsfor sale in a mobile-friendly manner. From my discussions with him, itseems he had visited his site on a smartphone and didn’t like how itlooked. So we spent five months creating a more mobile friendlystorefront. When we were done, we took a look at the usage bycustomers, and nearly all of the mobile customers were coming to thesite, clicking on the “show desktop version,” then going to acompletely different section than the storefront.All of these scenarios could have been prevented if we had done moreplanning and analysis before we started working on the design. In thischapter you’ll learn how to evaluate your site and come up with a plan forcreating a responsive web design for it.Should You Make Your Website Responsive?Chances are, if you’ve bought this book, you already plan to make yourwebsite responsive. But before you leap ahead, you should make absolutelysure that this is the best solution for your website. As I will discuss inChapter 20: Problems with Responsive Web Design, RWD is not the perfectpanacea for all web problems. And RWD can cause problems of its own.There are some things you should evaluate before deciding to build aresponsive website, including: who’s viewing your site what you want your site’s audience to look like (more mobile? less?) how much time you have to build the site what kind of content you already have on the site what changes you will needI recommend that websites with a large mobile audience (more than 20% ofcurrent visitors) or sites that want to attract a large mobile audience useRWD. Sites with a smaller mobile audience can still benefit from responsivedesign, but they would need to recognize that the time it takes to build it andmodify or add content to support it might be expensive.This is a free sample chapter from the book Sams Teach Yourself Responsive Web Design with HTML5 andCSS3 in 24 Hours by Jennifer Kyrnin (http://htmljenn.com/). Available on Amazon.com(http://bit.ly/tyrwdbook) or wherever books are sold.

Excerpt from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 HoursISBN: 978-0672338380 By Jennifer KyrninHow to Plan for a Responsive WebsiteOnce you’ve decided to go ahead with a responsive web design, you shouldfirst make a plan for how you’re going to implement it. If you’re like mostweb designers, planning is boring and you want to get straight to theimplementation. But if you plan things first, you’ll spend less time later fixingproblems.Check Site AnalyticsThe first thing you want to do is check your website analytics to see if yoursite is a good candidate for RWD. As mentioned above, sites with a lot ofmobile readers make good candidates for RWD because they already readthe site. Making the site more mobile friendly will encourage them to visitand stay longer.There are many analytics packages that will tell you what percentage ofviewers are coming on mobile devices. As you can see in figure 8.1, not allsites get a lot of mobile traffic. On one site I manage, the traffic is primarilydesktop customers, while on another site, 25% are coming from mobiledevices. Neither of these sites are optimized for mobile customers right now.This is a free sample chapter from the book Sams Teach Yourself Responsive Web Design with HTML5 andCSS3 in 24 Hours by Jennifer Kyrnin (http://htmljenn.com/). Available on Amazon.com(http://bit.ly/tyrwdbook) or wherever books are sold.

Excerpt from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 HoursISBN: 978-0672338380 By Jennifer KyrninFigure 8.1The top image shows a site in Google Analytics with only around 7% mobiletraffic, while the bottom shows another site with almost 25% mobile traffic.(Mobile traffic is defined as both mobile and tablet traffic.)TRY IT YOURSELF:How to Find Mobile Traffic in Google AnalyticsGoogle Analytics is a popular analytics tool. You can set it up bygoing to http://www.google.com/analytics and following theinstructions there. Once you have a month of traffic, you are readyto evaluate your site’s mobile trends.1.Open your Google Analytics account to your site’s reports.2.In the left column, go to “Audience.”3.Choose the “Mobile” area and open the “Overview” report.This is a free sample chapter from the book Sams Teach Yourself Responsive Web Design with HTML5 andCSS3 in 24 Hours by Jennifer Kyrnin (http://htmljenn.com/). Available on Amazon.com(http://bit.ly/tyrwdbook) or wherever books are sold.

Excerpt from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 HoursISBN: 978-0672338380 By Jennifer Kyrnin4.Click on the pie chart icon above the table to see how many mobileusers your site has.This will give you an idea of how your current customers are viewingthe site. If you want to know exactly what devices are viewing it,you can switch to the “Devices” report. And if your site gets a lot ofvisitors, it can be fun to watch the real time overview report as well.Figure 8.2 shows how that might look.Figure 8.2Google analytics shows only 6% non-desktop users in real-time analyticsEvaluate Existing ContentThe next thing you want to do is evaluate what content you currently have.You need to decide if what you have works well for mobile devices and if it’sinformation your customers (or the customers you hope to attract) will wantto view on their mobile devices.Remember that content isn’t just the words on your pages. For your plan youshould create a list or spreadsheet that includes: all the pages on your site with text the navigation elements (a list of what’s in them and where they point) all the images that are content related, in other words not includingdesign elements like icons multimedia elements like sound files and video and be sure to includewhat formats they are in special text content pages like tables and formsThis is a free sample chapter from the book Sams Teach Yourself Responsive Web Design with HTML5 andCSS3 in 24 Hours by Jennifer Kyrnin (http://htmljenn.com/). Available on Amazon.com(http://bit.ly/tyrwdbook) or wherever books are sold.

Excerpt from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 HoursISBN: 978-0672338380 By Jennifer Kyrnin other content items like PDF files or Word documents advertising blocks, not necessarily what ads you serve, as thatchanges, but rather what ads you generally serve and where they arein the designIf you have a large site, you might want to do this as an aggregate ratherthan listing the exact files. But you want to know a general overview of whatyour content consists of. For example, that you have a site with 80% text,only 2 form pages, 90% of your pages include at least one image that can’tbe removed from context, and you have over 100 videos and PDFs.BY THE WAY:Don’t Forget Retina DevicesI will cover retina devices and how they affect images in more detail inChapter 14: Images, but for now you should be aware that you areprobably going to need a second set of images to make your site retinaready. In your plan it’s a good idea to determine what images youabsolutely want crisp on retina devices so that you can have themcreated.Don’t forget to catalog your advertising. Advertising can be a problem onresponsive websites because ad blocks are usually sold in very specific sizesthat can’t be changed. I will discuss more about what to do with advertisingon responsive sites in Chapter 20: Problems with Responsive Web Design.Make Decisions About the ContentOnce you know what you have on your site, you need to decide if it needs tobe available to a mobile user. Remember that sites that use progressiveenhancement make the site accessible to everyone regardless of whatbrowser or device they are using. So the easy thing is to think that all yourcontent should be available to all your customers.But some content works better for mobile customers than others, and yourdesign should respond to that too. Figure 8.3 shows you how eBay adjuststheir content for mobile users and desktop users. The screen shots weretaken at the same time, but as you can see the designs are significantlysimplified for mobile customers.This is a free sample chapter from the book Sams Teach Yourself Responsive Web Design with HTML5 andCSS3 in 24 Hours by Jennifer Kyrnin (http://htmljenn.com/). Available on Amazon.com(http://bit.ly/tyrwdbook) or wherever books are sold.