Mobile Web Design

Example of mobile web design on a smartphone

Mobile web design explained

When a new client approaches us regarding web design it’s often common for them to not consider mobile web design. Usually the focus has been solely on getting a new website launched as soon as possible. However recently we have noticed many new clients realising the importance of a mobile friendly website.

With over 60% of web users now accessing websites through their smartphones or tablets we have definitely seen a shift in attitude towards mobile web design. For those of you who aren’t sure what mobile web design is we’ll explain it very simply.

So when a user visits your site on a mobile device, your website reformats itself so that the content is readable without having to zoom in. Content is laid out in a clear and accessible way and any call to actions (buttons or links) are big enough to be tapped without accidentally clicking on something else.

This gives the user a pleasant user experience and when you want users to be viewing your content you’ll want to keep them interested and not have them turn away in frustration.

Do I need two websites then?

No is the simple answer. A good responsive website (or mobile friendly) site should use the website design and branding and adjust itself accordingly. It was fairly common practice, certainly after Google announced that they were going to begin only displaying mobile friendly sites on mobiles when a user performs a search, to develop a mobile version of a website and have it be used when a user viewed the site on a mobile device.

This way of thinking was really a short term fix. Nowadays, most websites that are designed and developed are responsive. It’s our belief here at westfourstreet that it should be standard practice for any web designer or web developer to automatically design and build a website to be mobile friendly. Especially when the stats clearly show that the majority of users are using smartphones or tablets to browse the web.

Mobile web design vs content

One of the great things about the explosion of mobile web design is that it has made website copywriters rethink how they go about writing for the web.

Back in the day where users only accessed the web via their desktop PC or laptop it was fairly easy to get away with paragraph after paragraph of content. After all, why not make the most of the space that even a user on a small laptop has available?

But now that mobile web design has overtaken desktop web design, it’s not so easy to get away with having long paragraphs of content on a webpage. It just isn’t practical, and if anything it’s a little off putting for a user to have to scroll endlessly on their smartphone when reading about your business.

So the long and short of it is, the more condensed your content is, the quicker your users will be able to get the information they came for in the first place. Now can you imagine how frustrating it would be to have all that content on a non-friendly mobile website? Let alone a mobile friendly website.

Designing for mobile websites

With the technology that’s now available to web developers, it gives far more freedom to web designers to not be restricted by mobile web design.

To give a very simple example, lets say on your ‘desktop’ version of your website you have some lovely rotating banners and some eye catching icons. But when rendered on a mobile they suddenly become difficult to see or they are huge against the size of your content. Nowadays it’s very easy to ‘feed’ an alternative version of a web element to a mobile or tablet device or browser.

Still confused? It’s OK, it can get that way! With CSS (Cascading Style Sheets) – this is what’s used to add colour and generally design features to HTML – web developers can choose to provide different elements to a website depending on the size of the device the user is using. So imagine you have a full width banner on your website and when viewed on a large 27″ monitor or screen they look the bees knees. Great! Not so great however when a user using a tablet or smartphone views it. The text is too small, the image looks squashed and generally it’s a mess.

But with CSS Media Queries we as designers/developers can now tell a browser to display a different element if the screen size falls below or above certain widths. So rather than have a hard to view banner on the mobile website, you can simply decide to remove it completely or replace it with an element which is more suited to the size of the users screen. For example a static image.

Is it just a phase? This mobile websites thing?

Not likely. As mentioned before, mobile use in regards to accessing websites is now over 60%. This is still rising too and doesn’t look like stalling anytime soon.

Users in general want to access information quickly and also want to find that information with very little effort. So if your website is not geared up for mobile or tablet users, the chances are high they simply won’t stick around to read your content when it involves having to ‘pinch and zoom’.

Mobile web design is equally as important to us a standard website design. With so many startup businesses setting up shop here in Milton Keynes, we have seen over the past 12 months a real shift in attitude from these businesses. Whereas before the sheer mention of mobile web design would produce a shrug of the shoulders from a new client, it would seem it’s becoming common knowledge that the future of web design really lies in mobile web design.

Here at westfourstreet, we love nothing more than a new project brief which stretches us both creatively as well as pushes our technical abilities further. If you wish to discuss how we could help your business reach a mobile audience, we’d love to invite you in for a cuppa and a chat. Click here to contact us.