Useful CSS for responsive web design
Created by : infobizzs.com
Meaning of Responsive
Meaning of Responsive •
• •
Response means reactive or quick to respond, and as related to web, means quick to response on any event of mouse. Most of web developer has no clear idea of responsive web design. It is not the site for mobile devices, but the website for all the devices starting from desktops, laptops, tablets and mobile phones.
Meaning of Responsive •
•
• •
Responsive web developments is come into existence due to most of the people use mobile phones and want to access sites from the same device. So web developer has to design site which have vary viewport sizes. This website must fit to any viewport size and it is possible through scaling. Beginner found this topic as difficult, but actually it is as simple as they have fear.
What the user want from your site?
What the user want from your site ? •
Sometimes we think that cut down some features which is not useful according to you, but it may happen that user come to your site for that particular feature.
•
You can’t decide what the important content is.
What the user want from your site ? • • •
For example, surf the site bootstrap from desktop and at the same time from mobile also. You can see the full menu on your desktop, while on smart phone, you can’t find the full menu, but the content is same. To make your site responsive, you have to decide minimum width, maximum width and relative value while designing the CSS.
The Desktop View of “Bootstrap”
“Viewport” Meta Tag:
“Viewport” Meta Tag • • •
•
As said here, you must make the design scalable for different type of viewports. Here, there is one „viewport‟ meta tag to decide the width of device. This meta tag tells the browser to use the device width as the viewport width. This meta tag must be include in <head> part.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
“Viewport” Meta Tag • • • •
In the above image, the browser takes desktop width for website and for below image the browser takes the mobile phone width. If you want to design good responsive site, than you have to keep patient for that because it requires time and efforts. As you know now, the same site is useful for all the devices and the code is also single for all the viewports. So there is no need to cut down content for small devices.
The Mobile View of “Bootstrap”
Keep Focus
Keep Focus • •
• •
While designing a responsive website, first you should design for small device. So in this way, you know which information is the important for your users to give. Other than this, you must say to browser how to render the webpage. For example, you can set width for 980px or less viewport.
For 980px or less @screen and (max-width: 980px) { #pagewrap { width 94% } #content { width 66% } #sidebar { width 30% } }
For 700px or less @screen and (max-width: 980px) { #content { width: auto; float : none; } #sidebar { width: auto; float : none; } }
For 480px or less (for mobile user) @screen and (max-width: 980px) { #header { height : auto; } h1 {font-size : 20px;} #sidebar { width: auto; float : none; } }
Conclusion â&#x20AC;˘ â&#x20AC;˘
I have just seen you few queries, but you can write as many as you require. This different query is useful for different viewports.
Thank You…