How to Convert HTML Website to Responsive
Mobile devices have grown in popularity over the years, so much so that more people are now using smartphones and tablets to access the internet than desktop computers and laptops. However, your website will not appear the same on all the different screen sizes, mainly because it was designed for the conventional PC monitor. You to make your website adapt to the changing screen sizes, also keeping in mind the future considerations.
One of the best ways you can do so is by changing the design of your HTML website and making it responsive. Responsive web design is a means of making websites intelligent so that they can understand the dimensions of the screen and fit accordingly. Unlike mobile websites, you don’t need to create different versions of your website. Your existing HTML website will be tweaked to make it responsive. Here is how you can make the conversion.
Layout
The layout of your HTML site is extremely important. It will determine whether or not users of handheld devices can view your website in its entirety or not. For this, you will have to make slight changes to the default size of the theme of your website. Entering a simple line of code in the <head> and </head> files of your HTML website will do this.
-
<meta name=”viewport” content = “width = device-width, initial-scale = 1, maximum-scale = 1, user-scalable=no”>
-
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
-
<meta name=”HandheldFriendly” content=”true”>
The layout of your website is now ideal for smartphone and tablet users.
Images & Video
Next, you have to define the media settings for your website. The reason for this is so the visitors can easily view the images and videos posted on your website on their devices. First, you need to make sure the images load quickly and display properly. The code you have to enter into the style sheet is:
-
@media (min-device-width:600px) {
-
img[data-src-600px] {
-
content: attr(data-src-600px, url);
-
}
-
}
-
@media (min-device-width:800px) {
-
img[data-src-800px] {
-
content: attr(data-src-800px, url);
-
}
-
}
This will align the pictures according to the size of the screen.
Next up are the videos. For the videos to load and run properly, you have to alter the default container size. Here is the code you need to add to the file for the embedded videos to start playing:
<div class=”video-container”>
<iframe src=”http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0″ width=”800″ height=”450″ frameborder=”0″></iframe>
</div>
Font Size
One oft-ignored aspect when HTML websites are being converted to responsive is the font size. You have to be wary of the fact that the font size will also have to be changed from the default settings to appear to scale. Here is the simple line of code that does this for you:
-
html { font-size:100%; }
Adjusting these three elements of your HTML website is the key to scaling it properly for different screen sizes. Once you complete the steps described above, your website will become responsive.
Need help? Contact us
