Make your Website User Friendly - Learn Responsive Web Design (RWD)

Responsive web design is becoming more important as the amount of mobile traffic now accounts for more than half of total internet traffic. Let us learn something new about responsive web design.

What is Responsive Web Design?

-> RWD stands for Responsive Web Design.
-> RWD can deliver web pages in variable sizes and resolutions.
-> RWD is a must for tablets and mobile devices.

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction 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).

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:

The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points. Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element. Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

In other words, Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

How does Responsive Web Design works?

An introduction to responsive webdesign is the future of websites. Nowadays RWD is used widely across the globe for reducing /saving money, improved SEO and better site performance. Unlike desktop alone websites, RWD adapts the layout to the viewing environment by using fluid, proportion based grids and flexible images.

The two main techniques which make up responsive web design are Fluid Layouts and Media Queries. Media queries are mostly used in the web design industry for responsive layouts. Rather than looking for a type of device they look at the capability of the device, and user can use them to check for all kinds of things. For example:

1. width and height (of the browser window)
2. device width and height
3. orientation – landscape or portrait mode
4. resolution

These are the commonly used media queries in the webdesign. These resolutions mentioned here are not fixed; it may vary according to website's requirement.

@media only screen and (min-device-width: 767px)  and (max-device-width: 1024px) {

/** media queries**/
}

@media only screen and (min-device-width: 600px)  and (max-device-width: 768px) {

/** media queries**/

}

@media only screen and (min-device-width: 480px)  and (max-device-width: 599px) {

/** media queries**/

}

@media only screen and (min-device-width: 320px)  and (max-device-width: 479px) {

/** media queries**/

}

Responsive Framework:

Earlier, the websites are made responsive by writing media queries for all elements. But recently many designers are started using responsive HTML framework for their projects. Some of its example are Bootstrap, Semantic, Foundation, HTML5 Boilerplate, HTML KickStart, Skeleton, 1140 grid system, 960 grid system, Less Framework and so on.


Source: w3cschools, wikipedia, smashing magazine, magicdust, hubspot

Recent Trends in Web Design - II

On previous post, we have discussed about Recent Trends in Web Design - I and the rest of them are as follows:

Users are Quicker, Websites are Simplifying:

Every person who ever surfs on internet has became web expertise. Most of net surfers don't hesitate to change or close website if it loads more than 5 seconds. So simpler website with neat content and self explainable images leads the webdesign market.

Fixed Sliding Navigation:

Fixed navigation bars can scroll down a page with you, reappear panel by panel, collapse and expand at the click of a mouse, interact with users as they browse, or skulk discreetly in the corners of the screen. For quicker response and navigation through various pages, this sliding bar is fixed to the window corner, mostly on top center or in the left side on browser window. 

Sticky Header Menus:

Navigation is one of the most critical components of a website. IN recent times, menu bar is sticky to the top of the page for easy navigation. Sometimes, the entire header is made sticky and fixed on the top which makes the user for quicker navigation, easy way to use all elements in header.

Flat and Material Design:

The hot current trend in web design which is followed by all is flat design. Few days before, web design has lot of components which has three dimensional effects such as gradient, larger drop shadows and textures in the background. But now, the design trend has changed to flat solid cool colors. What the users needs is simple straight colors with simple buttons and legible typography.

Circular Design Elements:

The design elements makes the design to feel comfortable. Circular design elements are widely used in most of websites to make style easier. Images, abstracts, buttons, topics are given within circular element to make the design more worthier.

Simple Ghost Buttons:

The trend of flat design also includes simpler ghost buttons. Ghost buttons are very simple, elegant with flat border colors with transparent background. The background color changes when the mouse over is done. This design element is started using mostly in all websites.

Custom CSS3 Animation:

The latest CSS3 properties is strong in the latest versions of all the major browsers - even Internet Explorer - and the possibilities for typography, animation and interactivity have never been greater. Usage of simple and mild CSS3 properties such as transition, animation, translate, rotate makes the design more richer. One of the modern effects in web design is the scrolling page element animation. When a visitor scrolls down the page elements will fade-in or slide into view from off-screen.

Flat Icons:

Whether it is an application or website in a desktop or mobility, icons plays another crucial role in designing. Earlier icons are larger, gradient colored and thicker in border. Now the icons has evolved to the latest trend of web design. Thin border and smaller icons with flat colors rules the design layout. UI Designers have also started using icon fonts for most of vector icons and images used in application and website.

Changes are the only things will never be changed. Likewise, design will be changed every time periodically as per the trend.

Recent Trends in Web Design - I

Designing a website in unique way, changes a lot by time to time. These are the biggest trends in web design industry (for the current period) followed by the UI designers across the globe. 

Huge Background Images:

Websites with huge background images make the site more attractive and it will give richer look for the end-users. This image can be banner that explains it's product, abstract image or any other which makes the page readable. The image will be made responsive through media queries so that it fits in all devices.

Video on Background:

A big page size videos running in the website home page will help the user to know about the project or product of the site. Videos can be added through multimedia components in HTML5 (<video> ) .Video is supported by *.ogg and *.mp4 formats.

Larger SVG Images:

Nowadays all the modern web browsers are supports SVG (Scalable Vector Graphics) images. Most of the sites are using SVG because this vector image format will not be pixelated in size of browsers.

Bigger Font Sizes:

Most of the webdesign depends upon the high quality image content and the bigger and legible fonts. Typography plays one of the vital role in webdesign which include font selection and its size. Bigger text on page heading and on essential topics makes the content more legible and clear which makes the user to understand the content.

More Interactive than Ever:

User experience is the essential in a website design. Instead on writing stories about the services or what we do in that project, interactive designs may help us a lot for better communication. The proverb 'Picture speaks more words' can be quoted for every designers to make it more clear. 

Lesser Text More Imagery:

Same as the above point, images are more communicative than bunch of paragraphs. Use high quality of images which are optimized and can be used in the websites to represent what we are coming to say. Make sure that you are not filling the whole page with group of images congested in the website, because too many of HD images may reduce your site performance.

Parallax Effect & Innovative Scrolling:

Parallax scrolling and innovative scrolling makes the background elements to move or scroll at different rate in the smooth easing manner. This effect is used in many of the single page applications and websites which makes the content more richer and worthier.

Split Screens:

One of the popular design trend I’ve noticed is becoming more and more popular is the split layout. This split screen makes the website more attractive and presentable for the users.

Tiled Format Design:

After the arrival of Windows 8 operating system, the retro design became one of the trending topic in design world. Websites filled with tiles of squared and rectangle shapes withe the respective content inside it make the design more briefer and understandable.

Grid Based Design:

This design is mostly used in forum or blog based sites for listing the topics. Mostly single images with the briefed text will be aligned in the landing page.

Responsive Web Design:

When the smart phones era has started, responsive web design has evolved in web design as a vital role. Initially, media queries are used to make a website responsive. Then in later stages, the framework has made the task more easier.

Rest of the trends will be continued in next post.