Designing A Mobile Site

In a previous article, we talked about the development of a mobile website and everything you need to know about building it from the backend. Today, we will discuss how to design a mobile website, including the terminologies you need to understand in able to create a responsive design.

It is no secret that designing a website that will be consistently displayed across multiple platforms is not the easiest task in the world. However, having a deeper understanding and sticking to web standards will help bring you closer to being the best web designer. 

The first thing you need to keep in mind is that your mobile site should be designed so the information your audience wants is not only in display but is always easy to get to. In a mobile website, there is limited screen space. So you want to make sure that every space in that screen is filled with valuable information.

Due to the limited screen space, you cannot necessarily have the full site navigation on each page. That means you need to ensure that the information architecture of your site is logical, the use of navigation should be in line with what your site visitors need. 

Here are a few benefits to mobile development that can help you get around this dilemma. Check them out below:

Standards

Currently, there are only a few mobile standards in place. Creating valuable content that can be rightfully formatted on most phones is not entirely possible. Valuable content such as images, texts, that can be displayed on a website all at once is not entirely the same for mobile phones.

To create the perfect layout for your mobile site, you will go through a certain amount of trial and error. It is a long process, but it is certainly worth it in the end. Remember, there are almost 3.4 billion unique mobile phones in the market today, and they keep making new models each year. A fair number of these phones can be used to access the mobile web. 

When you’re designing a website, be sure to check how it will look like on mobile phones. It is also worth it to recruit contacts with different handsets so you can see the difference in the display for each model. 

Responsive Design: Things to Consider

When you’re creating a responsive website, remember that it should be designed for a wide range of screen widths. When you first start planning your website, be sure to consider your customer base first. Consider the following:

• What percentage of your website traffic comes from specific mobile devices? For instance, if a large number of your audience base is using an iPhone, consider building a dedicated mobile site for this model. 
• Do your desktop and mobile users have the same goals? If their goals are very different from each other, it might be a good idea to consider building a separate mobile site.
• Consider your budget, too. Responsive websites are more expensive to build. Yes, you will save money in the long run by building a responsive website, but it does require a sizeable upfront investment. 
• How quickly do you need it done? Again, responsive websites take longer to finish. The design is just more complicated.
• Do you already have an existing website? If so, you can convert this into a responsive website. Or, it can also be rebuilt into one.

Responsive Design Terminologies

Additionally, here are three concepts you need to be familiar with when it comes to responsive mobile design terminology:

Flexible grid 

Responsive design is not the same as typical websites that are designed as a large, centered, fixed-width block. Responsive websites have the page elements arranged in a grid of columns that have predefined spacing. These elements include the heading, the text or body, the main image and other blocks of the information displayed on your website. Each element of responsive design is proportionally related to the other elements.

In a responsive website, the elements rearrange in relation to each other based on how big or small the screen is. Sometimes, it is also based on-screen quality. 

Media queries

These are bits of code which allow a website to ask the devices in use for information about themselves. The technology we have now is so smart that the media queries are able to do this, and select the website style suitable for the device automatically. It asks information such as the device’s window size, orientation, and screen display quality. The media query chooses from a list of styles defined in a CSS. 

Flexible images

With the flexible grid of responsive design, images are designed to move and scale. An important thing to consider is how fast the website loads, this allows high-quality images to be available for larger screens. Additionally, images with lower resolution are also made available for smaller screens. 

Now that you have read the terminologies, it is important to remember them and fully understand them. These terminologies will help you communicate with your web designer and web developer better.

Remember that when it comes to planning and designing a site (mobile or not), the first thing you need to consider is your audience or user’s needs. Everything will be planned and designed after the user’s needs. 

The design of a mobile site goes hand in hand with the development. These two work in tandem in able to create the best user experience for your audience. It takes a lot of time and patience for this operation.

It is also important to go through the testing (trial and error phase) as we discussed in a previous article, Step-by-Step Guide to UX Design. This will help you determine which parts of your site works best, and which ones your site could live without. This process will also help you determine which parts of your site converts the most users, and which ones are not working for your campaign.

In the next article, we will give you a step-by-step guide to building a mobile website from the client’s perspective. 

© Image credits to Steve Johnson