Optimize Your Website For Mobiles, Smartphones And Tablets

How to offer the best possible user-experience to your mobile visitors when you have created your website? For that purpose, you must first understand the differences between these devices and the impact on your website display. SiteW offers a quick and easy solution to create a responsive website for mobile phones and tablets.

What is a responsive website?

make my website responsive

A responsive website fits all the screens and allows you to get a display that makes reading/browsing easier.

Most people hold their phone vertically to browse the Internet and this means displaying a website on a screen three times narrower than a computer screen.
To create a mobile website, you must consequently rearrange the content to make it narrower. To do so, the text should be contained in a narrower (and thus longer) column and the elements that were placed near each other, should now be placed one above the other.
This results to a much longer page. To solve this problem, the website content is often simplified (there are less illustrations and only the most important pieces of information are displayed).
Please note that contrary to what one may think, there is no need to enlarge the text on mobile devices, because the fact of reducing the website width allows to zoom in and thus to get a bigger view.

On April 21, 2015, Google adjusted its ranking algorithm to give a boost to mobile-friendly pages in Google’s mobile search results. This adds a second reason to optimize your website for mobiles.

The solution offered by SiteW  

To meet this need, SiteW enables you to modify your Computer website without having to create another website.
In addition to the current Computer view, you can create different views for a vertically held phone or a horizontally held phone or a vertically held tablet.
The various blocks of the website must simply be resized in order to be contained in the screen of a specific device and rearranged to be placed one above the other. You only need to use the usual moving and resizing tools of the blocks.

resize, push, move website elements

 To make it easier, we developed a brand new tool that allows you to resize and move a selected block for it to appear in the visible area of the device.

automatic resizing for mobile version

The block content and design are synchronized according to the various views
To make your mobile website easier, blocks can be hidden for this view and blocks can be added (for instance to rephrase a paragraph and make it shorter).
The process is thus very simple and very versatile.

According to the device you use, the most appropriate view will be chosen and adjusted to the screen size, possibly with a slight margin (the blocks that exceed the screen limits in the website creation tool will be displayed in this margin only on certain devices).

SiteW mobile websites are designed to rank higher in Google’s mobile search results.

Switch my website to the Mobile mode

  1. Start with activating the Optimized website mode on the page you want to optimize. In this example, we choose Vertical smartphone. The screen of the mobile device is displayed superimposed on your website page.
    mobile version
  2. Resize and move the blocks in the screen. The tool allows to do it automatically with one or several blocks selected.
  3. Rearrange the blocks so that they display one above the other by using the usual tools.
  4. Hide the useless blocks to simplify your website.
    mobile version customization
  5. If needed, add blocks that will be visible only on mobile devices.
  6. If needed, modify some of the blocks, by duplicating and adjusting their visibility so that the original block is displayed only on computers and its copy is displayed only on mobile devices.
  7. If needed, modify the mobile toolbar. This toolbar is only displayed in the Vertical or Horizontal smartphone mode, it is displayed at the top of the screen and allows to display the website menu and other shortcuts such as Phone call, Contact, link to another page/website, etc. The mobile menu replaces all your website menus. Click on the mobile toolbar to customize the buttons displayed and their position (by using drag and drop on the left panel).
mobile bar customization
Then you just have to redo the steps 1 to 6 for each page and publish.

Update my responsive website

  1. By modifying the content of an existing block on the Computer view, it is automatically modified on every device displaying the block.
  2. If it implies a length modification, you just have to modify the block position on each view. The push and resize tool are very useful to do so.
  3. If you add a new block to your website, it displays only on the active view. You can modify its visibility for it to be synchronized on every device.
Tip-top tip
You can use the multi-selection tool to change the visibility on several blocks at once.

You can see that the process is easy and quick to apply. Your turn to play!

Last update: July 28, 2016