Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Html5 responsiveness of the web
HTML5, the latest and popular web designing language, has suddenly took the designing world with a wave. Earlier we had HTML and now there is HTML5. However, if we look at the major difference between the both, we figure out that the one thing, which actually makes HTML5 different and better than HTML is the Responsiveness.
Responsiveness of a webpage means the output or response received from the web page after it is loaded on the browser as per the medium.
With HTML, there used to be many limitations, which arises the need for a new version. The web designers were not having the flexibility to create the web pages with the changing technology.
The latest technology allows the users to access the web pages on desktops, laptops, mobile phones, iPads etc. Moreover, all these devices are coming with different dimensions. The web designers were looking for a solution, which can fit for all. In response, HTML5 came as an answer.
Liquid Layout
HTML5 is a bouquet of HTML, CSS and JavaScript. It allows the users to create web pages with liquid or flexible layout, like water. As we know, water takes the shape of its container, similarly, liquid layout allows the designers to float their content in the specified container. The same website, when opened in iPAD will adjust as per its dimensions, and if the same URL is accessed on mobile, will fits in its dimensions.
Another plea our web designers had was, related to the content. What if we want different content on mobile screen, and different on the laptop screen? Let me explain the psychological theory behind this concept using a very simple example. Suppose, you are in your office and suddenly your team plans for an outdoor lunch party. You pull out your phone which opens a webpage to look for the nearby restaurants (like zomato, dineout etc.) now filter them as per your criteria and choose the one which best suits your requirements. Now, what if your team plans to go on a lunch party in the upcoming weekend. In this situation, you probably open your laptop; open the webpage of the same website, looks around the page, checks the offers, the frills and add-ons of the website.
With this example, we assume that the user, who is opening a webpage on the mobile, probably would be in a hurry and would not have time to look around the designing. The user would be looking for the functionality instead of designer UI. However, when the same webpage is viewed in the laptop/ desktop browser, the user might have time to appreciate the designing part.
Responsiveness allows web designers to squeeze or stretch the page to fit the screen area of the device and hide/ show the images or tags.
Responsive web design is the concept of developing a webpage as per the layout adjustment according to the user’s device screen resolution. It allows the web designers to tweak the layout and present the relevant information first: hours, phone number, directions and perhaps a link to the menu. Meanwhile back at your desk, the restaurant’s page has all the bells and whistles you did not care for while browsing on your phone.
The layouts in Responsive Web Designing (RWD) is done using flexible or liquid layout parameters (like ems and percentages) instead of finite values (like pixels, points etc.)
To allow responsiveness in your pages, the structure of the page is altered and the basic concept of HTML5 comes into picture. The basic guidelines for writing code in HTML5 is:
- The content goes in HTML files
- The look and placement goes in CSS files
- The validation goes in JavaScript files
Hence, to get responsiveness, we need to replace the CSS files with the change in the screen size of the device, while our content (which is in HTML pages) remains the same.
RWD Strategy
Responsive web designing use the Progressive Enhancement instead of traditional Graceful Degradation.
Graceful Degradation emphases on building the web pages compatible for the latest and most advanced browsers. Going forward, the support is provided for the older browsers but the expected glitches will be part of the package.
Whereas, the Progressive Enhancement focuses on the content instead of browsers. Take this concept as the content out approach, like in the case of Peanut M&M chocolates.
- Peanut: Content marked up in rich semantic html
- Coated with rich creamy CSS
Added JS as the hard candy shell
RWD Frameworks
An HTML5 Framework is just the pre-created template with pre-defined reusable CSS & JS files and dummy text as content on the page. They help the budding developers to kick start with the basic designing. The layouts are defined and the designs are created.
There are multiple frameworks available in the market to implement responsiveness. The most popular and easy to implement is – Twitter Bootstrap. To add to the list are, Foundation, Skeleton, Boilerplate, Kickstart and many more. Most of these frameworks use grid system base for initial layout development.
Twitter Bootstrap uses mobile-first approach, free to use and easy to install. The generic CSS file is the part of the package, to help the designing of most of the elements and controls on a web page. The various types of layouts are available to help you in building the web page.
Responsive Web Designing is the most wanted technology and slowly and slowly becoming the standard requirement for any website. There are ample of support for available online for implementation and multiple tools are available to play around with.
180 Views
