message ManFridayITSend Message
LinkedIn ManFridayIT
phone ManFridayIT01332 949783

Responsive Web Design

Responsive Design
A responsive design website will, to a certain extent, shrink the web page to fit the device being used, but after a certain point will re-organise its component parts to present differing views dependent upon the screen size of the device.

How Does Responsive Design Work?
There are various techniques for constructing a responsive design website, the use of ‘Media Queries’ in a Cascading Style Sheet (CSS), a Bootstrap Grid System and images that automatically resize themselves according to the browser screen dimensions. A combination of all three is perhaps the most effective, and is what ManFridayIT uses when building SMB and start-up websites.

Media Queries
Accompanying all web sites is a CSS or series of CSS files that the browser’s Operating System (eg Windows, Safari, Android) uses to help position and size the various elements on a web page, elements such as images, text colour and size, column width and height.

For instance landscape images (wider than they are high) do not resize in an  image-friendly way, if an image is square then it will scale down or up (to a certain extent) quite well. In the case of landscape images that cover the width of the page you could have three dimensions of the same image, one suitable for large desktop machines, one for tablets/small PCs  and the smallest would be sized for phones. In the media queries section you would specify the name of the image to be used for a certain screen size

The Media Queries section is placed below the CSS instructions and queries the size of the browser that is being used.
CSS entry:
@media screen and (max-width:480px){
Style rules would go here to cater for screens less than 481px in width, ie phones

Responsive Design Bootstrap Grid System

Bootstrap Grid System
The grid system uses a horizontal row of 12 boxes (or columns) covering the width of the page, the width of each is set for different viewing devices,
HTML entry
<div class="col-xs-12 col-sm-4">
This div, or section will spread the whole width of the available area (12 cols) if the browser size is extra small – xs (ie a phone), or if the viewing device is larger (small and  upward) it will take up a third of the width of the available area (4 cols).
So if you wanted that part of the page to have three equally sized columns there would be a further two identical HTML entries after this. In a phone these would be viewed one on top of another, on a larger screen (tablet or PC they would appear side by side as three columns.

Responsive Images
To keep images in perspective with the browser size, in the HTML code their maximum width is set to 100%, so they will not increase in size, but will decrease in proportion to the screen size.

Web design by ManFridayIT utilises the Bootstrap Grid System, Media Queries and responsive images.


ManFridayIT welcomes a Reply or Comment

Your email address will not be published. Required fields are marked *