What is Responsive Web Design?

Responsive web design is the concept of designing a website that scales to various screen sizes.  With the increase in web surfing from tablets and mobile devices a website needs to work at different screen dimensions and resolutions.  The choice is to either build a mobile version, or have a website that scales responsively!
click image to enlarge

Currently the main "sizes" can be categorised as:

  • 960px to 1024px (tablet landscape to standard desktop)
  • 768px to 959px (tablet portrait to desktop)
  • 480px to 767px (mobile landscape to tablet portrait)
  • Less than 480px (mobile portrait)

So how do you create a website that is fluid and scales to fit these different sizes?
The secret lies in CSS3 media queries.
Media queries allow you to serve up different CSS styles depending on the current screen size.  The great thing about this is that new devices (mobiles and tablets) will be able to use media queries, and old devices will just see the standard desktop web site.

Using media queries
Based on the above sizes we can write our CSS in the following order:
/* all styles for standard desktop here */
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* styles for tablet portrait here */ }
 @media only screen and (max-width: 767px) {
/* styles for mobile portrait here */}
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* styles for mobile landscape here */}

And that's all there is too it!

Hiding elements in Mobile views
What if you decide there are some elements you just don't want to show in mobile views? (like flash elements or slideshows).
We can simply use CSS to hide that element in the correct portion of the above code using:
#divname {display: none;}

Scaling images
There are a number of solutions for flexible images so that they scale for the correct device:

  1. Use the media queries above to load different sized background images into div tags based on the screen size.
  2. Use width and height attributes to scale images, but this doesn't optimise the size of the image (same image is downloaded)
  3. Use the overflow property in CSS to crop images
  4. Javascript solutions that resize your images

Comments

Post a Comment

Popular posts from this blog

PHP, MySQL, JavaScript & HTML5 All-in-One For Dummies

Image
PHP, javascript, and HTML5 are essential programming languages for creating dynamic websites that work with the MySQL database. PHP and MySQL provide a robust, easy-to-learn, open-source solution for creating superb e-commerce sites and content management. javascript and HTML5 add support for the most current multimedia effects. This one-stop guide gives you what you need to know about all four! Seven self-contained mini books cover web technologies, HTML5 and CSS3, PHP programming, MySQL databases, javascript, PHP with templates, and web applications.
Read more

3 Best Applications that Organize your Chat and Messaging Accounts

Image
Vast of Instant Messaging (IM) platforms are made available in the internet nowadays. It helps every users to easily exchange messages, multimedia or even real-time virtual interaction with each other through computers and other portable devices. These mode of communication are somewhat important for everyone in this modern society and this applications plays a very essential and effective role in our daily living. Some of us are just busy interacting with people in such a way of bringing everyone closer, business matters, family, friends and others. Facebook Messenger, WeChat, Skype, Google Hangouts and Slack are just a few to mention of this platforms, it offers similar services but with quite different features. One has to sign up with these IM applications to start communicating and most of this services are being offered free. As of these days, people do have multiple accounts in different platforms, interacting people from different sides for different matters. As for me, I ...
Read more

Japan Style: Architecture Interiors Design

Image
Enter the world of the stylish Japanese house, where every object in sight is a work of art. Japan Style introduces 20 special residences. With more than 200 color photographs, this book showcases the stunning beauty of old homes, and reveals how they are cared for by their owners. Traditional Japanese homes, with superbly crafted fine wood, great workmanship and seasonal interior arrangements, have an aesthetic of infinite simplicity. Unlike Japanese inns and historical buildings, the houses featured in this book are private property and are not open to public viewing. Japan Style offers a rare glimpse into the intimate world of the everyday Japanese and fascinating insight into the traditional architecture of Japan download link http://libgen.io/_ads/E7F3D5D3E376CB1E116D00AFC8E89AC4 .
Read more