The mobile internet users are likely to increase from 800 million in 2009 to 1.9 billion in 2015. This increases the probability of more number of people surfing the websites via mobile phone. Study reveals that mobile users will surpass desktop users before the end of 2014. The availability of 3G and 4G network allows the users to surf the internet via smartphone and tablets. In such cases there arises the barrier of displaying same content across different devices with different screen sizes. This has led to the development of responsive web design (RWD) which uniquely displays the same content across multiple devices and saves time and money.
How it works?
Responsive design is one development across multiple devices. It targets the width of the browser and displays the content accordingly on phones, tablets, and desktops. The responsive design manages a fluid grid such that site is visible regardless of the screen size without any re-wraps or stacking. The layout agnostic design helps to manage without knowing the screen size, resolution, and device in advance. Media query identifies the device on which a responsive design has to be rendered by knowing the device characteristics and adjusts accordingly. If it is not possible to adjust then the link is ignored. Media queries can be incorporated into cascading style sheets (CSS).
Benefits of RWD
1. Flexible: The responsive web design allows to view the same content across multiple devices by adhering to certain flexibility in displaying. The contents can move freely on the screen for different resolutions where both the grids and images are fluid. The content gets filled in the alloted space while it also retains the appearance uniformly.
2. Rich user experience: RWD provides a rich user experience to the end users as they could view the contents across devices which makes their life easier. Customers will never note the difference in service between different platforms.
3. Affordable: RWD is cost effective since it manages, support, and upgrades in a single place saving time and money. It avoids the confusions of developing a separate site for the web and mobile.
4. SEO friendly: The responsive web design manages SEO optimization uniformly across web and mobile platform with responsive approach. It is worthwhile to note that Google prefers responsive web design since it is easy for crawling, indexing, and organizing content.
5. Increase conversion rate: With little investments, the sites can be made mobile responsive which may lead to increased sales conversion on the site with its user-friendly nature and uniformity in displaying contents across different devices.
Infinite grid system
The finite grid system has layout boundaries such that appropriate solution can occur with known relationships and constraints. But in the case of infinite grid system for responsive designs, the canvas dimensions are the constraints. The infinite fluid grid has different states such as single column, double column etc.
The components are rearranged when infinite grid changes its state. The various components of the state of responsive design include image gallery, navigation menu etc. The attributes such as hierarchy or order and prominence in layout, density or detail to show, interaction, width etc are vital to consider with changes in the state. The relationships between the elements are defined. The white spaces must be relative to the content such that it maximizes readability and presentation.
Single font file can be adapted to various context using font hinting. It is similar to how CSS allows a HTML file adapt to various context. Some of the contextual typeface modifications includes Ascenders and descenders (shrink when height is reduced), Glyphs (condense when column width is reduced), Hairlines (gradually increase with size with always one pixel), and weight adjustments to get consistent feeling across different rendering environment.
Responsive web design manages to display the contents uniformly across different screen sizes based on elements such as image, font, etc which are redefined to get viewed in multiple screens. RWD is a futuristic thought since it avoids the difficulty in building different sites across different medium and thus makes the whole process to be cost effective.