In today’s world, most people want to browse the internet and do all the work from their handheld devices. These handheld devices include mobile phones, tablets or the recently crowned term, Phablets (the term phablets is used to describe a phone with a huge screen size, such as the Samsung Galaxy Note, which was one of the first phablet in the market). The challenge that web developers and designers face is that they have to make a website that can be scaled to any screen size, even for large desktop monitors. This challenge can be overcome by using a Responsive design.
Earlier, designers and developers had to do work on a separate mobile website, which catered to small screen sizes. But since the mobile phones started to roll out in different screen sizes, it is kind of difficult to develop such a mobile website. An alternative to that is a Responsive Design. If you are unaware with this term, let me go ahead and explain it to you in a few simple words.
A responsive design is a type of web-design technique, which aims at providing a design for optimal viewing experience for all screen size users. It allows the reader to read the main content without having to pan, zoom or scroll into the website. It has become a popular designing technique in the recent times, and has attracted various businesses to transform their website designs into a responsive one. If you are a web designer, I am here to help you create a responsive design for your next project.
Creating a Responsive Design
The responsive design that you create for your next project, or your old project will basically depend upon your actual full-website design. In order to create a responsive design, you need to first create a full screen website design, for a laptop or desktop computer. Then once you are done, you need to change some elements in the CSS styling, that you need to adjust for various screen sizes.
In CSS, you can make use of the “@media screen” property to calculate the screen size of the device currently viewing your website. This property can be used any number of times in a CSS document, each time to specify the change in CSS for that particular screen size. The syntax that you will use for this property is as follows.
@media screen and (max-width:xx) {
/*Enter your styling here */
}
Now, in order to help you create better designs, let me share with you the few basic screen sizes that you can consider while making your design responsive. You can make use of the following screen sizes for creating an effective responsive design for your website.
@media screen and (max-width:1050px) {
/*Enter your code here */
}
@media screen and (max-width:900px) {
/*Enter your code here */
}
@media screen and (max-width:865px) {
/*Enter your code here */
}
@media screen and (max-width:720px) {
/*Enter your code here */
}
@media screen and (max-width:600px) {
/*Enter your code here */
}
@media screen and (max-width:450px) {
/*Enter your code here */
}
@media screen and (max-width:300px) {
/*Enter your code here */
}
All that you have to do in the above code is to just change the style for that particular screen size within the scope of that particular screen size. A tip for web designers : You can make use of the Zoom feature in Google Chrome to enlarge your web page, and then based on that, your responsive design should show up.
Well, that is all for this article. Feel free to contact me using the contact page or the comments section below if you have any queries. Also, don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter. I am definitely going to cover more on the topic of responsive design and probably will teach you all how to create a responsive design from scratch.
