thinking outside the box

Making Your Website Mobile Friendly (Responsive Web Design)

Text here...
1 2 3 4 5 6 7
If you have a website using Google Analytics you have probably received an email warning that your website is not optimized for mobiles. The emails are rather alarmist, Google are actually only saying that they will favor websites that are designed for mobiles in mobile searches. It's worth emphasizing that this change will not affect search position for searches done on desktop computers. You might ask why there should be a penalty for mobile searches - after all aren’t mobile browsers able to view normal desktop websites?  The answer is ‘yes they can’, but usually to view such content requires zooming and panning the page, the text may be difficult to read and the navigation tricky - all of which Google judge not ‘mobile friendly’. So the changes that Google are looking for include; •  Narrow pages that do not require horizontal scrolling •  Larger text that is more visible for small screens •  Navigation that works, ideally with one finger. So small buttons and menus are out. The original website is on the left and a mobile version on the right, which is better suited for mobile devices. It has a larger font size, narrow page, cropped images and a different, finger-friendly, navigation method. So what's involved in making your website mobile friendly?  In release 10 of Web Designer Premium and Designer Pro we added the ability to create responsive websites, which are websites that are both mobile and desktop friendly at the same time. In effect, you create two layouts (variants) of your content, one that suits a narrow mobile screen which is operated by touch, and one that's better suited for wider screens such as desktops. They are exported as one HTML file, and the correct variant is presented depending on the device of the viewer. This tutorial will take you through the process of creating a mobile variant for your existing site (we will be using one of our template designs).  If you were creating a new website, then we would recommend using one of the ready made Responsive Website Design (RWD) templates that are included in the Designs Gallery of Web Designer 10 Premium and Designer Pro X10 - they are marked with an (R) after the name. They already include a mobile variant. In summary the process of converting an existing website consists of the following steps: 1. Create a Mobile Variant: This creates a copy of your whole website, based on a narrow page design. The key aspect here is that all content is shared by both variants - so text edited on one is automatically updated in the other - this is not really two websites, but one HTML file that adapts its display to the device being used. 2. Adjust the text size for the mobile variant to be larger: Small screens require bigger font sizes to be readable. Xara supports variant-specific Styles so the same content can appear in a larger font. 3. Re-arrange the design and content on the page: This will involve adjusting graphics (e.g. header and footer widths) and may involve tweaking your graphics to better suit the narrow screen. Text columns will have to be narrower and most of your content arranged in on long column, rather than side-by-side. 4. Change the navigation to be a single button drop down menu which is more finger friendly: There's an easy way to convert Xara NavBars to single button touch friendly menus. There is no way to avoid the fact that creating mobile friendly versions of websites can be time consuming - this is true no matter how they are made. (Typically, a web designer would charge almost double for creating a multi-layout RWD website.)  Of course, many users may decide that they only want one version of their website, designed for larger screen computers and tablets, which is fine as it saves time and may be the best decision if the audience is likely to be mostly desktop or tablet users. If you don’t have Xara Web Designer 10 Premium or Designer Pro X10 you can download a free trial here. Website template called ‘Orbit’ that we will convert to be a mobile friendly Responsive Website Design I have used a template called Orbit for this tutorial, you may wish to load the file and follow me through the steps.  If you already own Web Designer or Designer Pro you will find it in the Designs Gallery under Website Themes - General (just load the file called Website). If you are using the trial you can download the Orbit file here.  The template I’ve chosen is not a particularly easy one to create a mobile variant but the intention is to cover all the issues that might come up when you are creating a variant for your own site (template based or otherwise). I have used Web Designer Premium.