Where is web DESIGN heading?

With Windows 8/touch screens, iPads and cell phones becoming mainstream for web browsing, what should designers take into consideration when planning a new website layout?

Start by understanding the user experience, and your potential viewer. What kind of content will the user be looking at? Will they be shopping, reading, viewing image galleries – and which media are they most likely to be using? Consider how easy or hard any interactions are to perform on that iPad, phone or large screen. Also consider how a page will render in landscape or portrait, how do elements need to be rearranged?

Tables and touch screens present a new set of challenges to overcome, web design techniques and codes which are appropriate when a large desktop screen is the target, will become obsolete, unusable on touch screens. It’s not enough to create a ‘responsive’ layout, where page elements move/shift/re-size according to the screen being used, now the touch element comes into play. Without a mouse, it’s down to just a finger tip, which can only touch/click, not even ‘hover’.

Actually Test Your Site on every media possible, visit the Microsoft and Apple stores if necessary.

“Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.”

A Finger tip is less accurate than a mouse
Avoid Flash
Use HTML 5
Design for 960-1000px width, and/or design adaptively
Consider vertical/horizontal orientations
Plan for alternate link display for narrow screens
Consider CPU and WIFI connection limitations, avoid too media-intensive content.

Gestures, taps, and multi-touch need to be considered:

• Tapping is not accurate, it’s hard to be precise when tapping. Keep click-able items enough space between them, and make them large enough.
• Gestures are not the same as taps – scrolling a long page on a touch screen, the user swipes up, with a mouse, you move the mouse down with the scroll bar.
• Multiple finger taps – what do they do?

Glass screens:

• High glare – glass screens can be hard to read in bright light.
• Dark backgrounds make finger prints and smudges more obvious
• Test to make sure color scheme minimizes viewer reflection

Forms:

• Using screen keyboards is not as easy as a regular keyboard, keep form requirement short, so a minimum of typing needs to be done.

Navigation:

• Links need to obvious – without a mouse-no hover state to indicate something is a link.
• Javascript dropdowns may appear, but not be clickable.
• Use CSS to change display of link drop-downs when viewed on small screens. (Test effect of browser re-size on this site)
• Don’t put any links on the right-hand side, as that’s where a viewer normally swipes from, and may click a link by mistake.
• If using a WordPress or other template, test carefully for adaptiveness

Links:

• webdesign.tutsplus.com/articles/general/designing-with-tablets-in-mind-six-tips-to-remember/
• webdesign.about.com/od/mobile/a/design-for-touch-screens.htm
• www.sitepoint.com/website-design-for-tablets-and-mobile/
• blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx
• msdn.microsoft.com/en-us/library/hh673536(v=vs.85).aspx#css_multicol
• msdn.microsoft.com/en-us/library/ie/hh673549%28v=vs.85%29.aspx
• ie.microsoft.com/testdrive/html5/compatinspector/
• adapt.960.gs/
• developers.google.com/webmasters/smartphone-sites/