1 / 19

Useful CSS for responsive web design

Response means reactive or quick to respond, and as related to web, means quick to response on any event of mouse.

SteveFort
Download Presentation

Useful CSS for responsive web design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Useful CSS for responsive web design Created by : infobizzs.com

  2. Meaning of Responsive Infobizzs

  3. 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. Infobizzs

  4. 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. Infobizzs

  5. What the user want from your site? Infobizzs

  6. 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. Infobizzs

  7. 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. Infobizzs

  8. The Desktop View of “Bootstrap” Infobizzs

  9. “Viewport” Meta Tag: Infobizzs

  10. “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"> Infobizzs

  11. “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. Infobizzs

  12. The Mobile View of “Bootstrap” Infobizzs

  13. Keep Focus Infobizzs

  14. 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. Infobizzs

  15. For 980px or less @screen and (max-width: 980px) { #pagewrap { width 94% } #content { width 66% } #sidebar { width 30% } } Infobizzs

  16. For 700px or less @screen and (max-width: 980px) { #content { width: auto; float : none; } #sidebar { width: auto; float : none; } } Infobizzs

  17. For 480px or less (for mobile user) @screen and (max-width: 980px) { #header { height : auto; } h1 {font-size : 20px;} #sidebar { width: auto; float : none; } } Infobizzs

  18. Conclusion • I have just seen you few queries, but you can write as many as you require. • This different query is useful for different viewports. Infobizzs

  19. Thank You… Infobizzs

More Related