The viewport is a technical word for the visible area of your mobile phone screen.
Before people started designing websites for mobile phones, websites were almost always larger than the viewport on mobile phones and the website content had to be resized to fit on the screen. This was standard for most websites that weren’t optimised for mobile.
Do you remember viewing websites on your first Blackberry or iPhone? Not a pleasant experience.
Oh the Blackberry. Did you know they still made these? via GIPHY
To overcome this issue and to ensure websites were 100% mobile friendly, Apple first introduced the viewport meta tag for Safari iOS so that web developers could access and manipulate the size and scale of the viewport. This fully allowed developers to build responsive web experiences rather than JavaScript-dependent mobile websites that predominantly produced negative user experiences.
The Viewport and Modern Development
In modern web development websites are regularly built to adapt to a variety of devices and screen sizes. Successful websites are routinely designed for mobile users first with additional content added on successively for larger screens.
Establishing user-friendly content across devices is done through by using CSS media queries dependent on the viewport size, serving scaled images to ensure the user always sees a crisp image without pixelation, changing font sizes to ensure readability, and eliminating sideways scrolling that can ruin a user’s experience. This is all dependent on the successful setting of a viewport meta tag on a website.
Why Is It Important That Your Website is Configured for a Mobile Device?
Anyone who looks around on buses or trains can see that mobile phone usage is on the rise. Officially, the number of UK adults who own a smartphone increased from 17% in 2008 to 78% in 2018. The average time spent on a smartphone each day is just shy of 2.5 hours, but this figure is much higher among younger people.
The increase in usage of smartphones and mobile devices to access the internet and websites has been picked up by Google and other search engines.
As a result, Google has recently rolled out mobile-first indexing. This means that when the largest search engine crawls your site, it will be looking through a mobile lens, largely disregarding your desktop or laptop layout.
As mobile usability is a factor in the Google algorithmic search, maintaining a website’s visibility now is largely dependent on serving meaningful and useful content in a mobile viewport and context.
Struggling to Make Sense of This?
The Artlab specialises in mobile-first websites that are easy to use and rank well in search engines. We design and develop new websites and work with recurring clients to keep their websites visible on all major search engines.
If what you’ve read here doesn’t seem to be your bag, give us a call at 0161 974 0974 or drop us an email here hello@theartlab.co.uk. We can discuss how to make your website mobile friendly and search engine visible so that you can continue to grow your business. Likewise, you can read more at the Mozilla Developer docs which are always an excellent source of information.