June 30th, 2016
While having a mobile website may seem like common sense, it’s important to emphasize that there are more people using their phones to access the internet than desktops, as reported by comScore, so it’s imperative that you have a delightful presence accessible via any mobile device. For many companies, their mobile website is the primary access point for their entire business–a virtual front door. To properly leverage the mobile web, your website needs to load quickly and properly across all devices. With a responsive design, your website is viewable on any device size without creating the need for separate, siloed websites. It ensures your content can be read and consumed on any device to improve the user’s experience, and it makes it easier for Google to crawl, index, and organize your site to increase search engine traffic.
If you haven’t built a mobile-responsive website yet, there are three key elements that make up the framework:
- Fluid grids: Websites were traditionally created with fixed pixels, which were always in one size. But because mobile users are accessing websites using devices with different screen sizes (e.g. laptops, phones, tablets), websites need to be designed in percentages, which are adaptive units, to automatically adjust to the right screen size. These responsive sites are designed by first defining a maximum layout size and then dividing the grid into a specific number of columns with proportional widths and heights. This way, when a screen or browser size changes resolutions, each element will adjust according to the set proportions.
- Fluid images: Similar to fluid grids, fluid images will adjust in size depending on the screen resolution and grid size. This requires creating code that ensure the browser enlarges and shrinks images when appropriate.
- Media queries: Media queries tell your code how to properly ender by allowing CSS changes to apply to your website when specific conditions are met, like when the website renders in a particular size or width.
Once you’ve set up your website for responsive design, or if you already have a mobile-responsive website and are looking to optimize it, there are different design elements to keep in mind:
- Masthead: A masthead is a graphic image or text title that appears at the top of your website (e.g. logo and menu bar). Is your masthead simple and clear so it’s not distracting your visitor from the rest of the site? Does your logo display clearly in different resolutions? Is your menu bar visible? Does it display the different navigation options when you click on it to expand it?
- Images: Is it clear what your images are displaying on a mobile device? Some images are not suited for small resolutions. Does it distract too much from the call-to-action button? Does the image link properly? If you have a carousel function, does it swipe to the correct images?
- Product descriptions: Are your descriptions clear and concise? Is it obvious what product the description goes with? If you’re displaying product ratings, can you access the reviews?
- Footer: Did you include the main navigation options within the footer? It can be frustrating for your visitors to have to scroll all the way up just to access another page. Is your contact information displayed in the footer?
While these components seem technical, some marketing automation platforms have responsive design capabilities built in so you don’t have to involve your IT or web development team. You can easily create mobile responsive landing pages and preview what they look like on your viewer’s mobile device.
Share and Enjoy