It is frustrating to use a mobile phone to access a website where the menu options are too small to read or you need to scroll the screen left and right to see information. When this happens I often move on to a website that will provide the information I want in a format that works well with my smart phone.
Equally frustrating is finding a website using my desktop computer and then later when I want to access the website on my mobile phone or tablet I can’t find the information I want. The company has created a separate mobile website that presents nicely on my mobile device but it has different information and not the information I wanted!
How many of you have had similar experiences?
With the increasing trend of mobile devices being used to access websites no business wants to frustrate mobile visitors and loose them to businesses that have invested in a responsive design for their website. A responsive design allows you to have one website, with one set of content, which will automatically change to optimize the viewing experience based on the screen size of the device being used to view the website. This technological miracle is achieved through media queries and CSS.
Responsive Website Design will also reduce the frustration of website owners. Let’s face it keeping one website updated with fresh content and meaningful meta tags for SEO is hard enough, you certainly do not want to add a second mobile specific website to your plate of work!
Responsive Website Design Example
daltondivorcemediation.com is an example of a responsive website design. When viewing the website on a desktop computer you can see the menu full menu at the top. The main content is an image and under that a video, with text to the right of the video.
If we look at the same website on a small device the website has responded to the smaller viewing area. The menu is now a “hamburger” that you can click. The drop-down menu that is displayed once the menu button is clicked makes it easy for even people with robust fingers to easily make their selection. The main image has shrunk to fit within your smaller device’s screen, the video is now centered, and the content that was positioned to the right of the video has now floated under the video. All content is clearly visible and readable on the small device; you do not need to pinch and swipe to see and interact with the content.
Mobile First Design
Due to the popularity and continued growth of smart phones and other mobile devices responsive website design needs to takes a mobile first approach. A mobile first approach forces you to focus on core content and functionality. You need to present “need to know” information clearly and succinctly for fast-pace mobile viewers. During design layout you need to consider content placement and how information will float underneath other content as device sizes get smaller. These are just some of the design considerations for a mobile first design.
Once you have your mobile first responsive design that allows everyone to access key content and functionality you can then begin smart progressive enhancement of your website content.
As a business owner you know how important it is to respond to the market place — so your website should also be responsive!
See How Your Website Looks on Mobile Devices
The best way to determine how your website will look on a particular device is to view your website on the actual device. So once you have used all of your devices, the devices of friends and relatives, and the devices at your local technical stores the next best thing to do is view your website on an emulator. There are a number of them out there but I have found responsinator to be helpful.
Google also has a mobile-friendly test that will analyze your website to determine if it is mobile-friendly and alert you to errors. Google is ranking website that are mobile-friendly higher in search engine results than website that are not mobile-friendly.
The bottom-line: if your website is not mobile friendly it is time for a new website design. Here are a couple blog articles that you might find helpful as you prepare for your new website design: