unknown os platform
Responsive web design using CSS Media query and HTML | Whats-online.info
whats-online-info

Responsive web design using CSS Media query and HTML


Responsive
2016:08:21 / Science and Tutorials

Get started with responsive web design guide. Build site responsive to mobile, tablet and desktop using CSS Media Query.





Responsive Web Design


Get started with responsive web design guide. Build site responsive to mobile, tablet and desktop. 


What is Responsive Web design?

How can I create a responsive website?

What are some advantages of building a responsive site to unresponsive site?

Which tools can one use to build a responsive site?


A responsive web design is a method to web design aimed at building sites to provide an optimal viewing and user interaction experience that is, easy reading, navigation, scrolling, resizing, panning, and scrolling, enlarging, etc. across a wide range of devices of different sizes.


Besides, responsive web design is all about building sites, easy to shrink, enlarge, or able to re-arrange the html elements or the content according to the device width to make it look attractive and interactive to the site visitors.


How can I create a responsive website? There are several ways one can use to build a responsive website but on this tutorial, I will teach how to create responsive sites with HTML(HyperText MarkUp Language ) and CSS(Cascaded Style Sheet).


Advantages of Responsive sites over unresponsive sites.

1. Easy to navigate- Responsive sites facilitate responsive content, i.e., The hyperlinks on the content are easily clickable.


2. Enhance user interaction- Take for an example, you visit a site using your mobile phone. You are made to zoom the site 200x to read an article on the site. On the first time, you will get bored and exit the site. On the other side, you navigate to another site, responsive, and the content is large enough, easy to read. Not only you will remain on the site for a long time, but you will also save the site page for future reference.


3.SEO. (Search Engine Optimisation). Search engines tend to rank responsive sites to all mobile and computer devices higher because they consider them, user-friendly and more interactive to site visitors.


There are several tools one can use to build responsive sites. 

For instance, notepad++, WordPress, Joomla, Adobe Dream Weaver and other many more.







Guide to responsive web design using CSS and HTML.


Index.html


<!DOCTYPE html> <html lang="en-us"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="index.css"> </head> <body> <h1>Responsive Web Design Demo</h1> <div class="div1">   <h2>Whats-online.info</h2>   <p>Learn the advanced programming techniques.</p>   <p>Visit the site at: http://www.whats-online.info,   Love what we offer and recommend it to others.</p> </div> <div class="div2">   <h2>Like and follow us</h2>   <p>Like us on Facebook:<a target="_blank" rel="nofollow" href="https://web.facebook.com/whatsonline.info">Like us</a></p>   <p>Follow us on pinterest:<a target="_blank" rel="nofollow" href="https://www.pinterest.com/dansyod/">Follow us</a></p>   <p>Follow us on Twitter page,<a target="_blank" rel="nofollow" href="https://twitter.com/DNyamasyo">Follow us</a>   Follow us on Google plus page. <a target="_blank" rel="nofollow" href="https://plus.google.com/+Whats-onlineInfo">Follow us</a>   Follow us on quora .<a target="_blank" rel="nofollow" href="https://www.quora.com/profile/Dansyo-Stylagard">Follow us</a></p> </div> <div class="div3">   <h2>Love whats-online.info</h2>   <p>Like us on Facebook:<a target="_blank" rel="nofollow" href="https://web.facebook.com/whatsonline.info">Like us</a></p>   <p>Follow us on pinterest:<a target="_blank" rel="nofollow" href="https://www.pinterest.com/dansyod/">Follow us</a></p>   <p>Follow us on Twitter page,<a target="_blank" rel="nofollow" href="https://twitter.com/DNyamasyo">Follow us</a>   Follow us on Google plus page. <a target="_blank" rel="nofollow" href="https://plus.google.com/+Whats-onlineInfo">Follow us</a>   Follow us on quora .<a target="_blank" rel="nofollow" href="https://www.quora.com/profile/Dansyo-Stylagard">Follow us</a></p> </div> </body> </html>





index.css


body{     width:100%;     margin:auto; } .div1,.div2,.div3{     float: left;     margin: 5px;     padding: 15px;     min-width:250px;     width: 30%;     height: auto;     border: 1px solid black; } 






NB, I recommend using (%) instead of (px) for a flexible page, images, and divisions.


To enhance responsive images use this CSS layout code:


img{         width:100%;         height:auto; } div{      width:30%;       height:auto; }


NB: Setting height "auto" instead of using 'px' or '%' enables the images to re-size without distorting.







See also: Alternative responsive web design , i.e building two separate sites, mobile version and desktop version



See the examples below


Desktop version


Mobile Version












You may also like:


Leave a comment












Subscribe to get replies direct to your mailbox

Submit comment