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!
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.
Our "Looking good on mobile" service builds on this foundation, and takes the mobile look of your website up to the next level.
Here's what Elly from www.professional-counselling.com said about the changes we made to her mobile site.
BB2 MobilizeIt looked amazing!
However, there were a few issues, which I thought I could sort on my own. I soon realised that although I could perhaps do it, it would take far too much time.
Will took great care in finding out exactly what I wanted.
He did a super job from every perspective - he emailed me regular updates, asking each time to check that I was happy, he was more than happy to make adjustments and completed the job quickly.
My site looks amazing!
It was well worth spending the money, so that I could get on with the tasks that better suited me.
The changes we make are driven by two principles
Here are some examples.
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
And here's the After picture.
We've stretched the length a little so that you can see more of the Nav Bar.
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.
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.
And here's the Header image especially re-made for the mobile page.
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.
Here's the After screenshot,
You can see
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
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!
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!