How to Develop your HTML Websites more Responsive?


Who does not have a website today? The day the person decides to start a new business or a venture, the first thing it starts planning is with a website. The creation of a static website is very easy and there are multiple tools in the market to help in the same.  With so many types of devices to access the web, it has become all the more important to ensure to have the correct presence of the venture on the web.

Responsiveness is a concept which makes your web pages look good and more accessible on all types of devices, whether it is a laptop, a desktop, an iPad or a simple smart phone. Responsive design is an approach to creating a web page that makes you see the content the way it can be best adjusted on the display screen as per the resolution of the screen.

For converting your static website as responsive web pages, you need to focus on the use of flexible layouts, flexible images and cascading style sheet media queries.  There are multiple tools and frameworks available in the market which can help in making your web pages responsive.  But here we are going to see how to make little tweaks and changes which can help in the quick implementation of responsiveness on the website.

Basics of Responsive Web Design

To create a responsive website, we first need to understand the basic pillars of responsiveness:

  1. Fluid Grid – Imagine everything in the web page is defined in a grid-like structure.  Hence, all the components on the web page become adjusted in the different sections of the grid.  For responsiveness, we should stop using pixel-based sizes, instead, we can use the em or percentage in the stylesheet.

This feature helps us to make designing for multiple screens easier. Here the column widths are proportional rather than fixed. Fluid web page design can be more user-friendly because it adjusts to the user’s set up.

The fluid means liquid, that can fit in any shape.  Therefore, the web page structure becomes fluid. Fluid web page design can be more user-friendly because it adjusts to the user’s set up.  The fluid means liquid, that can fit in any shape.  Therefore, the web page structure becomes fluid.

  1. Flexible Images – Within the fluid grid, we will have fluid images.  The images in responsive web design have to be controlled using CSS.  The usage of fluid images causes the adjustment of the size to the parent block. The images will scale out according to the screen resolution or size. If the parent block is smaller than the size of the image, then the image is reduced proportionally.

All the images become flexible to fit in the parent and the display of images can be controlled using CSS. As per the scenario, the images can be replaced depending upon the device in use.

  1. Media Queries(@media) – Media Queries are the magic wand which will put the last spark in this magic.  The 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, using the width of the browser.

Media queries are used to write CSS for specific situations, which allows you to apply styles based on the information about device resolution.

For example, @media only screen and (max-width: 768px) {}

How to do?

Now, as you are aware of the various important components of web page automation, let us see the step by step approach for getting responsiveness on your web pages.

Step 1 : First let’s design a simple website layout containing all the components required. Ensure to add flexible & fluid layout.  Like, replacing em with px and putting the path for all the images in CSS.

Step 2 : Identify different devices that your website need to support.  Divide them into 2-3 categories in terms of ‘range of screen width’.  For example, I usually divide them into three different resolutions to achieve various effects when resizing the browser window. Like 1200px and above, 1200px to 800px and 800px and below.  You can divide the same, as per your comfort in multiple categories.

Step 3 : There is viewport meta tag in your <head> section which contributes heavily to the responsive website. The viewport meta tag indicates the web browsers that the web pages are built in an optimized manner for mobile devices.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″, user-scalable=no” />

  • width – device width of the viewport in pixels.
  • height – device height of the viewport in pixels.
  • initial-scale – sets the initial scaling of the viewport. The 1.0 value displays an unscaled web page.
  • user-scalable – specifies whether the user can scale the web page (zoom in or zoom out). Can get the yes or no values.

Step 4 : Write the web page with HTML5 doctype and standard meta elements.

Step 5 : Separate the document structure and the designing elements of the page. The structure of the page is mentioned in HTML5 document and designing elements in the CSS document.  Open your style.css file and add CSS rules. We should build our website in a standard way, using HTML5 and CSS3.

Step 6 : We can then get start with CSS media queries to add the responsive functionality to our design. Adding Media Queries is the most interesting feature of the responsive web design!

Step 7 : The media queries are set separately for all three different resolution set which has been created.  We can set the resolutions using max-width and min-width attributes. For example, if the max-width is set as 768px, then the screen size above the max-width of 768px will show the desktop version and below that size will show the styling mentioned in the media query.

@media only screen and (max-width: 768px) {}

Similarly, create different media queries for each resolution.

And now you are ready with your responsive website. Make as many tweaks as you want. 

Testing the WebPage

When you are done with the development of the web page, it is time to test it. There are multiple tools in the market to help you in doing the same. Although, there is a small and simple test which can be implemented easily. Just open your web page in any latest browser and resize the browser window. Whenever the criteria mentioned in the media queries is met, the appearance of the web page may differ as per the styling sheet.

Advertisements