Common mobile web design mistakes

Common mobile web design mistakes
1 March 2012 | | Creative Design, Internet, Marketing, Technology

As mobile internet usage increases, it is very important that your dental practice has a mobile website.  A mobile website can bring your practice many advantages – if planned and designed correctly! One of the most important factors relating to mobile websites is page loading time – The majority of people will be viewing your mobile website, from a mobile device while on the move. Often they may not be connected to a wireless internet, and therefore they will be using their mobile phones internet (such as 3G for the Iphone), which will not be as quick a connection as a desktop PC connected directly to an internet port. That means that loading must be reduce to the minimum possible, to ensure that potential customers viewing your mobile website will not have to wait long for your site to load on their mobile device. The following article explains best practice further…

Mobile Internet usage is on the rise, and the world of Web design continues to evolve—so designers must learn to accomodate mobile devices. Thinking “Oh, my users won’t visit my website on a mobile device” is the worst mistake of all.

No one can stop mobile usage from increasing, and the odds are that every website will receive visitors on mobile devices. So, the best strategy is to be as prepared as possible.

Just thinking about mobile users isn’t enough to address the situation. Many mistakes are still committed during the process, and knowing what they are is the first step in effectively avoiding them in future projects.

The following are the most common mistakes on mobile websites.

Not accounting for device width

You should understand the maximum width that elements on a page ought to have, as well as be able to format an entire HTML document to account for various screen sizes.

In the screenshot above on the left, the website is formatted for variable device widths, but its elements are not. The website on the right is not formatted for variable device widths, so its elements appear far too small. Even if the body element was set to a narrower width (320 pixels, for example), it would just get pushed to the far left of the screen and still be small and unreadable.

Making users fill out long forms

Filling out forms is annoying even on desktop computers, and it’s even more tedious on a mobile screen. Designing a web form for mobile devices is a complex task; focus on building simple forms that don’t ask much from users.

Set the type of input being requested from the user, so that the keyboard has the elements that the user needs when they focus on the field. For example, setting a field’s input type as number will set the keyboard to display numbers by default, instead of letters.

Not reconsidering content

Transferring content from big-screen web environments has come to involve its own strategy, like when content had to be transferred from print to web. Space and focus constraints on mobile devices are far more significant than those on computers.

Luke Wroblewski’s “design for mobile first” methodology defines a strong approach we can take. It discourages us from generating one set of content for the desktop web and another set for the mobile web. A mobile design team should consider whether content that will not appear in the mobile version is even necessary? Perhaps it doesn’t even need to appear in the desktop version.

Using content for decorative purposes or just to fill space almost guarantees that it will be removed later, so why not consider just essential content from the beginning?

Going through this process can uncover other common mistakes and problems.

Eliminating content and functionality for no reason

Revising content can be tricky, and tight schedules can force it to happen faster than it should. This often results in removing content and functionality erroneously—in fact, almost at random.

The process involves in-depth analysis before the editing and curating begin. Existing content needs to be reviewed in order to separate content that adds value and meets users’ expectations from content that just distracts or fills up space.

To better understand the strategy of generating and editing content, check out the book Content Strategy for the Web by Kristina Halvorson. It covers every detail, from basic content strategy to auditing and editing substantial material.

Forgetting the size and limitations of a finger

When using a computer, we use precise mouse clicks for every task. We’re able to easily click on a 16 × 16 icon; the process involves no hardships.

A mobile user, on the other hand, has the precision of a finger—a finger that’s almost never thin.

Apple has decided on 44 pixels as the minimum acceptable size for mobile controls (44 × 30, to be precise) and has implemented this standard across its products.

In addition to the size of elements, the space between those elements is often ignored. Think of a list of options, each accompanied by a radio button, with a line height of 0 between them. Users are bound to make mistakes, even if they take their time. Why would we complicate things in this way?

Luke Wroblewski has perhaps gone further than anyone in identifying standard sizes for mobile design, by compiling recommendations from several platforms. According to the Windows Phone UI and Interaction Guide, the standard size between elements should be 8 pixels, minimum.

Long page-load times: Heavy image files

Heavy image files have been a problem from the beginning in web design. And the mobile web presents even greater challenges, because loading times tend to increase when you combine the limited capabilities of some devices with variable data-transfer signals (which depend on the type of Internet connection).

Image optimization also continues to be an important consideration in mobile design.

Long page-load times: Too many images

Many small images pose the same handicap as a single heavyweight image.

This is especially a problem when designers try to emulate the look of native smartphone applications, including the gradients and rounded corners of iOS headers and buttons.

Not taking advantage of CSS3 and HTML5 capabilities

Many kinds of images can be avoided altogether now that HTML5 and CSS3 are around. Plus, mobile browsers give us a lot more freedom than desktop browsers because almost all of them were built on the Webkit engine, which supports both HTML5 and CSS3.

Why not take advantage of this? The <canvas> element in HTML5 can reduce the need for images, as can the new CSS3 properties that provide basic styles like gradients and rounded corners. It’s a major way to save on page-loading times.

Enough with the graphics now. Using too many images isn’t the only way to damage a mobile design, and images aren’t the only things that slow it down, either.

Long page-load times: Too many imports

We see this mainly with frameworks (and plug-ins for those frameworks). Let’s face it: it happens a lot now, and it has been happening since the arrival of the oh-so-necessary-and-helpful AJAX frameworks such as jQuery and MooTools. jQuery developers even went so far as to create a mobile enhancement called jQuery Mobile.


More posts from our team

Previous Post:
Next Post:

Back to all news

Five Star
Reviewed Marketing
5 gold stars
google review logofacebook review with 5 stars
"Excellent service from James at Dental Design, thank you very much for your prompt attention whenever I get in touch! Would definitely recommend to a friend" Alison Tarmey View Full Testimonial
Google reviews logo "Would definitely recommend to a friend"
5 gold stars
"As a dental practice manager I cannot recommend Dental Design highly enough. They are just brilliant at what they do. Lucy and her colleagues are just an email or a phone call away...." Emma Smith View Full Testimonial
Google reviews logo "I cannot recommend Dental Design highly enough"
5 gold stars
"Really great company to deal with. They always respond quickly and are truly reliable. I would 100% recommend, the staff are so friendly and helpful." Michelle Molloy View Full Testimonial
Google reviews logo "Really great company to deal with"
5 gold stars
"I got increased traffic and new patients applying to my surgery, once Dental Design upgraded my website. They are very professional, efficient & adaptive to new situations..." Joanna Gallop View Full Testimonial
Google reviews logo "Very professional, efficient & adaptive to new situations"
5 gold stars
"Lucy has been a star, responding to and acting upon our requests in a prompt, efficient and professional manner, as well as the rest of the Dental Design team..." Abhay Shah View Full Testimonial
Google reviews logo "I cannot recommend them highly enough"
5 gold stars
"...Since the website has been up and running Lucy Mander has been our point of contact. She has been invaluable and gone out of her way to help us, especially during COVID-19 lockdown... " Lucy Jones View Full Testimonial
Google reviews logo "Has been invaluable and gone out of her way to help us"
5 gold stars
"Thank you for all your help and support, and the provision of valuable learning aids for our patients and staff alike in these difficult times. We love the look of our practice website. Very professional!" Sandra Luck View Full Testimonial
Google reviews logo "We love the look of our practice website. Very professional!"
5 gold stars
"Dental Design stood out both in their knowledge of the industry and their professionalism and can-do attitude. All of their staff are exceptionally competent and knowledgeable..." Harvey Rook View Full Testimonial
Google reviews logo "Dental Design stood out both in their knowledge of the industry and their professionalism"
5 gold stars
"Having done extensive research into all the dental website companies, the team and package offered at dental design was unrivalled..." Neil Shah View Full Testimonial
Google reviews logo "The team and package offered at dental design was unrivalled"
5 gold stars
"The team at dental design (especially Rosie) are absolutely fantastic and are always on hand to help. They are professional, friendly and extremely efficient. Rosie always gets back..." KiKi Wilmot View Full Testimonial
Google reviews logo "absolutely fantastic and are always on hand to help"
5 gold stars
"Dental Design are fantastic to work with, our website is amazing and the support they provide is second to none. Our account manager Rosie L is a fabulous point..." Luke Lucas View Full Testimonial
Google reviews logo "Dental Design are fantastic to work with"
5 gold stars
"Having worked with the Dental Design team for the last six months, I've found them not only helpful, but friendly and approachable too. I bombard Marcus with regular..." Sophie Harper View Full Testimonial
Google reviews logo "always met with a swift and professional response"
5 gold stars
desk with branded documents