According to Comscore.com, in 2015, there is a 60% or greater chance you are reading this article on either a phone or a tablet than a traditional PC. 2015 was the year mobile devices overcame desktop Internet usage. Increasingly, mobile users are shopping, banking, checking social media, and everything else they do on a desktop and more. Since 2013, all the new website projects we’ve built have been mobile friendly. So, is your website friendly to mobile users?
If you are not yet convinced, I’ve heard tell that Google has begun giving higher page rank to mobile friendly websites. Google has a big push to encourage website owners to accommodate mobile users. They have a great “Mobile Friendly Test” where you can test if your website is friendly to mobile devices.
What does it take to make a website mobile friendly?
In the past, entirely different sites were developed for phone and desktop computers. This made maintenance difficult since at least two different websites needed to be maintained.
These days we use a technique called “Responsive Design”. Websites are designed to optimize the layout at different screen widths. As the screen width changes, elements in the layout adjust to fit the screen width. Rules are written to tell the web browser to display content at various widths. However, the content of the page stays the same. Actually, the code of the page remains exactly the same on all screen widths. Therefore, content can be maintained in one location while intelligently displayed on all screen widths.
There are basically four different widths –
- Very wide for large desktop displays
- Wide for laptop displays
- Medium wide for tablet displays
- Small for phone displays
When we design a website layout, we design for all four widths. This helps us and the client see how the website will look before we start coding the website template.
Building the layout to be mobile friendly
Currently, there are WordPress and Magento themes that are already responsive to various screen sizes. If you currently have a WordPress or Magento website, it could be as simple as switching to a responsive capable theme such as ElegantTheme’s Divi Wordpress theme. With Divi and other responsive themes, each pages layout can be customized at different display widths to further enhance the layout.
If your website is not based on a content management system framework, then the site can be built with a CSS(Cascading Style Sheet) framework, such as Twitter’s Bootstrap. CSS frameworks have many of the responsive rules and styles already pre-built. The design can then be applied to the framework much quicker then building the CSS from scratch.
Going forward
There are some emerging technologies that we are watching, such as watches and televisions. It will be interesting to see how the technology evolves to handles extra large and extra small screen sizes. We’re up to the challenge.
Recent Comments