Hard feelings reduction window

First of all I’d like to point out that I always recommend to re-think your mobile version of the website not to just shrink the website to fit mobile’s smaller screens or just to believe in that the responsive layout designs are enough to give you the best experience, here is a list of few important things to avoid while re-thinking a new mobile version of a website, these things applicable anywhere and I’ll try to explain each point and give an example, so let us start…

• Thematic Consistency (Devices Differences) Device’s differences are quite too much in the matter of screens, memory and how each device displaying things, its a matter of an operating systems and browsers’ engines too, so you have to keep in mind while developing your new mobile version of the website that many visitors with various devices will be accessing your mobile website, I advice that you try to test as much devices as you can get starting with the most popular between your targeted visitors.
• Exploit device capabilities to provide an enhanced user experience. If you can use any of device’s features then GO ON! Do not hesitate to fill in a form from the local storage of user’s device or just give him/her something to do with a shaking the mobile, swipe instead of normal scrolling, these are just examples so use your imagination to provide the best user experience :)
• Keep URLs Short (entry points) Keeping them short makes them memorable and more accessible, so I don’t have to go to the bookmarks everytime I want to open a certain entry point of your mobile website, short URLs provide better and quicker access through auto-complete feature of almost any browser.
• Minimal Navigation (on top or sticky) Mobile user wants to hit and run because you might be using the website while driving, walking, in the subway or even while cooking, so keeping navigational options available and easy to access all/most of the time isn’t an enhancement for your mobile website, its a must!
• Maximum 5-Clicks (trade off too many links) While navigational system should be always there and as clear as possible it should be also as minimum as possible; As a mobile user I don’t need too many links! I just need you to take me there! Which maximizes the need of what is called “viral linking” which is promoted by Facebook and Youtube so each link should take you to another content and every little detail of your website should be accessible with maximum of five clicks.
• Assign access keys. Access keys are usful when you need to use just the keypad to navigate and more importantly to help users with smart phones that has no touh screens to navigate your mobile website easily.
• Identify link targets. It is recommended to make the link takes you to a new tab/window whenever you link outside the website but on the mobile devices its a must to keep links opening in the same tab/window because you need to save device’s memory and lower its processing and ofcourse the power consumption.
• Use no frames, tables, popups, auto-refresh, pixel measure, absolute markup and definitely no redirects. Frames are no good anyway but sometimes you’re forced to use them, this is not allowed in the mobile website simply because the browser may not support frames and anyway frames making a new http request everytime it loads so it will consume data maximizing the data usage consequensly maximizing the bounce rate :) Beside the same reason for not using tables, tables are not responsive by default and even you made them responsive they will distort your content. The auto-refresh and redirects is consuming much data, finally pixel measure and absolute markup destroys responsitivity of your content.
• Minimize external resources. Consumes much data as the explained in the previous point.
• Clear and simple language. Using clear and simple language because the mobile user has no chance to open thesaurus to lookup a complex word you decided to use in your mobile website and if he/she managed to do that, I assure you he/she will never open your website again!
• Optimize any graphics. Graphics consumes huge amount of data so optimizing graphics for your mobile version becomes a must, and anyway you need to get your website opens as quickly as possible in order for the mobile user not to get bored and to come back again happily, I recommend a whole set of graphics optimized for the mobile usage.
• Limit content to users’ requests. If you’re going to display twenty items in a page, you don’t need to load the whole array of topics, just load what will be displayed!
• Divide pages into smaller portions. Minimizing pages into smaller portions will minimize loading time and data usage.
• Limit scrolling to one direction (unless can’t be avoided) Scrolling is annoying anyway, you have to be sure that only one direction of scrolling is appearing, vertical or horizontal.
• Colors contrast.
• Ensure colored text available and readable without colors. Its about readability, mobile users needs to be able to read the content of your mobile website under any circumustances with a dark display, inverted colors, low battery, minimal brightness for low power, partial data loading and/or many other situations, so you have to provide color contrast and to be sure that even with partial data loading your content still readable.
• Short but descriptive page title. Titles are important mainly for bookmarking purposes, so making title short and descriptive is a must for any website in general.
• Use markup to indicate logical structure. I mean navigate through pages by ID represented by hashtags, this will make it easier for the user to get through your content and if I need to get to the top of the page at anytime I’ll just use the link to #top instead of scrolling to the top, this will be very good practical experience if supported by some animations.
• Text equivalent for non-text elements. Always provide text captions for every non-text elements for couple of things, first the partial data loading which happens oftenly to mobile users and second for the users who may prevent non-text elements from loading trying to save data consumption, so it will be so ugly if they get a blank square without any description of that blank box :)
• Validate markup.
• Image size markup. This will be much helpful for your website performance as the browser is acting as the compiler/interpreter for the HTML, it is easier for the browser and quicker to display a size identified image rather than determining the size by itself, its about how browsers works.
• Minimize keystrokes and allow no free input if possible. It is recommended to minimize data free input by the user in order to minimize the validation process itself, so try not to give the user a free input unless you can’t, multiple choices, comboboxed and listboxes will do the job perfectly.
• Don’t fully rely on font related styling, embedded objects, cookies availability and scripts. Any markup starts with the word font- is not recommended to be used unless it is font-family :) Its about the differences between browsers as for embedded objects may not be displayed on certain browsers and also maybe the user is preventing cookies and scripts from being loaded.
• Create a logical order through links, form controls and objects. That logical order structure is much comforting the user while browsing, so he/she may use keypad only to navigate your website, it is recommended for any website not only mobile versions.
• Form controls’ labels (position and association) Labels’ position should be associated closely with the control it represents, so it is not normal to put the label beside the control while you know that users with 320x240 will be using that form of yours.