banner-1.jpg

Vision Blog

Thought Leadership, Best Practices, Insights and Examples

  

Taking Responsive Design and Your Mobile-First Strategy to the Next Level

by Tom Humbarger
Post Date:01/28/2016

The importance of mobile traffic to your local government website is growing.

Based on a recent analysis of our customer base, we discovered that 33% of local government web traffic was mobile in 2015 and that it increased by 27% increase over 2014. Another statistic leading to the growing importance of mobile says that 25% of users only use a mobile phone to access the Internet. And finally, in 2015, Google changed its search algorithm to favor “mobile-friendly” websites.So, what does this mean for your mobile strategy? For local government websites, the clear answer is that a mobile-first strategy using responsive design is the best option to address the needs of mobile users – as it allows for easy viewing and navigation across all types of devices without forcing a user to download and install a separate app.

But responsive design has limitations – specifically, the element order of standard responsive design is based on the desktop design and page elements do not always appear where you want them to appear.

Vision has been delivering responsive mobile websites since 2014, but now we’ve take responsive website to the next level with a new feature called visionMobile Designer.

Let's start by looking at a typical webpage:

Responsive_Design_-_Example_Website.png 

This is the page looks like when viewed on a mobile device using standard responsive design. Due to how responsive design works by default, a mobile user doesn’t even know that this is the recycling page without scrolling halfway down the screen. Widgets that appear in the left navigation panel also appear above the page title. This is one of the issues with responsive design. While the page is viewable on a mobile device, the customer experience and usability is definitely lacking.   

Standard_Responsive_Design-1.png

 Standard Responsive Design

visionMobile Designer allows webmasters to design the mobile experience for users by giving them the option to move, hide and reorder content just for the mobile view of their site – and it can be done at the individual page or template level.

Let’s look at the how the page looks after it has been optimized with visionMobile Designer. You can see that the title has been moved to the top of the page while the important information in the button about the cancellation of trash service and the contact information has also been moved up the page. Doesn’t this mobile website view deliver a much better and more logical user experience?

 Optimized_Responsive_Design.png

Optimized Responsive Design

 Learn more about responsive design at Vision:

 

Return to full list >>

Subscribe to Vision Blog

Recent Posts