Over 60% of internet usage takes place through a mobile phone or tablet; that is a colossal shift in just a relatively few short years. Terms like “mobile friendly” and “responsive design” are at the top of ever web designers lexicon now as having a website look and work great on mobile becomes, not only a necessity, but a priority.
The big trend at the moment, (and what is set to only get bigger in the coming years) is a ‘mobile first’ approach to web design, basically back to front of what you’re probably use to; making a website that works well on mobile and then adapting it to work on a desktop.
With that being said, the number of websites that aren’t mobile friendly at all is still huge with some surveys saying that only 18.7% of websites are mobile friendly! (although the recent changes made by Google to take mobile responsiveness into account for their search algorithm has increased that number by over 4%). If you’re wondering if you’re doing a good enough job with your mobile sites, take a loot at this list below for 8 ways to make your site mobile friendly on the web.
- Responsive Design. A responsive web design is the first and most important part that makes up a mobile friendly web design.Due to the different amount of devices in use, a developer cannot possibly design a website in different layouts for all these devices. So a solution for this is to go with a responsive website layout. A responsive layout is a web design that will auto scale itself for every screen size presented. A quick way to make a fixed layout responsive is by using media queries in CSS.
- Remove Pinch Zoom. It is now the time to disable to good old fashion pinch zoom!
- Increase font size. After disabling the pinch zoom, it is time to increase the font size. Mobile devices have smaller screen sizes than desktops which make it much harder to see normal font sizes. This is why most websites have become much larger. Increasing your font size is a must do for mobile designs. A larger font size promotes a better visitor experience.
- Add more white elements. White spaces are the latest web design trend of the year! White spaces are added around all elements of the page. The white spaces created a more focused, professional, and clean look on a website.
- One page design model. The one-page web design is the perfect role model of what a mobile friendly web design should look like visually. The one page web design has a menu that navigates within its own page. It moves in a top to bottom motion ( vertically). The one page design has some optimization flaws, but for the overall visual of the design, it is one of the role models of what a mobile design should look like.
- Remove extra widgets and sidebars. Now it is time to free your training wheels! Let go of the double sidebars and extra widgets on a web page. Less weight is much better for mobile sites.
- Reduce lines of CSS Code. An exceptional web design is one that has a great design that can be very eye-catching, but at the same time, it should have the least amount code possible used to design the layout. To reduce the lines of code a web designer should compress his CSS files and the lines of code will become simplified.
- Test out your page speed. Mobile devices cannot open webpages as fast as desktops with wired ethernet can. So this is why a fast page speed is required for a website. The first and most important thing to do to increase page speed is to look at your browser HTTP requests. The more HTTP requests a browser has, the longer it will take for those requests to load one after the other. Every web page should have a low count of HTTP requests on all web pages. Increased website speed provides a better website performance and an overall better user experience. Slow websites will lead to an increased bounce rate. When a website’s bounce rate increases, that leads to search engines thinking that people are leaving the webpage because it may be broken or irrelevant to its selected keyword. A slow website has many problems that may arise. It is advised that every web page reduce the HTTP count to promote a faster page speed.
Always remember to run an extra website speed check, broken link check, spell check, and responsive design check once the page is up on the server. Use these 8 ways explained above to make your website mobile friendly!