How to design your website for touchscreen integration
Touchscreens, specifically those which are found on smart phones and tablets have become the industry norm. And while there are still some computers and laptops which use mouse navigation, many of the top manufacturers including Microsoft, Dell, Toshiba, and Samsung have focused their attentions on the touchscreen monitor and navigation as well. As a designer, it is important that your content recognize and then cater to the shift from static mouse navigation to touchscreen and user experience oriented websites. By understanding the concepts of Touchscreen design, you will be more apt to receive the target audience you desire.
How big are your buttons?
While it may be more aesthetically pleasing to have smaller buttons on your site, the truth is that the smaller the button, the harder it will be for the person using a touchscreen to navigate your page. Granted you do not want to have gargantuan buttons, but they should be larger than a toddler’s and able to be easily tapped. Here is where your layout and your design skills will really come in handy. As it is improbable that most of the navigation will fit onto a single bar, you will need to either make an animated button using 3D models, code, and sliders, or your will need to make icons and other such navigation features.
Keep glare in mind
Color on a tablet is a bit hard to control, primarily because the settings, the dpi and the quality of the device will vary from one person’s device to another. However, a constant obstacle of the smartphone, the tablet, or the laptop is glare. And while you cannot completely remove glare from the screen, using certain colors will enhance or decrease the glare. Black colors tend to heighten the glare on a screen. Black also brings out smudges, the finger prints, and provides a highly reflective surface which may make reading text and interactions difficult.
Typing
Although texting and typing has shown to be something of ease to younger users, there is still a consideration for the designer when making forms and introducing areas for textual feedback. Anytime you must enter substantial data into the site, there is a chance that the person will go to another site, especially if the site does not offer a docked keyboard or if the text/form gets obscured by their device’s keyboard.
Keep forms short and keep the edges of your text box away from the edges of your design. It is best practice to also keep your forms away from the bottom 1/3 of your page as this will allow space for an onscreen keyboard to appear.
Graphics
When implementing graphics into your site, it is critical that you have the character or the element serve a touchable function. Static images on a touchscreen design may come off as being a fluke or as poor coding. And while every element on the page does not have to have a click feature, if there is something which stands apart from the content, for example a character from CGTrader, then you will need to have it animated, have it perform an action when clicked, or navigate to a main area of the page for its placement to make sense.
One page vs. Many
As a general rule, touchscreen designs should be one page. You can introduce parallax elements and change the colors of the background, etc. in order to give the perception that the person is going to a new page. However, loading times as well as swiping and anchors tend to do better on a one-page site. If you opt for the multiple page website, ensure that the load times and the transitions between the pages is quick. The content that you have as well as the complexity of the page will determine a great deal of the design layout. Should you find that pages are too cluttered, even in multiple page format, slim down the design.
Simplicity is King
On desktops and laptops, a designer may be able to get away with cluttered sites (it is not recommended but you may get away with it). Yet, on the tablet and the smartphones, clutter means confusion and a difficulty in navigation. Keep the design simple and to the point. Avoid placing content too close on the right as this is where the scroll bar rests. Navigation should be easily understood with buttons spaced far enough apart so as not to cause accidental clicks, and banners should be eliminated as they only take up space that could be used for your design (use outbound links instead).
Those redesigning an existing site are encouraged to test the site on a mobile device or tablet before starting the design process. Take note of the elements that work and what does not. You may find that your excellent design translates well to the touchscreen. Whether you design new or redo, the touchscreen design should always be a prominent part of your web design process.