Back in 2012, we saw a dramatic increase in mobile traffic to our web sites. Mobile traffic on our sites went from less than 2% in the first eight months of 2010, to more than 15% in 2012. Today almost half of the traffic on Visual Wilderness comes from mobile devices.
So it comes as no surprise that Google recently decided to include Mobile Friendliness in its list of webpage rankings. Here are few things to consider when you are designing your site to be mobile-friendly.
Fully Responsive Theme
We use WordPress as a Content Management System (CMS) for our site. With this, we had a couple of options. We could convert our sites to a fully responsive theme that would automatically adjust to various screen sizes – or we could use a plug-in like WP-Touch to provide a better look and feel for our existing non-responsive theme. After much research, we decide to go with a fully responsive theme. Why? Using a fully responsive theme meant that we didn’t have to deal with incompatibilities between the plugins and the themes we chose to use. It also meant that our maintenance was streamlined. Instead of dealing with individual components of each site one at a time, we could configure the responsive theme itself. The choices we made during the configuration process would carry over to all elements within the site.
The most important content on our websites is the blog. We put up blog posts on a regular basis. These posts provide educational content for our viewers and provide information and announcements for our e-books, workshops, webinars, and events. So readability is critical – and we want our blog to be easy to read no matter what device you are using. Our new blog design is readable on any device – from a small mobile phone screen to a 30” monitor.
Responsive Blog & Galleries
This was our biggest challenge in dealing with the responsive theme back in 2012. At that time, gallery plugins on the market were responsive but could leave a lot of white space as the screen size changes. We looked for inspiration from social media sites like Google+ and Pinterest and decided to design our own blog layout engine. We wanted a responsive & scaleable layout design that would shift and change to fit any screen size, use very little white space, work across multiple browsers, and show thumbnails without cropping. Pretty cool, right?! We use this design to display our blog article and showcase our image in galleries.
Mobile Friendly Lightbox
Although many light box and slideshow plugins work well enough on mobile devices, not all support the touch functionality that makes touch-based mobile devices user-friendly. We chose a light box and slideshow that was touch-friendly, worked on both desktop computers and mobile devices, and was compatible with our gallery layout.
With the responsive theme, our site is scaleable to any screen size. How can you tell if your website is mobile-friendly? You can use this tool to determine the mobile-friendliness of your site: Mobile Friendly Site Test