Have you ever sat on the train or tram and watched people searching and engaging with content and websites on their mobile phones, with improved and advanced technology, we can now shop on the go, watch videos and manage our diaries all with a click of a button.
Mobile First describes how a site can be developed and designed so that it can be used and viewed on a mobile device, it could be something like a shopping app or news website.
This means that the whole development and design process will be completed first from the mobile perspective, eventually moving up to the bigger screens like a desktop or a tablet.
Mobile friendly is when a website is developed or designed, so that it can be viewed properly in a mobile format or mobile size screen, all content fits on the screen for easy viewing without having to scroll horizontally. Sometimes, if you have visited a website and the text or content disappears from the edge of the mobile’s screen, the chances are the site was built on a desktop first before converted to a mobile format.
This approach is most commonly used when developers or designers are creating apps or websites that need to function properly and look good on mobile devices.
Some really good examples of apps/websites that have been purposely built to work on all types of devices including Facebook, Messenger, Amazon Shopping and Netflix. These companies all have both a mobile application and a mobile friendly website. It makes sense to have such investments, as there was already a demand for these services, as more and more of us use these sites to communicate with others, shop as we go and watch on demand entertainment from your phone.
It’s just not convenient to carry your laptop around on the chance you need to send someone a message using something like Facebook Messenger or catch up on your latest seasons on Netflix when you can use a more portable device such as a phone or tablet. Not to mention a lot of laptops will require WiFi or a hotspot connection which isn’t realistic when needing on-the-move capability.
There are many factors that must be taken into consideration and thought through carefully when creating a website that works well for mobile devices, the key things are usability, speed and legibility. These key parts are extremely important no matter the device but are often neglected for mobile devices.
Usability is a measure of how easy the site is to use, taking into consideration how good the components are such as the navigation system , call-to-actions (buttons/links), the functionality of the website and overall experience of using the website from start to finish.
A good speed or more often known as ‘fast loading times’ for a website being viewed on a mobile device is absolutely essential during the design and development of the site. Many things can contribute to slowing down or speeding up the page load time including image size, code quality/efficiency and internet connection. All of this means that websites must be compressed, condensed, cached and optimised as much as they can without negatively impacting the look, feel, usability and functionality of the site.
Legibility is one of the most simple aspects but is commonly forgotten about. The end user’s ability to view and retain the content being displayed on their screen is the most overlooked core component to a functioning website. This can come in the form of images not scaling to a mobile friendly size resulting in stretched or morphed images which are now unclear, text having a font-size that is too small to easily read.
Legibility is often easily tackled by scaling and changing the sizes of content being displayed on a webpage to make it able to be viewed easily for different screen sizes.
Even buttons being too close together can cause issues on mobile devices, without the precision of a mouse and cursor combo the end user is tasked with having to use their fingers and thumbs to navigate their way through the site, with buttons being too close to one another, it’s an all too common of an occurrence to accidentally tap the incorrect button, resulting in frustratingly navigating to the wrong page.
Some parts of websites need completely redesigning to work in a mobile format. Reducing the amount of columns is one approach you will see quite a lot, especially for shopping sites, you will notice that on a desktop computer if you visit a shopping store, their category pages will have 3, 4 or maybe more columns where on mobile this would be either 1 or 2 in order to fit on the page properly. Another example is a navigation menu, often you will find the navigation menu for a desktop screen to be found at the very top of the page and have links across the top, with subtopics displayed when you hover over the main topics e.g.
But if you find the same menu in mobile, the main menu is now able to be toggled into view and out of view e.g.
This is a typical example of website components having a redesign for mobile devices. In this example the redesign is warranted due to the amount of screen the navigation bar would consume if it were to be left visible; this would prevent the user or distract them from the content or call-to-actions on the page.
Mobile friendliness is an essential part of the present and future of website design and development as it has a proven impact on the functionality, usability of the site and conversion rates.
This is why the mobile first approach is not only very important but essential and is a vital part of the development life cycle for any applications needing to be viewed on mobile devices. In a technology driven world where mobiles are becoming a key part in the day-to-day, it’s not a question of “Why mobile”, but more of a “Why not mobile”.
Have questions about your mobile site or just your site in general? Talk to us today.
5 Min Read
Published: 2 April 2020