Planning a Responsive Website

Transcription

1 Planning a Responsive Website Planning a website is important for both web designers and website owners. Planning your website before you start building it can save you time, keep your site code more accurate and fast, and best of all, it will save you money. Website owners can use the information in this chapter to create a site plan to present to their design team. And web designers can use this chapter to work with their clients to plan the website they are going to build. Every web designer I ve ever worked with has always been way more interested in diving into the code of a website than planning how to build that site. Planning, for most of us, is boring and gets in the way of the meat of the project. But even doing a little bit of planning before you dive in can prevent a lot of problems before you start. What You ll Learn in This Chapter: How to determine if responsive web design (RWD) is right for your site How to create a site plan How to use analytics to evaluate your current site How to look at your content critically with regards to responsive design Here are some examples, from real sites that I ve worked on. In most of these situations, we did a little bit of planning, but often the planning was along the lines of asking the content writers How many articles do you have ready to go on the site? One site I worked on, we spent two weeks designing an amazing navigation menu. It was responsive, flexing with the width of the browser window and it contained sections for every area of the website. However, when we put the site live, we learned that one of the site sections was rolling out a new section name that was over 30 characters long. The content team had tested this name, gotten it approved by upper management, and had already spent a lot of money on it, they were waiting for the redesign to make it live. But 30 characters didn t fit in our design. If we had gone to the content teams at the beginning of the process, we would have known about this name, but because we didn t, we had to spend another two weeks reworking the menu to make it fit. On another site, my team worked hard to create a mobile version of the site. The company had done research and felt that a separate mobile site was more cost-effective than doing RWD. It wasn t until we put the new mobile site live that anyone thought to look at current mobile usage. It turns out that only 3-5% of the traffic was from

2 mobile. When the mobile site went live, it ended up getting only a fraction of the page views that the desktop site got, and when I left after six months, that number had not increased significantly. I once worked on an ecommerce site where the site owner was convinced that he was losing customers by not offering his products for sale in a mobile-friendly manner. From my discussions with him, it seems he had visited his site on a smartphone and didn t like how it looked. So we spent five months creating a more mobile friendly storefront. When we were done, we took a look at the usage by customers, and nearly all of the mobile customers were coming to the site, clicking on the show desktop version, then going to a completely different section than the storefront. All of these scenarios could have been prevented if we had done more planning and analysis before we started working on the design. In this chapter you ll learn how to evaluate your site and come up with a plan for creating 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 your website responsive. But before you leap ahead, you should make absolutely sure that this is the best solution for your website. As I will discuss in Chapter 20: Problems with Responsive Web Design, RWD is not the perfect panacea for all web problems. And RWD can cause problems of its own. There are some things you should evaluate before deciding to build a responsive 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 need I recommend that websites with a large mobile audience (more than 20% of current visitors) or sites that want to attract a large mobile audience use RWD. Sites with a smaller mobile audience can still benefit from responsive design, but they would need to recognize that the time it takes to build it and modify or add content to support it might be expensive.

3 How to Plan for a Responsive Website Once you ve decided to go ahead with a responsive web design, you should first make a plan for how you re going to implement it. If you re like most web designers, planning is boring and you want to get straight to the implementation. But if you plan things first, you ll spend less time later fixing problems. Check Site Analytics The first thing you want to do is check your website analytics to see if your site is a good candidate for RWD. As mentioned above, sites with a lot of mobile readers make good candidates for RWD because they already read the site. Making the site more mobile friendly will encourage them to visit and stay longer. There are many analytics packages that will tell you what percentage of viewers are coming on mobile devices. As you can see in figure 8.1, not all sites get a lot of mobile traffic. On one site I manage, the traffic is primarily desktop customers, while on another site, 25% are coming from mobile devices. Neither of these sites are optimized for mobile customers right now.

4 Figure 8.1 The top image shows a site in Google Analytics with only around 7% mobile traffic, 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 Analytics Google Analytics is a popular analytics tool. You can set it up by going to and following the instructions there. Once you have a month of traffic, you are ready to 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.

5 4. Click on the pie chart icon above the table to see how many mobile users your site has. This will give you an idea of how your current customers are viewing the 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 of visitors, it can be fun to watch the real time overview report as well. Figure 8.2 shows how that might look. Figure 8.2 Google analytics shows only 6% non-desktop users in real-time analytics Evaluate Existing Content The 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 s information your customers (or the customers you hope to attract) will want to view on their mobile devices. Remember that content isn t just the words on your pages. For your plan you should 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 including design elements like icons multimedia elements like sound files and video and be sure to include what formats they are in special text content pages like tables and forms

6 other content items like PDF files or Word documents advertising blocks, not necessarily what ads you serve, as that changes, but rather what ads you generally serve and where they are in the design If you have a large site, you might want to do this as an aggregate rather than listing the exact files. But you want to know a general overview of what your 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 t be removed from context, and you have over 100 videos and PDFs. BY THE WAY: Don t Forget Retina Devices I will cover retina devices and how they affect images in more detail in Chapter 14: Images, but for now you should be aware that you are probably 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 you absolutely want crisp on retina devices so that you can have them created. Don t forget to catalog your advertising. Advertising can be a problem on responsive websites because ad blocks are usually sold in very specific sizes that can t be changed. I will discuss more about what to do with advertising on responsive sites in Chapter 20: Problems with Responsive Web Design. Make Decisions About the Content Once you know what you have on your site, you need to decide if it needs to be available to a mobile user. Remember that sites that use progressive enhancement make the site accessible to everyone regardless of what browser or device they are using. So the easy thing is to think that all your content should be available to all your customers. But some content works better for mobile customers than others, and your design should respond to that too. Figure 8.3 shows you how ebay adjusts their content for mobile users and desktop users. The screen shots were taken at the same time, but as you can see the designs are significantly simplified for mobile customers.

7 Excerpt from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours Figure 8.3 The ebay website viewed on an iphone and desktop computer While there may be some mobile customers who want to access the entire site, the majority of them are only going to do one or two things. If your site is already live and you re getting traffic from mobile customers, you can use your analytics software to determine what pages they like the best so you know what to showcase in your smaller-screen designs. TRY IT YOURSELF: Find the Pages Popular on Mobile in Google Analytics Google Analytics can help you see what pages are most popular to your mobile customers. 1. Login to your Google Analytics account. 2. Go to Behavior then Site Content and open the All Pages report. 3. At the top of the table, choose Device Category as the Secondary Dimension. This will give you an additional column indicating what type of device is used to view the page. 4. Then click on Advanced on the right side of the top of the table. 5. Make the filter read Exclude Device Category Containing desktop, like in figure 8.4.

8 Figure 8.4 Google Analytics advanced filter 6. Click Apply. Google Analytics will then show you the ten most popular pages for any device that isn t a desktop computer. Google separates the views out by both tablet and mobile. If you want to see just one or the other, you can change the filter to include or exclude only the devices you want to see. Try to evaluate every piece of content or at least every type of content you have on your site. You want to decide if it needs to be on mobile or tablet devices, if it can be resized or not (many videos and most advertising cannot be resized), and how critical that content is for mobile, tablet, and desktop users. Write the Site Plan Once you have your content listed and evaluated, the plan is nearly written. You will realize as you re evaluating the content that some of it doesn t need to be highly visible on smaller screen devices and others can t be displayed there, because it won t fit and can t be resized. Your site plan should include what you will do to make the critical parts of your pages accessible no matter what. Remember that this isn t a design plan. You don t have to worry about how the pages will look or where elements will be placed. You just need to know that you have images that will need adjusting, advertising alternatives, and that the forms need to be accessible and look good. Summary In this chapter you were given some tools to help decide if responsive web design is right for your site as well as how to plan for building a responsive website. You learned that planning is a critical, if boring, part of the web design process, but by planning before you start doing the actual design you can avoid problems after the site is live.

9 Q&A Q A Q A You focused on Google Analytics for evaluating the site, but what are some other options? Google Analytics is one of the most popular website analytics tools available, but it s not the only tool. If you host your site on WordPress you can get a lot of information from the analytics available in their JetPack plugin ( Another good analytics tool you can install on your own server is Piwik ( What if my site doesn t get any mobile viewers, do I still need to make it responsive? Ultimately, it s your website and you can do what you like with it. But I recommend still considering making your site responsive even if you don t get a lot of mobile users. A responsive site doesn t have to be extremely complicated to be useful to mobile customers. In fact, if all you do is convert a multiple-column site into a single column for mobile customers, you ll have made it that much easier to use for your mobile customers. And mobile is growing more and more popular as more people get smartphones. Workshop The workshop contains quiz questions to help you process what you ve learned in this chapter. Try to answer all the questions before you read the answers. Quiz 1. What five things should you evaluate to decide if RWD is right for your site? 2. Why is planning important? 3. What kind of site is a good candidate for RWD? 4. How much data should you have in your analytics before you start using it for customer analysis? 5. Name three types of content that you should list in your content plan. 6. Why should you list advertising blocks?

10 Quiz Answers 1. You need to know what your site s customers are using to view it right now, who you want to cater to, how much time you have to build and maintain the site, what kind of content you currently have, and what content you need to make your site better for mobile customers. 2. Planning is important because it helps you identify trouble spots and fix problems before they happen. 3. Any site that gets more than 20% of its visitors from mobile devices is a good candidate for RWD. 4. While you can start using your site analytics immediately, it s good to wait at least a month to make sure you re seeing a good overview of your customer base. 5. You should list all your web pages with text content, all your navigation elements, content images, multimedia elements, PDF and Word documents, tables and forms, and advertising blocks. 6. You should list advertising blocks because they cannot be resized and can cause problems in responsive designs. Exercises 1. Return to the site you re working on and create a site plan for it. Include all the content types along with how important they are for mobile customers and any other information you think is important. I have a sample spreadsheet that I use to evaluate my site content at that you are free to download and use.