Una lista de verificaci贸n de los 5 Pasos para el Dise帽o de Sitio Web M贸vil

Posted in mobile web | Consejos | instrumentos | Dise帽o Web 0

As el n煤mero de personas que navegan por la web desde dispositivos m贸viles aumenta, la demanda para los sitios web que responden a los dispositivos de sobretensiones. And still there are websites that aren?t equipped with the tools necessary to respond to those changes, ya sea la falta de informaci贸n o simplemente no tuvieron ni tiempo ni dinero para mejorar. The process of optimizing your website for a mobile device isn?t actually as hard as it seems, pero a sabiendas de los pasos en la creaci贸n de un sitio web para m贸viles efectiva puede ser la diferencia entre el 茅xito y el fracaso. En este art铆culo le guiar谩 a trav茅s de cinco puestos de control fundamental a tener en cuenta en la creaci贸n de su sitio web para m贸viles. Feel free to leave comments if you feel I?ve missed important steps, o si desea tocar a ninguno de ellos.

 

Elija el marcado de Derecho

En breve, marcado har谩 que el contenido legible por los navegadores m贸viles. En la creaci贸n de su sitio web para m贸viles, it?s important to choose one markup language and stick to it. Explore your customer?s needs in choosing the right one that best fits their demands. 驴C贸mo hace usted para elegir el lenguaje adecuado para el usuario? Estos son los idiomas b谩sicos por debajo de, junto con sus principales ventajas / limitaciones.

WML

  • WML (wireless markup language) is one language used to make sites mobile-ready.
  • Sites providing email service, sports scores, and a calendar service are the one?s that can benefit the most from having WML
  • WML is used by legacy systems or sites targeting users with low-end phones such as the Nokia.
  • If your customer uses a basic, affordable phone such as the Nokia, WML is the best markup language for you.

XHTML

  • XHTML is the computer language designed specifically for mobile phones.
  • Most phone-browsers support this language, and has become the predominate language of the web.
  • XHTML-MP is a modularization of XHTML, and is basically indistinguishable from it.
  • If you?re designing for an advanced device such as the iPhone, XHTML is preferred over XHTML-MP.

In deciding between the two, access your site?s analytics to see which devices your visitors are using.

Knowing Your Device

Aside from markup languages, mobile phones differ greatly in rendering capabilities across browsers. Just as with IE6, Safari, and Firefox have extreme differences, mobile phones are a whole different device you have to account for. And since there?s so many shapes and sizes on the market, it makes the task even more cumbersome.

  • Common screen sizes are 128 x 160, 320 x 480, 176 x 220, 240 x 320
  • Although many people have their website adjust automatically for hand-held devices, others create a mobile website from scratch. Web services such as Mobify make this possible.
  • This is usually the best method, as you can create a customized site geared specifically towards mobile users, while allowing traditional web visitors to access your full site.
  • To avoid user frustration, include links in your website?s footer to the mobile version of your site, and vice-versa. This way visitors know both are available, easing the stress of the unknown.

Scaling Down Your Website

A common tactic for those designing for the mobile web is to simply scale down their existing site to fit the parameters of a mobile device. This practice is counterproductive, as the mobile user is visiting your site to access specific information as quickly as possible. Also remember that many mobile devices use touch-screen technology so designing your UI around it is worthwhile. In determining what to include on your mobile website, consider the following:

  • Remove any copy that is not important for the mobile visitor
  • Reduce the amount of navigation items to only those your mobile visitor needs to access on the go.
  • Increase the size of your text to a readable level, links are recommended to be 32 pixels to account for the human fingertip.
  • Design UI elements large. Mobile users tab and drag so you must accommodate to their fingertips.
  • Optimize blog posts using pagination to make skimming and reading more natural.
  • Remove unnecessary animations or images as they will load down the loading time of the website.
  • When applicable, Media Queries can be used to scale an image properly across all browsing devices.

Usability

Enhance your mobile websites usability by including only pertinent information that a mobile user needs while on the go. You have to keep in mind that browsing a website through a mobile device presents its own challenges. And while phones such as the iPhone and Android have made great strides in enhancing the web usability for its customers, not all phones make the task easy. Here are some tips to keep in mind regarding usability for mobile websites:

  • Older phones aren?t able to scroll left and right, leaving the user unable to browse a full website.
  • If your website requires a lot of tabbing and clicking, navigating it on a mobile phone becomes a challenge.
  • In creating your mobile website, focus on the primary features that mobile users are likely looking for. Such features could be contact information and store locators.
  • As mentioned previously, links should be around 32 pixels to account for the human fingertip. Contact forms should also fit the viewport.
  • Test your Website. Your layout may look great in one device, but slightly different in another. Online emulators allow you to see what your site will look like on different devices.

Adding Your Mobile Website

There are few different ways for adding a mobile version of your site to your domain. For instance you can create a subdomain from your primary domain that houses your mobile site. For instance, mobile.yoursite.com and yoursite.mobi. In any case many viewers still reach the primary domain when typing in your url. In this case you can:

  • Route traffic to your site depending on the viewer?s browsing agent. If they visit yoursitename.com, they can automatically be redirected to mobile.yoursite.com, for instance.

Conclusion

In this article I?ve discussed key checkpoints to keep in mind in the creation of your mobile website. As the web expands, so does the devices and technology used to access it. Gone are the days where we had to worry about how our site renders in Internet Explorer. These new advances in technology presents more opportunities to appreciate and gain the most from the web. It?s our job to make this as easy as possible for those who wish to get on board.