X
Sign Up Here
Keep me logged in
Forgot your password?
Sign In
Ok
Home GinWiz Blog Mobile Version of a Website, Create & Design a Mobile Site

Mobile Version of a Website, Create & Design a Mobile Site

Hello there readers. In this post we’ll take a quick look at the main difference between a desktop site and a mobile site (from a user’s perspective) and the reason behind this difference.

The Shift in Web Surfing Habits

Up until recently, the overwhelming majority of web surfing was done via desktop machines.[1] These have large screens and relatively strong processors that allow them to elegantly handle and display large amounts of data at once. Websites designed with the desktop user in mind hence generally have no qualms about serving visitors pages packed with text elements, high resolution graphics, and Javascript components. Just picture in your head any of the sites you’ve been visiting over the previous decade. Probably most of them contained an array of data laid out generously across the screen.

With the advent of the mobile device as a web browsing medium though, website design was required to change. To see how so, let’s read on.

The Limitations of the Mobile Device

You may or may not have noticed, but at this point in time, the main characteristic of the mobile device is its diminutive screen size. For anyone serving web content to visitors, this is a major factor that must be taken into consideration.

On the average, smartphone screen sizes run at roughly 4-5 inches. That’s about a quarter of the size of a desktop machine’s (assuming that most desktop screens run at 19 inches or so). A small screen on mobile basically means that a site must be laid out vertically in order to be displayed sensibly on a device. What do we mean by that?

Let’s have an example. The WSJ is a popular online business news outlet. There’s a good chance someone, somewhere, at any given time is accessing it via a mobile device of some sort. Let’s see what the site would look like through a 4.5 inch display:

 

Desktop-site-seen-via-mobile-device

 

 

What have we here? You probably can’t make out much of what’s written in the screenshot even though it’s laid out in landscape for us. In order to read comfortably any given section, we’d have to zoom in. And so we do. Let’s have a look (I shifted to portrait and used an iphone):

 

Desktop-version-of-a-site-in-mobile-device

 

Notice how after having zoomed in, the majority of the site is out of vision, and we’d have to either scroll horizontally or vertically to get to other portions of the site. For instance, I caught a headline earlier on the other side of the page that I now wanted to read, forcing me to zoom out and then in to access it:

 

Desktop-version-of-a-site-in-mobile-device-2

 

Chances are most users won’t have too much patience for this. It’s simply inconvenient and time consuming.

Vertical Design

When designing for mobile, the focus should be on providing a smooth browsing experience. That means serving web pages that aren’t loaded with resource consuming components, and saving the user the trouble of manually configuring page display so that he can view content comfortably. For the latter, this is accomplished  – as the screen is so much smaller –by not laying out components horizontally, one beside the other, but rather vertically – one component per the width of the page .

Let’s have a look at what we mean by vertical layout. Here’s the same WSJ site as it should (and can) appear on a mobile device (barring a few styling issues):

 

Vertical design: mobile version of website

 

Data is laid out for the user using the full width of the screen. Only one component at a time is displayed horizontally. There’s no room or need for scrolling left or right. To get to other elements on the page we simply scroll down (or up):

 

Vertical design: mobile version of website 2

 

Each news item is captioned by a heading followed by a few lines of text to give the user an easy way to view as much content as possible in the easiest possible way. We can now proclaim that the site has been adapted to its surroundings and is in its ‘natural habitat’. A site can therefore have copious amounts of data and all the while still keep itself easily navigable for users.

To Sum Up

We set out to sketch a general outline of the web browsing experience on a mobile device. Website owners should take into account devices’ smaller screen sizes so that their sites will be viewed comfortably by users. When designing a site for mobile one of the focuses should be on vertical layout. That means displaying one component at a time horizontally. That way, users can easily navigate a site’s contents with maximum ease.

Read more about mobile website design

Build a mobile site with GinWiz right now.



[1] I use the term “desktop” liberally. I refer to laptops too.

 

You must be logged in to post a comment.

Convert your website to mobile easily with GinWiz!. In a few simple steps, you can make, build and create a mobile version of your website and make it completely compatible with different systems and devices, no matter if it is a simple site or an ecommerce one. Smartphone friendly, mobile friendly create a mobile website for FREE with GinWiz's builder.