For years folks have heard of cookies on the world wide web and wondered why they needed to get rid of them sometimes because, well who doesn’t like a tasty cookie?
Now there is a new food that is all in vogue. It is hamburger. You’ve probably seen the hamburger icon, especially when you surf on your tablet or phone. What is the hamburger? It’s the little icon for the menus:
You can see the bun on the top and bottom and the hamburger in the middle. And it just means that there is a menu waiting for you to see when you touch or click on the hamburger.
It is a convenient way to take a long horizontal menu and compress it for easier navigation on the mobile web.
As we monitor our customer’s sites we are seeing, understandably, a huge increase in traffic from mobile devices. What does that mean for your web site? What does that mean from a design perspective?
First it is important to understand that tablets (iPad, Kindle, Surface, and a variety of Android tablets) are considered mobile devices. So when we’re talking mobile devices, we’re talking everything from a BlackBerry (probably having the smallest screen) to the iPad and larger tablets.
It can be a nightmare trying to make things work across all these platforms. “it can’t be that bad.” You might be thinking. But you’re wrong. One of our sites has had over 350 mobile devices visit their site. 350.
Once upon a time we designed and tested our sites in three to five browsers and at least two different platforms (like Windows and Apple). Now the rules have changed.
If you are changing or updating your site, you’ll want to ask your web firm if your site will be mobile-friendly. But that phrase “mobile-friendly” can mean a lot of different things.
Here is what you should be aware of when planning for mobile:
- Often it is fine if your site simply appears small and can be pinched or unpinched to zoom in and out
- Navigation is different. If you have drop down menus on your site, test them on mobile. Often dropdowns work with a hover or mouseover. There isn’t a hover or mouseover on mobile.
- If you need a look substantially different from the desktop view for mobile devices, be prepared to spend more as you’ll essentially be designing two versions of your web site
- Make sure your web firm is using Cascading Style Sheets (CSS) that detect browser version and can serve up the mobile changes for a mobile device
- Be prepared for additional changes in the way people interact with their mobile devices (and therefore your mobile-friendly website) over the next 18 months. The only constant in web site development is change.
Do you look in the mirror in the morning? Do you look to make sure everything looks fine? How many angles do you look at?
Designing web sites requires that you look at a lot of different angles. Once upon a time, we only had to check two or three “angles” – looking at the sites we develop in browsers like Internet Explorer and Netscape – then to be replaced by Firefox.
Now we have to check from a wide variety of different angles. While we no longer support IE 6, we do get requests from time to time to make sure the site looks good in IE 7 (if you are using IE 7, you should upgrade as it is less secure than 8 or 9). We also design for Firefox – typically if it looks good in one version it looks good in any version, Chrome – which is biting into both IE and Firefox’s share of the browser market, and Safari which is pretty much holding its own this year with anywhere between 3.6% to 4.2% of the market.
The new angles that we have to consider carefully are all the handheld devices. Android, iPhone, iPad, Xoom, BlackBerry and more. And much like a fun house mirror makes you look very different, your web site often looks very different on a handheld device.
Handling the different looks takes forethought. Our preferred solution is to give a very different look to the content. The general example I like to use is 9news.com. Visit their site on a computer and it is very visual with lots of video links – which is very understandable considering it is a TV web site. But visit it on a handheld and you’re taken to a site that looks much less visual and instead delivers the news in a text format. I’m not sure whether 9news has two separate sites or just uses cascading style sheets to present two different looks.
This last option, using cascading style sheets, is our preferred method to handle the handheld “angle” because then you only have to develop one web site and simply display it in two different ways. Have you checked out your web site from different angles?
Tuesday, July 19, 2011
“Is Your Site Mobile Ready? How Do You Know?”
Pay online to reserve your spot >>
- Do you know if your site is mobile ready?
- What does mobile ready mean, anyway?
- Should your site be mobile ready?
- Do you need to have a separate site for mobile users?
These days everyone wants to make sure their web site is “mobile-ready”. But what is mobile ready? Is there one definition or is this a moving target?
How can you make sure you’ve got your bases covered? Come and check out this seminar to find out what the basic (and not so basic) steps are to make sure your site is indeed ready for mobile, no matter what the device is that is accessing your site.
Who should attend this seminar?
CEO’s, COO’s, Marketing Directors and IT Directors. Those
who make decisions regarding the company’s web presence.
Location: 4251 Kipling St.
(2nd Floor Conference Room)
Time: 7:30 – 9:00 am
Cost: $24.99 (includes a light breakfast)