Designing and building your own website is exciting but can also be challenging. When starting out, you’ll need to think about designing site for both desktop and mobile visitors to your site. You may want to prioritize your website’s mobile experience as this is the primary device used to access the Internet today.
When thinking about designing your website experience, prioritising mobile over desktop could be advantageous, especially if SEO is important to you. Google and other search engines prioritize mobile pages over desktop pages in search results.
So, when creating mobile pages for your website, here are a few suggestions on how to make the best experience for your visitors whilst meeting your own goals…
- Website Page Layout
When starting your website you will need to first decide on the type of website you want to build: Fixed Width and Responsive.
A Fixed Width design is one where the width of your website’s pages are predefined. This may mean that you need to develop two or more pages that have the same function. For example, imagine that you are creating a Home page for your site. You will probably need to create a Home page for visitors using mobile devices, in this instance the page width would be about 480 pixels. You will also need to create a comparable Home page for desktop and tablet devices, this time with a page width of about 980 pixels. The reason for having two types of page is that if you displayed a desktop page on a mobile phone it will be too wide and the content too small to be easily displayed. You would also have problems when viewing mobile pages on a desktop device too. Therefore, Fixed Width design requires dedicated mobile and desktop pages.
To make sure that your visitor is always taken to the correct page type, you have link the mobile page to its desktop equivalent page in EverWeb. When you publish your site, EverWeb will create the code needed to always direct the visitor to the correct page type.
The second page type is Responsive. This page type scales automatically to fit the device that it is being displayed upon. Content on the page is reordered to make sure that it fits properly at all times. Using this page type means you only need one page design. However, you do need to make the design so that all of the objects always scale properly. As such, Responsive website design is conceptually more difficult to learn than fixed width design, although in the long run it is the preferable choice.
If you’re new to EverWeb, you can choose either option. Although our recommendation is to create a responsive style website, you may want to start out by designing a fixed width website so that you get used to EverWeb first before getting to grips with responsive page design. Checkout EverWeb’s videos on designing a website for more information about both page layout types.
- Design Approach
When designing your website you will probably need to use different approaches to the design of desktop and mobile pages. Mobile pages should be uncluttered and focused on one function, purpose and message. Text content may be more in the form of summarized information rather than long articles. Desktop pages, on the other hand, have more canvas and so are better suited to longer, more in-depth content. Desktop pages should still be focused, but there is more scope to include a secondary idea, in addition to the primary idea, to the page. So, keep your thinking flexible and always question what will work best on mobile devices and what works best on desktop devices.
- Less is More
When designing a mobile page, it’s always good to remember that “less is more”. Mobile devices have less space to display content than their desktop counterparts, so design your pages accordingly. A clean, simple, uncluttered design approach usually works best. Use bold, easy to see titles and have the text content of the page large enough to be easily read (e.g. use a 16 point or larger font size). If you have developed desktop pages, think about what can be stripped out for the mobile version of the page e.g. you could reduce a long text article to a more summarised version on mobile. This approach applies to both fixed width and responsive page designs. Often web designers prefer to design their mobile pages first, then ‘upscale’ their desktop pages afterwards.
If your mobile pages do need to include a lot of content, you may find it easier to break up the content across several pages, with links between each page. In this way you don’t subject your visitors to one really long page to scroll through! Links on mobile sites are usually created as ‘Call To Action’ type buttons. A button is a highly visible way of focusing your visitors attention on where you would like them to go next in your site!
- Mobile Phone Ergonomics
It’s easy to forget the ergonomics of mobile devices. They’re hand held devices so you need to accommodate the form factor in your page design. Keep the left and right page margins clear as this is typically where your visitors will be placing their fingers and thumbs! Focus your content on the center of the page.
The top of the page be where you place the navigation. For mobile pages, use a Hamburger icon style navigation as there is not enough screen real estate for a traditional navigation. You can find the Hamburger option in the Widget Settings of the EverWeb’s Navigation Menu widget. You should also make sure that the navigation is always visible as the user scrolls the page. Checkout EverWeb’s videos on how to do this for both fixed and responsive layouts, or checkout our blogs on fixed and responsive navigation.
If you have a long page, add in a button at the end of the page that scrolls your visitor back to the top of the page. a button is good to use as it’s more visible than link text. For fixed width sites use the scroll position line. For responsive websites, it’s recommended to wait until EverWeb 3.2 is released which should allow you to add a scroll position to an object, therefore enabling scroll position to work properly with this page format.
- The Need For Speed!
Using images in your pages can be a great way to save text space but should be used wisely. When using images, make sure that they’re optimized so that they load quickly. There’s nothing worse than a slow loading page, it just encourages your visitors to click away from your site.
When bringing a large image file into EverWeb, you may be asked if you want to import it at its original high resolution or if you would like to convert the file to ‘web resolution’. Using a web resolution file will help keep page load times faster without sacrificing image quality too much.
- Don’t forget SEO!
As we’ve already mentioned, mobile devices now get priority over desktop devices, so a well designed mobile site is a must. But it’s not just what your visitors see that’s important, there are also background tasks that you should perform to improve the visibility of your site on the Internet. This is where the importance of Search Engine Optimization (SEO) comes in. If you want the best search engine page ranking for your website, invest some time in the SEO for EverWeb Video Course.
- Avoid Intrusive Popups
When creating a mobile site, it’s best to avoid popup content that covers the page. It’s intrusive and annoying for visitors to your site. Use Call To Action buttons in your site to encourage visitors to go where you want them to.
Mobile website design is a must for anyone creating a website. Keeping a clean, simple mobile first should help you get the best from your website and will encourage your visitors to return again and again!