Tips for designing web pages for mobile browser?

Tips for designing web pages for mobile browser?

I'm making my debut in designing a web app specifically targeted at mobile browsers. While I've written web pages before in C#/ASP.NET, I've never done anything specifically for the limited screen real estate and other idiosyncrasies of mobile browsers. So I'm looking for some pointers here:

• What design considerations should I be taking account of (aside from the obviously smaller screen)?
• What useful features are there in C# that can be put to good effect for the mobile client?
• How do you make sure to give a relatively uniform user experience for all different mobile browsers?
• Any other tips you have?

Thanks!

Answer by Ben Everard for Tips for designing web pages for mobile browser?

What design considerations should I be taking account of (aside from the obviously smaller screen)?

How about the user interaction, for example there are few devices that allow for "hovering", so don't depend on psuedo-classes that cannot be emulated on a mobile device, but don't completely ignore them, so mobile devices may use them.

Think about orientation of the design, if the device supports landscape and horizontal viewing.

Some devices like the iPhone cannot be operated to a mm accuracy using a stylus, so don't make inputs dangerously small.

If using effects to tart up the UI, most mobile devices don't display effect (such as those provided by jQuery) very well...

Finally test, test, test! Test on as many real mobile devices you can, and when you're done consider using emulators (such as ones for BlackBerrys or the iPhone), whilst this won't provide you with the feel of using the device, it should show any rendering problems.

Answer by Adam Beizsley-Pycroft for Tips for designing web pages for mobile browser?

Probably obvious but make sure you define a bespoke handheld stylesheet.

Whilst modern smartphones (e.g. iPhone) can handle normal sites the constant zooming in and out is better avoided for a dedicated mobile app. However, it's worth designing two versions in case the user wants to access the app using a laptop / desktop too.

Answer by Arve Systad for Tips for designing web pages for mobile browser?

Making a good mobile device experience is mostly about the UI, and not the back end application.

• Use a mobile device style sheet (media="handheld" attribute on the link-element)
• Have as few HTTP-requests as possible:
  • Compress all scripts and stylesheets into one single file (one for .js, one for .css, that is)
  • As few images as possible
• Keep in mind the differences between touch devices and non-touch devices (size of buttons, for example)
• Be careful with the amount of content you fit into one page.

Answer by cjk for Tips for designing web pages for mobile browser?

Don't redirect to the mobile version of the site, losing the intended target. If I want to view an article on a site, don't take me to the mobile home page. You may take me to the mobile view of the article, but hijacking my target entirely is unacceptable.

A certain cr***ed.com does this always which is incredibly infuriating....

Answer by Duncan for Tips for designing web pages for mobile browser?

Compress, minifying, optimize for a couple of reasons. Bandwidth isn't great, a page that loads in a couple of seconds on the desktop could take 30+ seconds on a mobile device. Caching is really poor on mobiles. An example being the iPhone will not cache components of a website over 25k. So get your images, scripts, stylesheets as small as possible.

Answer by Mike Ribeiro for Tips for designing web pages for mobile browser?

You should check out WURFL which basically is a huge xml file that helps you identify the device. You grab the user agent and check it against the file with their API to get all the capabilities and features for that device. Ive used it in numerous projects with great success.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72