Posts tagged mobile
Posts tagged mobile
Wikipedia defines Responsive (Web) Design (RWD) as “a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”
Often, when discussing a re-design of a website, the owner will be encouraged to consider Responsive Design. Several of the major sites that sell templates offer RWDs. This is good, but it is my contention that RWD is not a solution to all of the issues confronting businesses hoping to improve the way they present across all potential platforms.
A RWD is no more a complete solution than consuming less sugar is a complete solution to our health needs. We may fall for the advertising of some products but we should know (to at least some level) that we need a balanced diet (probably less fat, less sugar and more fibre, and fruit & veg) and exercise if we are seriously striving to improve our overall health.
For a website, RWD is a good first step, but not all RWDs are equal and there are many things to consider, starting with “does a visitor on a mobile device have different needs to other visitors?”
If the answer is yes (and it almost certainly is for most businesses), an understanding of those differences is needed.
The most likely difference is a mobile visitor needs a phone number and possibly a map to help find the business. A desktop visitor might be more interested in researching products. Accommodating these differences is unlikely to be handled by a generic responsive design intended to turn 4 columns of content into a single longer column of content. Yes it will do it simply and gracefully, but it won’t necessarily make the phone number or physical location any easier to find.
Every business is different as is their mix of mobile and desktop visitors. Have you started considering your customer’s needs?
Update: 2 April 2013
I came across this blog post today - How Common Are SEO Problems With Responsive Web Design?. I seemed relevant to the discussion.
We see people using mobile phones and tablets in all corners of our society - trains, coffee shops, libraries and while doing the shopping. We know people are using these same devices while sitting in front of the television. - perhaps as a distraction during he ads or socialising with friends about what they’re watching. These same devices are used in bedrooms - catching up with important reading or even doing some online shopping.
Some of these locations have a reasonable expectation of very low noise.
Image your surprise while sitting in the quiet carriage on your hour long commute doing a little surfing of the web and you land on a page that immediately starts blaring out music. Unless you leave your device on mute you will definitely annoy your neighbours. They tell me there are informal but vigilant noise police on the quiet carriages. Is this sort of (lack of) noise expectation any different with your partner trying to sleep or while others are watching the television or strangers having a quiet chat over coffee.
Please, please, PLEASE, don’t fall for the temptation of playing music as part of the presentation. It doesn’t matter how pleasant the music. It will be an unwelcome surprise for many visitors. Don’t think a volume control on the page is sufficient. There is no standard interface. They are not easy to find, particularly when under pressure. You want your website and business to be memorable. Make it for something positive.
“Language Of Music Really Is Universal” may be a true statement. I’ll leave others to make that determination. But I do know there is a huge divergence in tastes that is impacted by age, race, education and experience. What is pleasant to you may not be to me. This is another trigger point that can impact a visitor’s perception of your website.
For the record, I have no particular beef with Flash, other than it offers very little benefit for a huge overhead. Alright I’m biased .. I don’t like it and it has no place on a commercial website. More on my biases later. First, a recap on how I encountered Flash on a mobile and the implications.
Background (skip to Pitfalls of Flash if you’re short of time)
I’m interested in some professional headshot photographs to replace the self portraits I currently employ. I could go to somewhere and get a passport photo but they are often too sterilised for my purpose. So I did what most people do these days - I reached for a browser enabled device and went to Google. [BTW if you know of a photographer in the Croydon Park, NSW area that does something other than wedding photos and baby snaps, I’d love to hear about them.]
One of the sites that confronted me was built using Flash. It had a landing page proudly announcing the site was built with flash and that I need “screen resolution of at least 1024x768”. Two of the choices available were “- enter full screen -” and - enter same window -“. The meaning of those descriptors wasn’t immediately apparent. Either way it took in excess of 30 seconds from selecting an option and the Flash script downloading and showing the first image. In the image below, the left half is the landing page and the right half was after 30 seconds.
Was it worth the wait? Not to me. At the default resolution of the screen, I still had to expand the display to be able to read the menu before I could find out the range of services offered. Don’t forget I was on a quest for some headshots. I still don’t know if this photographer offers that service. I was not impressed enough to find out. The only value I extracted from this website was the germ of an idea to blog about.
“Pitfalls of Flash
Here’s my list of issues impacting mobile visitors:
I have other concerns that are not mobile specific. Some of these are covered in the Related Articles below.
I think you should avoid Flash entirely. I think it is a very poor choice for presentation to your mobile visitors, and we know they are an increasing portion of internet users. Can you afford to alienate even a small section of your potential client base?
Last week I was adding a comment to a blog post while using my tablet. The comment section was at the bottom of the page as it is on many blogs. A problem arose when the onscreen keyboard is displayed - it overlays the bottom (or quarter depending on orientation) of the screen, making it impossible to see the text I was entering.
The image on the right shows my dilemma. The top half is before the keywoard is displayed. In the bottom half the comment field is effectively hidden.
Of course there are options as a user in this situation.
But these weren’t available to me. It would be some time before I had access to a different device. It’s good to add the comment when the inspiration strikes. So my choice was between giving up on the comment or toggling the onscreen keyboard off and on until finished. I chose the latter. Fortunately I only had a small comment.
What’s the solution for the website developer? The only solution I have at the moment is to make sure your form doesn’t sit hard at the bottom of the display, either by adding some otherwise unnecessary HTML or applying a bottom margin via a mobile only stylesheet.
Anyone following me for a while will know one of my common themes is ensuring your website is ready for the mobile invasion. Just because the majority of your current visitors are still using traditional platforms doesn’t mean that will remain the status quo for very long.
Given that background, I thought it might be good to start exploring some of the practical steps involved to prepare for this revolution.
Today’s topic: reliance on external file formats such as PDF and .doc to incorporate content into your website.
For some time, desktop and notebook browsers have incorporate tools that have enabled these external documents to be presented inside the browser. There may have been some accessibility issues with this approach but for the majority of visitors this integration has been seamless.
Unfortunately, only the very latest of the current crop of mobile browsers support that sort of integration. Those that do probably open a new tab, a method that has it own usability issues on the little screen. For many visitors using a mobile device their only option is to download the file and then display it using a separate app - assuming of course that they have a suitable app available.
“No biggie” may be your first response, but let’s try looking at it in context. Put yourself in the situation of travelling home on public transport and you decide it’s Chinese takeaway for dinner tonight. You’re new to the area so you need to find a restaurant and make a choice. You pull out your trusty Android or iPhone and start searching. You recognise a name of a restaurant recommended to you and visit the website. Oh no! They insist on Flash (as shown in the image). Scrub that one. Let’s try the next one.
This one is not been optimised for mobile but it does load and you can manage to navigate the site. Unfortunately you discover the menu is only available in PDF format. You have no choice but to download the file … waiting, waiting, waiting … finally it’s on your phone. Now you have to leave the browser, find the PDF viewer, navigate to the directory where the downloaded file is stored and open it. You make the final choice and go looking for the phone number. It’s in the PDF file but it’s not clickable.
You can either commit the phone number to your memory (even 8 digits can be a struggle for some of us) or go back to the browser and hope the phone number is clickable.
Phone call made, order given, taste buds tingling … you look up and recognise that you’ve passed your stop. If only the process was a little smoother you might have been on time for dinner. Will you have fond memories of your dealings with this restaurant? The food needs to be spectacular and the service exemplary to offset the struggle so far.
So what could the restaurant do to improve this situation? One simple option is to show the menu in the page (built using HTML) and provide a PDF version for those who would like it.
The recommendation from this first instalment is to re-think the way your visitors might need to interact with your website. Even if you are not yet ready to build a mobile friendly version of your website, you can incorporate some friendlier methods into the current structure, such as not relying on external files to convey critical content.
Image via Wikipedia
In my last post, QR Codes and a coincidence, I wrote about the problem I encountered when attempting to use a QR delivered to my letterbox and the coincidence of reading a Chris Brogan post talking about QR codes and the problem of assuming that implementing them is the essence of a Mobile strategy.
A few days later and I was reading another post about QR codes and potential problems arising from a poor implementation strategy. That post was QR Codes and Mobile Phones: 3 Marketing Blunders to Avoid. I think the points raised are valuable enough to bear repeating. These are the 3 “blunders” identified:
I’d like to add a fourth blunder
I have two broad (and very basic) suggestions for implementing QR codes. These help identify potential blunders before wasting too much time, effort or money:
These suggestion apply to almost any new strategy being considered.