Responsive & Minimalist Design – The New Trendsetter

darkstar.jpg

Current Design Trends

Web design trends has been changing day by day. Now its all about user engagement / connection with content of the Website/ Application. Mobility has been a great factor to designers around the world to change his/her approach of web designing. Below are the few factors which creates the revolution in Web-Design Industry:
[ul]
[li]Personalized User Experience
[/li][li]Responsive Design
[/li][li]Big Emphasis on Typography
[/li][li]Large and Beautiful Images & Video for more user engagement
[/li][li]More scrolling over clicking: Parallax & Sliders
[/li][li]Card Style Designing (Metro Style Widget)
[/li][li]Interactive and Interesting Storytelling
[/li][li]Flat and Minimalist design Approach
[/li][li]We will discuss about Responsive Web-Design.
[/li][/ul]

What is Responsive Web Layout

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
responsive1.jpg
Though its not the same design technique as Mobile App Designs. Mobile design entails creating an entirely new website or web app with content specifically created for the mobile experience. Responsive Design, on the other hand, means that the same domain, the same content, and the same syntax — more or less manipulated by JavaScript and/or CSS3 Media Queries — respond to different viewports to provide the best user experience possible for each device. The differnclude desktop monitors, laptops, tablets, and mobile devices and their corresponding orientations.

10 Tips to design responsive layout:

Go Mobile First:

Before you plan your design for desktop or laptop screens, think about the user experience on a mobile device. A lot of designers are embracing the mobile first movement. This strategic approach should be used not only while Visual Design but it’s suggested to follow in analysis phase (wire-frame design).
Why? Because mobile is becoming more relevant than desktop.
Approximately 1 in every 7 people on earth use their mobile devices to access the internet. Focus on how users interact with your website over their mobile phones first. It helps designers to analyze and prioritize the data, content, imagery, video etc. for less real estate. It also helps to manage the interactivity. For example: We use cursor for interaction on desktop/laptop but smart phones uses touch and/or gestures so we have to design such a way that we uses less hover effect. Hover effect does not work on touch devices.

Design with Media Queries and Percentage

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012. and is a cornerstone technology of Responsive web design.
Till 2010 most websites were designed using fixed width layout but introduction of Responsive Designs created a hell lot of challenges to designers such as: Decide content breakpoints, maintain UX, Maintain visibility etc.
One of the hardest parts of responsive design is implementing a fluid grid. A fluid grid works together with media queries to display content on different view ports. Instead of designing breakpoints for every possible view port, you set a maximum layout size. From there, you define the widths and height by proportion, not pixel. This allows the site to rearrange the layout based on percentages.

Understand What Mobile means for Users

People interact with websites differently over a smart phone than they do over a desktop. Since mobile is handheld device so “User Engagement” becomes a necessity of any website. Unlike browsing on desktop user will ignore long textual content and too much detailed information will make the entire experience boring. So being a designer we all need to prioritize and analyze data and make it interesting information using info-graphics, imagery etc. Good use of Typography also plays a vital role in create the interesting textual info.

The Need for Speed

Don’t let those images drag your Responsiveness down. Quickly scale down hefty images with tools like Adaptive Images and TinyPNG. Its the demand of responsive designs. Survey shows that approx 65% people don’t wait for more than 5-7 seconds for a page to load when browsing on Mobile Phone, tablet etc. It becomes our duty to keep things simple so that User Experience does not get effected for slow internet as well.
Eliminate Unnecessary Elements
It plays a big factor. Get rid of excessive elements, not only for your user experience, but also for website’s speed. A website weighed down by too many elements will not be pleasant to use or to look at.

To Hamburger or Not to Hamburger

This is also a very important but most difficult part. Sometimes it becomes very irritating for users to go into menu to navigate to a specific page. User wants main navigation should be accessible all the time. So we have to design cleverly to identify which links we need to show or which items we can keep in menu. It also depends upon the business requirement.
For example: If we are designing for a fashion brand which is surving to all age group. We should atleast show the primary sections (Men, Women, Kid etc.) on main screens. Further drill down of navigation can be arranged in menu.

Make It Readable

Don’t make your users squint to read or pinch-to-zoom. Make your text size large enough to read from a smaller screen. Recommended text size for mobile device are 16 px, 1 em, or 12 pt. We
Use the Right Button Size
Mostly smart phones are touch based. We need to keep a standard size for action items. According to Mobile designs guidelines one should design action items minimum for 44 x 44 px for comfortable tapping. Also its suggested to use at least 8px gap between two action items to avoid any kind of overlapping on tap.

Design for Screen Orientation

According to statistics, landscape orientation wins over portrait orientation 59% to 41%. Design your site to look good on both orientations, but pay more attention to landscape. Make sure that your images aren’t stretched.

Fluid Grids Solves the Purpose:

A Gird system is required for responsive Design. It gives you flexibility and full control. It allows you to decide the content breakpoints, prioritize the element, make visual hierarchy. The Grid Systems are designed for “Mobile First”. CSS styles are scaled up from the minimum instead of scaled down from the maximum through the use of media queries.
There are few common breakpoints for fluid grid: 320 px — Mobile portrait
[ul]
[li]480 px — Mobile landscape
[/li][li]600 px — Small tablet
[/li][li]768 px — Tablet portrait
[/li][li]1024 px — Tablet landscape/Netbook
[/li][li]1280 px & greater — Desktop
[/li][/ul]

Below is the example of 960 PX based 12 column fluid grid. The number of column and breakpoints can be easily decided depending upon the above mentioned breakpoints.
960-grid
960-grid.jpg
secugo
secugo.jpg

Don’t s For Responsive design:

Don’t penalize users for the device they happen to be browsing with.
Don’t hide content from mobile users – change the content to make it accessible to all.
Don’t clutter the design and add unnecessary items – Prioritization is key.
Don’t over bloat pages for mobile users – remember 74% of mobile users will leave after 5 seconds of waiting for a page to load, and the unfortunate reality is that only 3% of small screen versions of responsive sites are significantly lighter than their large screen counterparts.
Don’t make text links so small that they can’t be clicked on when browsing using a mobile device.
Don’t use dual gesture for touch device. For example Drag and drop.
Don’t use small action items, specially for touch devices. Minimum size of an action item should be 44×44 px and the distance between two action items should be more than 8px.
Don’t use 1x images for retina display. It should be 2x in size.
Hope this will help you all designers to showcase your skills for Hybrid Web Designs to the world of Web and overcome all the difficulties to make content responsive.

Note: This blog is just for knowledge sharing not subjected to marketing.