Never before has cross-platform consistency been so crucial. As a result, I’ve noticed more and more websites pulling elements from mobile app interfaces and incorporating them into their designs. The explosion of responsive is pushing websites toward a mobile friendly structure in order to create a seamless transition from web to tablet to mobile. Perhaps this is also due to the ridiculous amount of people surfing the net with their phones. TechCrunch predicts that mobile will become the dominant global internet platform in 2013. As a result, the population is becoming more accustomed to mobile interfaces as opposed to websites.
The following outlines some pros and cons to mobile elements in web design:
1. Hidden Navigation
The ability to hide and show your navigation is becoming very common on websites. Three simple horizontal lines has become universal for the “menu” icon indicating that there are more options for your user. One of the biggest benefits to this feature is that it saves space. It allows you to utilize that big dynamic image without distraction and lets you use the same menu design when transitioning to different devices. Incorporating interesting transitions give a unique and modern feel to your site. However, it isn’t always an effective method of displaying your navigation. Some users will not instantly recognize that the icon will open your navigation. Users should not be forced to learn how to find the next page they are looking for – it should be obvious. Intuitively navigating information is arguably one of the most important elements of a website so it can be risky to tamper with.
Image Source: www.paperandpaint.dk
2. Flat Design
We used to live in a world with gradients galore, every element casting a shadow, texture on texture, and those lovely bevels. This supposedly flashy approach no longer wows it’s visitors. A simplified and classic aesthetic has won over these artificial design techniques. Trends are moving toward solid colours, clean layouts and sharp typography. This type of design translates well to mobile devices. With such a little screen you need big flat blocks of content that are easily navigated. Decorative textures and artificial effects provide little significant value to the purpose of a layout. Although you’d think losing these flashy effects would make it difficult to design buttons and links that “pop”, there are many effective ways to do so with bright, contrasting colours. This minimalistic approach actually emphasizes usability. The bottom line is that simple images convey messages more quickly than complex visuals.
Image Source: www.builtbybuffalo.com
3. Simplistic Icons
Many sites are dropping navigation type in favour of icons. Quirky illustrative elements are visually pleasing and simplify navigation in terms of messaging and the amount of space they take up. They also break up the enormous amount of copy some sites provide, which gives your viewer’s eyes some relief. Icons allow for seamless menu integration if you are building a responsive website thanks to their scalability and simplicity. As I previously stated, easy navigation is imperative in creating a successful user experience. Icons for primary navigation only makes sense if it’s obvious. Be careful that you’re using images that display a message universally. It is easy to think your illustration is showing personality, but it could be confusing your users. Using a hover effect with explanation copy can help, but suddenly your clutter-less design is crumbling.
Image Source: www.jacksonvilleartwalk.com
4. Large Typography
In the past a common point size would be 12-14, but more recently websites are moving toward 16-18 for their body copy. Large copy commands attention. If you want to get a point across, using big type will do that. Using various fonts in different sizes is opening the door to beautiful typographical artistic websites. No need for photos or illustrations if you know what you are doing with your font book! This technique translates well onto mobile devices allowing easy read-ability on smaller screens. Just be careful… if you have a heavy content website you walk a fine line of becoming obnoxiously long.
Image Source: www.gummisig.com
5. Modular Layouts
Using a grid-like system of organizing web content has been gaining popularity. Perhaps due to the massive success of tiled websites like Pinterest. Even the new Windows 8 platform utilizes this approach. These layouts are very flexible, making it easy to change the look and feel of your site without changing the layout. They are arguably the most effective structures for responsive websites. The module chunks of content allow for fluid repositioning, easily transitioning to a stacked format. Although grids can support innovative design, it can also be argued that it restricts creativity and is a little boring. They can make designers feel trapped within the borders of boxes. It’s not effective for all websites so choose the approach carefully depending on your content. It is perfect for portfolio or inspirational image-based websites.
Image Source: www.etchapps.com
There is sure to be growing pains as mobile devices explode in popularity and we dive into the world of responsive design. It seems like we are on the right track to figuring out how we can utilize similar design techniques across all platforms in a cohesive, sophisticated, and (most importantly) user-friendly way. I predict that we will continue to see the lines blurring between desktop and handheld device design.