Mobile web development tips & advice

For topics about current BETA or future releases, including feature requests.
Post Reply
User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3242
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Mobile web development tips & advice

Post by Albert Wiersch » Tue Sep 03, 2013 10:13 pm

BACKGROUND: Today, more people are accessing websites with mobiles devices, and less are accessing them with desktops and notebooks. It's important that your website work well when accessed by mobile devices with a smaller screen, limited battery life, slower processor, and a slower speed (and possibly metered) network connection. You don't necessarily have to design an entire new site (but you can if you want). There are many things that can be done to make your "old" website more mobile friendly, many of which will also benefit desktop users. After all, a website can never be too fast, can it?

Improving mobile support should also improve a user's experience when they use lower powered browsers like those in game consoles, web-enabled TVs, and in-car browsers. These browsers will work much better with lightweight sites than bloated sites.

And don't forget that in some parts of the world, a slow wireless network connection and lower-end handset may be the norm or even the only option for most people.

Improved mobile support is being added in the next major release of CSE HTML Validator. As part of that, I have done some research to come up with some tips, advice, and "best practices" that will be given in the new "Mobile" message category when mobile checking is enable.

Please comment on any of them. Any suggestions for more, or to improve the ones below would be great. Also, please let me know if you think any of them might be getting out-of-date or might not be that useful.

I plan to choose one of these and display it randomly when mobile messages & checking is enabled, similar to the SEO tips that are displayed when SEO checking is enabled.

  • Use flexible designs that respond to differences in viewport size.
  • Limit or avoid unnecessary JavaScript animations. Consider CSS animations instead (but they'll be ignored on browsers that don't support them).
  • Limit or avoid the use of large or bloated JavaScript libraries, especially when not necessary.
  • Always use valid, well structured, logical, terse, meaningful, and efficient markup, with proper headings and sub-headings. Check the markup for errors and for possible improvements (like with CSE HTML Validator).
  • When designing a new layout, design for mobile first, then use @media queries and JavaScript to progressively enhance the style or layout for more capable browsers, like desktop browsers.
  • Be sure to use appropriately sized and compressed images. Images that are unnecessarily large reduce performance and increase data transfer.
  • Use the power of @media queries. Don't try to design a site layout without first being familiar with them.
  • Avoid downloaded fonts because they may not be supported. If they are supported, then they take additional time and data transfer to download.
  • Compress content (especially images) where possible, remove redundant and unnecessary whitespace in HTML and CSS, and avoid sending unnecessary data. This will increase performance and reduce data transfer.
  • Avoid fixed widths and absolute units (like "px") in favor of relative widths (like percents and "em") wherever possible.
  • Include an icon (129x129 is recommended) called 'apple-touch-icon.png' or 'apple-touch-icon-precomposed.png' in your website root folder. This icon can be used by iOS to represent your web application or webpage, like when a user saves a web page to their home screen.
  • Consider using CSS3 gradients instead of background images to increase performance and reduce data transfer.
  • Consider using CSS3 rounded corners and CSS3 gradients instead of button images to increase performance and reduce data transfer.
  • Avoid Flash content. Many mobile devices and even some desktops don't support it. If you must use it, then make sure it's not essential for the main function or purpose of the page, or provide a redirection mechanism to a non-Flash alternate site.
  • Avoid large pages that may require excessive scrolling or excessive memory use. Consider splitting up long pages into usable but limited size portions with 'next' and 'previous' buttons, but don't make pages too short either.
  • Test mobile sites on actual devices as well as emulators. Test on as wide a range of real devices and emulators as is practical.
  • Don't use excessive navigation at the top of a page; use basic (minimal) navigation instead. If needed, more navigation can be placed at the bottom of the page. This allows for quick and easy access to the content of the page without scrolling.
  • Design websites so that frequently accessed information can be easily reached with a minimum number of page retrievals (ideally 4 or less). This is good practice for any website, not just mobile ones.
  • Limit the number of externally linked resources (such as images, style sheets, scripts, and other objects) to a minimum to reduce load time and data transfer.
  • Ensure that page content is suitable for use in a mobile context. Use clear and simple language and be brief and direct. Limit the content to what the user requested and provide appropriate (the most useful or desirable) information first. Don't overload the user with extraneous and excessive information and advertising.
  • Layout the page so that page scrolling is limited to one direction. If an object causes scrolling in another direction, then it should not cause the remainder of the page to also require scrolling in that other direction.
  • Content that is central to the meaning of the page should appear before content that is not. Avoid excessive clutter before the meaningful content, including excessive navigation, advertising, decorative materials, etc.
  • Use color and contrast that is sufficient for mobile users. Don't rely or depend on color, as some devices may not support color, or, for those that do, the color may be hard to see. Also, make sure sufficient contrast is used. Mobile screens, as well as the lighting under which they are viewed, can vary significantly.
  • Use style sheets to control layout and presentation, and keep the style sheets small. If supporting mobile devices that may not support style sheets, then make sure pages can be read and used when there is no support for style sheets.
  • Encode HTML, CSS, and script documents using UTF-8, and indicate that in the HTTP 'Content-Type' header. Example HTTP header: Content-Type: text/html; charset=utf-8
  • Any error messages provided to the user should be informative, clear, and concise to the non-technical user. The error message should indicate whether the error is likely to be temporary or permanent, and should provide an easy way for the user to go back, retry, and/or to return home to the main part of the application.
  • Because input is generally harder on mobile devices, minimize input that requires typing. Consider selection lists, radio buttons, checkboxes, and other controls that do not require typing, and provide default values and selections where possible. Use the "inputmode" attribute on "input" and "textarea" elements where appropriate.
  • Use the 'Vary' HTTP header when redirects are based on the user-agent and test all redirects to make sure they're not faulty. For example, don't redirect mobile users to a desktop site and vice versa, and don't redirect Android phone users to a mobile site while failing to redirect iPhone or Windows Phone users. Make sure users end up on the page they're looking for.
  • Increase your website's speed! Users don't like to wait around for slow sites. A website's speed is very important for a positive user experience, and is especially important on mobile sites. There are many techniques to reduce page size and weight. Be familiar with them and use as many as possible.
  • If using different desktop and mobile sites then beware of bad or irrelevant cross-linking between the two sites. Users should not unexpectedly be sent to a desktop site from a mobile site and vice versa. When the cross-link is desired, make sure that the link takes the user to the correct, relevant, and equivalent page, and not simply the homepage of the other site.
  • If using different desktop and mobile sites then include links to the desktop site on every mobile page so users can easily switch to the standard/desktop site (and vice versa). Remember the user's choice in a cookie or in localStorage.
  • To make pages appear faster, place "script" elements as far down in the source as possible and/or use the "async" and "defer" attributes if you can. This is because browsers pause to download and run scripts when encountered.
[/color]
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Mobile web development tips & advice

Post by RSteinwand » Wed Sep 04, 2013 10:05 am

Hi Albert,

Good advice.

How about:
  • Consider using CSS3 gradients in place of background images. They can greatly reduce web page weight.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3242
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Mobile web development tips & advice

Post by Albert Wiersch » Wed Sep 04, 2013 10:45 am

RSteinwand wrote:How about:
  • Consider using CSS3 gradients in place of background images. They can greatly reduce web page weight.
Thanks! I'll add that.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Mobile web development tips & advice

Post by RSteinwand » Wed Sep 04, 2013 10:59 am

  • Did you know that CSS3 rounded corners and CSS3 gradients can be used to replace button images for mobile use?
:mrgreen:
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3242
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Mobile web development tips & advice

Post by Albert Wiersch » Wed Sep 04, 2013 11:34 am

RSteinwand wrote:
  • Did you know that CSS3 rounded corners and CSS3 gradients can be used to replace button images for mobile use?
:mrgreen:
Thanks! Added that one too.
Image
Albert Wiersch

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3242
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Mobile web development tips & advice

Post by Albert Wiersch » Sun Sep 08, 2013 8:22 pm

I've been reading Mobile Web Best Practices 1.0 which is over 5 years old now. Mobile has changed a lot in the last 5 years and I can't help wonder how out of date some of there recommendations may be. However the document is still giving me some ideas and some of the recommendations can be "updated".

Here are my thoughts:
1. When developing for mobile, what is the lowest device people target these days? Browsers on mobile phones have come a long way.
2. However, even if today's mobile browsers are fairly advanced, there may still be many older devices out there, especially in non-1st-world countries. These older devices can have fairly obsolete (very limited) capabilities.

I'm thinking it is not worth it to provide suggestions or help for developing for mobile browsers that were "before the age of touchscreens".

I suppose more research is in order, but if anyone has any comments about the above, I'd love to read them. :)
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Mobile web development tips & advice

Post by RSteinwand » Mon Sep 09, 2013 8:55 am

Hi Albert,

Here's my thoughts:

Some things will never change. The screen will always be smaller, the networks slower and processing power limited. So the use of heavy images and scripts need to be considered. I doubt that part has changed from 5 years ago. I blogged about this last May: http://www.intercepteft.com/blog/rick.html#post17

Regarding mobile images, many gradients on small screens can hardly be distinguished from a solid background for buttons, nav bars and other small areas, and you won't need mouse-over images either. I use different sprite images for mobile and desktop on our public side, dropping the buttons and mouse-over images for mobile.

Regarding older devices and 3rd world countries, you have to consider your market. I doubt anything older than a DroidX or an original iPhone would be used for our website, both of which might be slightly newer than your 5 year old link. Bear in mind, like old XP computers, it's often possible to install a newer browser, although it'll still be limited by the same, slow hardware and a laggy 3g network.
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Mobile web development tips & advice

Post by RSteinwand » Mon Sep 09, 2013 3:05 pm

Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3242
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Mobile web development tips & advice

Post by Albert Wiersch » Mon Sep 09, 2013 5:17 pm

RSteinwand wrote:More reading matterial... :D

http://mobiforge.com/designing/blog/the ... ing-google
Hi Rick,

Thanks. That looks like good stuff. I plan to go over it in more detail, probably tomorrow.

In the mean time, I've updated the original post with the latest list of tips & advice.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Mobile web development tips & advice

Post by RSteinwand » Tue Sep 10, 2013 6:53 am

That's getting to be a long list. :D

Found another good read by an Opera employee: http://mobile.smashingmagazine.com/2012 ... -websites/
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3242
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Mobile web development tips & advice

Post by Albert Wiersch » Tue Sep 10, 2013 11:43 am

RSteinwand wrote:That's getting to be a long list. :D
Yep, it keeps growing.
RSteinwand wrote:Found another good read by an Opera employee: http://mobile.smashingmagazine.com/2012 ... -websites/
Thanks. That was indeed a good read. Many "desktop" sites are extremely bloated. I recently bought a Surface RT tablet (thanks to a good deal on eBay) and I tried pulling up abcnews.go.com on its desktop browser (which, I'd say, is the best "tablet class" browser yet) and it was pretty bogged down (even though it otherwise shows fine given enough time to load), but it's no wonder mobile users find many "desktop" sites unusable.

Fortunately, and as expected, htmlvalidator.com works fine. It's definitely lightweight by today's standards, which keeps it fast and usable... a quality which I think is underrated by many.

Speaking of which, that diagram was great!

Image

I am also glad the author recognizes that there may be some edge cases (maybe more than just some?) where separate desktop and mobile sites are beneficial. I agree with that; there is no one answer to the question of whether you should have both a "desktop site" and a "mobile site". I think it depends on the circumstances, but I do agree that one should aim for (or default to) having only one site. Besides, the lines are blurring as to what's a "desktop" device and a "mobile" device.

A Surface RT tablet is probably right in the middle of a "desktop" and "mobile" device. It's underpowered for many complex & bloated desktop sites, but it's over-powered for simple mobile sites. Even though I can pull up many of the bloated sites on it, it's just not an acceptable experience that I'd deal with day in and day out. On the other hand, the mobile sites are much more pleasurable to use because they are much faster and don't have all that unnecessary bloat.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Mobile web development tips & advice

Post by RSteinwand » Tue Sep 10, 2013 12:04 pm

I got a kick out of the diagram as well. :D

I picked up 3 Surface RT's on fleaBay, as-is because they were password protected (an easy fix), kept two and sold one to a coworker's wife, who loves it for social media. I used my Surface for web development until I was done with most of my mobile changes.

Recently decided to keep one for my wife and sold mine on CL to a 15 y.o. that loves it. I like the screen ratio and yes it's under-powered but also has good battery life. I have plenty of android devices so didn't need it and saw a ton of them for sale on fleaBay, I suspect since a lot of new Pro versions are becoming available without the RT limitations and rumor of Surface 2 devices coming soon.
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Mobile web development tips & advice

Post by RSteinwand » Fri Oct 11, 2013 1:30 pm

More good mobile info: http://mobile.smashingmagazine.com/2013 ... e-website/

I started work on a true responsive redesign. When I added support for mobile, a rotating banner at the top kept me at a fixed width for desktop browsers and two style sheets, one each for mobile and desktop with javascript to sniff which sheet to serve. I dropped the banner for now and will add it in when everything else is done.
Rick

Post Reply