Looking good on mobile

Internet traffic is growing fast, but mobile traffic is growing much faster - around 80%+ year on year according to CISCO. Source - CISCO

Some SBI sites are now getting well over 50% of their traffic from non-desktop devices.

So, making your site mobile friendly is important - and getting more important as time goes on!

SBI provide the Mobilize It! module, and it's a great easy-to-use resource.

You can activate Mobilize It! simply by moving the slider from the OFF position over to the ON position. In this configuration, everyone with a mobile will be served the mobile version of your site.

There's also a TEST position for the slider. When you use this mode, the only people who can see your mobile site, are the ones that you email a special link. Everyone else sees the desktop site. 

So, if you haven't Mobilized It! yet, you should seriously consider it. It just couldn't be easier!

What Mobilize It! does ...

When a web user clicks on a link to your page, the SBI servers check to see what kind of browser is asking for the page.

If it's a desktop browser, the servers send out the regular desktop page. 

If it's a mobile browser, the Mobilize It! code on the SBI servers takes your desktop page, and re-arranges it into a format suitable for a smartphone screen.

• First, your existing desktop Header image is shrunk down to the width of the mobile screen.
  
  
• Next, the code draws the Content Column. Words and pictures are automatically reduced in size to fit the width of the mobile.
  
  
• The desktop Footer is then shrunk to the width of the screen, and is placed underneath the Content.
  
  
• Mobilize It! then moves the regular Navigation bar and the Extra Column down the page, so that they sit side by side, below the Footer.
  
  

Our "Looking good on mobile" service builds on this foundation, and takes the mobile look of your website up to the next level.

What our clients say ...

Here's what Elly from www.professional-counselling.com said about the changes we made to her mobile site.

How we enhance mobile

The changes we make are driven by two principles

• making it easier for your users to read your content 
• making it easier for them to navigate around your site.

Here are some examples.

Custom Navigation buttons

Large clear navigation on the mobile screen is very, very important.

The screen is so small in comparison to a desktop monitor, and your fingers and thumbs are so big in comparison to a mouse pointer, that the size and shape of the navigation buttons is critical.

They need to leap off the page - there needs to be absolutely no doubt in the mind of the user, that the purpose of the buttons is to navigate to another part of the site.

Here's a picture showing the standard look before our changes.

The 3 navigation buttons that looked great on the Desktop are now disappearing off the right hand side of the screen. Luckily the text is still all visible. 

The standard Mobilize It links don't show

• that they are links

• that they can be clicked

• or that they are part of a Navigation grid.

And here's the After picture.  

We've stretched the length a little so that you can see more of the Nav Bar.

• The 3 custom buttons are now centered

• The standard Nav button links have a little arrow-shaped bullet point inside a circle, that is recognized everywhere as indicating that the button will take you somewhere

• The user can now see that they can click anywhere in the grey colored area to activate the button.

Distinctive icons for bookmarking your site on a mobile

When iPhone users bookmark your site, a small square icon is placed on the Home Screen.  It's like a favicon, but it's much bigger.  

Other icons like those from CNN, eBay, Facebook and Twitter, are on this screen, and yours needs to look just as professional.

If you don't make a custom version, the default used by the phone is a scaled down snap-shot of the page, with some text.

But, this icon is part of your brand and needs to look professional.  

We produce this icon and add the code to your site.  Any time a user bookmarks your site, this icon is added to their Home Screen.  

Here are some Before and After pictures showing you what a difference this makes.

Custom mobile Header image

Quite often, the existing Header image just does not look right when it is shrunk down to a smartphone size.  We draw a new one, and change the CSS code so that mobile phones now get served the mobile Header image.

Here are some Before and After pictures of this technique.

This is a snapshot, showing the existing desktop Header image shrunk down to mobile size.

• The impact of the happy couple is diluted when viewed on the small screen.
  
  
• The branding message  - "Your Relationship Matters" and the tag line underneath are difficult to read.
  
  
• The existing logo is still visible underneath the buttons at the very top of the page.

And here's the Header image especially re-made for the mobile page.

• We selected and magnified the most relevant part of the original Header image
  
  
• The Header image was moved up the page so that now, there is no gap at the top
  
  
• The Google Search box was moved to sit underneath the Header
  
  
• The Breadcrumb navigation was re-positioned, but only for mobile viewers

Custom footer section

Here's a picture of the original 1,000px wide Footer as put together on the Desktop.  It contains  3 columns made with the Grid Builder, each containing different content.  

When Mobilize It! is first switched on, the existing 1000px wide footer is shrunk down to the width of the mobile phone screen.  

A lot of the content is lost in this Mobilize It! process.  

In this Before screenshot, you can see that all 3 content boxes are squeezed together onto one line.  

• The left hand column is out of proportion.  

• The center column looks OK.

• In the right hand column, the Social buttons disappear off the right hand edge of the screen.

Here's the After screenshot,  

You can see

• each column has been given 100% of the width of the mobile screen 

• the content is much easier to read

• the boxes line up one above the other.

The screenshot continues on downwards with the Social buttons, but we've cut it short to save space.

You can also choose where to put your Footer.  

This layout can be placed

• either below the Footer, where Mobilize It naturally places it
  
  
• or below the Navigation, at the foot of the page, where most readers would normally expect to find it.

Improving the look of Blockbuilder grids and tables

One of the great things about Blockbuilder is how easy it is to introduce table columns with the Grid button.  

However, you can get some unexpected results when the tables are displayed on a mobile screen.

Take a look at these Before and After pictures below.

The Before image shows how the thumbnails are too small for the design. 

In addition, the vertical alignment of the thumbnails is out of step with the text.

In the After image, the table columns have been replaced with a series of divs.  

This enables the thumbnail image to be increased in size, until they are in proportion to the text.  The vertical alignment has also been altered so that the text and images start form the same baseline.

Overall, a much cleaner look!

Contact Us

Mobile is increasing in importance daily.

You can enhance the look of your mobile site by giving it a professional polish.  

Contact Us  to learn more!