Una lista de comprobación de paso 5 para el diseño de sitio Web móvil

Error in deserializing body of reply message for operation 'Translate'. The maximum string content length quota (8192) has been exceeded while reading XML data. This quota may be increased by changing the MaxStringContentLength property on the XmlDictionaryReaderQuotas object used when creating the XML reader. Line 1, position 8872.

As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren’t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. The process of optimizing your website for a mobile device isn’t actually as hard as it seems, but knowing the steps in creating an effective mobile website can be the difference between success and failure. In this article I will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website. Feel free to leave comments if you feel I’ve missed important steps, or wish to touch upon any of them.

In short, markup will make the content readable by mobile browsers. In the creation of your mobile website, 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. How do you go about choosing the right language for your user? Here are the basic languages below, along with their key benefits/limitations.

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 WMLWML 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 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.

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 320Although 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.

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 visitorReduce 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.

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.

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.

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.

Ver Articulo Original

Read More..

9 Efectos de sitio Web inspiración deconstruidas

Error in deserializing body of reply message for operation 'Translate'. The maximum string content length quota (8192) has been exceeded while reading XML data. This quota may be increased by changing the MaxStringContentLength property on the XmlDictionaryReaderQuotas object used when creating the XML reader. Line 1, position 9107.

As you may know, there are lots of great tutorials out there which can definitely help you practice, learn and achieve amazing results. The good thing about having so many tutorials to learn from is precisely that – you have a large variety of sources to choose from. Sometimes though, the tutorials aren’t clear, or difficult to understand or you just can’t apply it in the real world.

Have you ever come across a website with such a great design or effects that your inner voice screams wow, making you wonder how it would be possible for you to recreate the effect? The purpose of this article is to provide you with resources and insights about how you can learn from your favourite websites, learning and taking advantage from real implemented effects and functionalities.

So let’s get started!

Click the image above to visit the Nike website and scroll-down the page. Cool isn’t it? The illusion is called a Parallax Effect. This effect is relatively recent in web design but you can see dozens and dozens of websites using it already. This is not the only illusion you can get with a Parallax effect, actually the most common illusion is the one used on the Silverback website (resize the browser window to see the effect in action). Basically you are seeing several elements (in this case backgrounds) moving at different speeds with the posterior element going over the previous one.

Ian Lunn wrote an amazing tutorial on how to recreate the Nike’s Parallax Effect. Check it here Nikebetterworld Parallax Effect Demo.

Yess BMX uses one of my favourite functionalities on a website which is mouse drag. These days it is still relatively rare to find a website where you can drag elements with your mouse. Nevertheless, that doesn’t mean you can’t easily have it on your page.

Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.

The solution is called Dragdealer. Check the link for more information.

I’ve decided to include this jQuery sliding effect since it’s widely used these days and it looks great almost everywhere. Building a sliding panel it’s relatively simple and you have tons of ways to do it. Check one way to do it below.

Connor Zwick from Nettuts wrote a fantastic tutorial on how to build a login form using a sliding panel. Check it here Build An Incredible Login Form With jQuery.

To be honest I haven’t heard about this one until very recently and I was amazed and spent a good time having fun with every page I have found using the Konami Code. The author was inspired by the cheat code that appeared in many of Konami’s video games going all the way back to 1986. Now imagine using a similar concept on a website and… magic happens! Visit the website above and use the combination provided in the end of this paragraph. You can also visit konamicodesites.com and prepare yourself for some fun. Unfortunately Facebook is not using Konami Code anymore but many others are.

To enter use the following combination with your arrow keys: up up down down left right left right B A

Matt Kirman has an old but still efficient short script on how to recreate the Konami code on his webpage. Check it here How to recreate the Konami code in Javascript

You probably have seen this effect a million times but since you’ve been a bit lazy and still aren’t using it, I decided to include it so you can stop making excuses. Now seriously, this sliding effect is losing its status as trendy since it is so massively used, but the point is that you can change the hover effect at will. Apply for instance a fade effect with a border color change – It will look good and modern.

Noura Yehia wrote another great tutorial on how to achieve this so go over DevSnippets and take a look. Panel slides on hover effect

Vivascom website has a simple but nice jQuery loading script working. The script can load a part or an entire page, it includes a nice looking animation and works in all browsers except IE6 (but you don’t need that one do you?).

This preloader has it all. Loading bar, custom animations and getting all images included in the web page.

Go over Gayadesign for more information, download and demo. Preload your website in style

At Sapphire Sound’s What We Do section you can see they have a good looking scrollbar to scroll the content inside the div on the right side. In order to do that, they make use of a great jQuery plugin called jScrollPane.

jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser’s default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.

On their site you can find more information including the download link and some demos. Check jScrollPane.

One thing I love when I visit a website is to check that someone cared about usability and user experience. That’s the case of the agency Creative People. Their website is awesome and I loved the fact that they’ve implemented mouse wheel support on some of their sub-pages. Click the Web, Brand or Social buttons and use your mouse wheel. These days there is absolutely no reason to limit the user to a left and right arrow in order to navigate through a list of elements. Small details like these increase the overall quality of a page.

Brandon Aaron has a great and simple to use jQuery mouse-wheel support plugin. Check his page for more information.

Spoon Juice website design is incredible and the same applies to its navigation. Again one of my favourite aspects in this kind of navigation is the usability and efficiency it offers. Spoon Juice built its own script but you can easily build an equally awesome navigation of your own following the tutorial below.

Visit Tympanus website and check their amazing tutorial.

Ver Articulo Original

Read More..