Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to make a Responsive Design?

See this article some tips on Responsive Design and start right now to create adaptable, fluid and responsive websites.


You've already convinced your boss or client that Responsive Design is the lastchocolatecookie in the package, you know how to work with media queries and how to develop beautiful, fragrant and semantic codes. But the question still persists - where to start? You are not alone. This is a very common question. For this reason we decided to write a basic article only with prototyping responsive design tips for collecting some useful tools, interesting articles and also commenting on some our my personal experience in dealing with it day-to-day.

What is responsive design?


Responsive design is a HTML and CSS structuring technique, which is to adapt the website to the user browser without having to define multiple style sheets especíificas for each resolution, that is, it's a type of design where the layout is fluid and variant according to the resolution of the user.

This kind of responsive design originated in 2010 with the aim of improving the browsing experience of web pages users.

Why should we use Responsive Design?


In the present times we know that the amount of new devices with internet access that emerged in addition to desktops and laptops, is immense, such as smartphones, tablets, cameras and even refrigerators.

Thinking about it, developers need to have a much greater concern to make their websites available for that audience, is then where comes the importance of a website to be well seen on any device, regardless of your screen resolution.

More than just a design trend, responsive design is a set of modern tools and techniques that define how content is displayed to the user.

See the image below which shows the difference in the percentage of access for mobile devices in different regions of the world between the years 2012 and 2013.


Figure 1. Difference between access via mobile devices

Keep your layout clean


This may sound a bit cliché, but it really is not. Many developers create their websites with dirty codes often automatically generated by software and IDEs that help beginners in the creation of projects.

It is extremely important that this new phase of responsive sites that developers make their clean code and only write code that will be used in fact. Do the simplest code possible, avoiding unnecessary hype.

Avoid:
  • Div's unnecessary
  • CSS styles inlines (always use external files)
  • JS or Flash files without fallback
  • position absolute or unnecessary float positions
  • Avoid redundant codes or codes that are not 100% useful

Try to use:
  • Doctype html5
  • Use a Reset CSS
  • Simple code and semantic
  • Simple techniques for elements such as navigation bars, menus, etc.

Grids are friends


Responsive design is basically like putting together a puzzle where you can stretch, shrink, break and bend structures. Accomplishing this task will be much easier if you build sustained by a grid layout.

It is not absolutely necessary to use a grid on your CSS (although it is a recommended practice), but if your basic wireframe is organized in this format helps a lot when designing the design more fluid, symmetric and organized manner. This is because you can just rearrange the blocks and columns of your layout more logical and mathematical way, which will reflect in a greater cohesion of the final design.

This part of the workflow is very similar to creating a layout design to "normal". The first step therefore is to create such a grid, essentially a set of lines "invisible" that will sustain its design. Think you'll have to break this structure into smaller pieces and to maintain symmetry the best option is an even number that can be divisible by 2, 3 and/or 4 ... Therefore, grids of 12, 16, 18 or 24 columns are quite common. (You can choose the number you want. I myself have worked with 14 columns. He took another job. Do not say I did not warn you ...). Do not forget the space of the margins between the columns.

Test of whether you are on the right track:


Remove any and all CSS and see your site in their preferred browser. If even then the contents remain easy to read and orderly, you're probably on the right track for a successful development of a responsive website.

Use Media Queries


For responsive designs you need to focus on the width conditions, where depending on the width of the content of his client, that is, depending on the resolution of the device that your client is accessing the website, a different style sheet will be loaded or a sheet of specific style.

Let's see some examples?

Below we see some examples of how to call different style sheets depending on the resolution of each device.

Listing 1: Example of different CSS in different resolutions
<style>
 @import url(tiny.css) (min-width:300px);
 @import url(small.css) (min-width:600px);
 @import url(big.css) (min-width:900px);
</style>
@media screen and (max-width: 300px) {
 /* styles */
}
@media screen and (max-width: 600px) {
/* styles */
}

We can also see some examples of resolutions below.

Listing 2: width 200px to 640 px
@media screen and (min-width: 200px) and  
(max-width: 640px)

Listing 3: Orientation for landscape least 600px
@media screen and (min-width: 600px) and  
(orientation:landscape)

Listing 4: Orientation for portrait of less than 380 px
@media screen and (max-width: 380px) and  
(orientation:portrait)

Frequent resolutions


A very common question is how to define which resolution size you should look for. In Figure 2 you can see a table in English that can help you to decide when developing your projects.


Figure 2. More frequent resolutions.

Define breakpoints


Common resolutions can be classified into six major breakpoints, you can work with them as follows:

<480 Send to the first generation of smartphones in portrait mode with <480px
<768 Use the condition <768px for the most tablets and smartphones of second generation
>768 Notebooks, desktops and TV's will use the rule >768px.
Table 1. Common resolutions.

It's good to use also this way:

<320Use for low resolutions
768-1024Tablets in landscape mode should use the rule >768px AND <1024px
>1024Use the layout in fullscreen widescreen for desktops, notebooks and high resolution devices >1024px
Table 2. Deining breakpoints

Make your flexible layout


Flexible grids use columns to organize the content. They use relative widths instead of fixed to suit the user's screen width.

Fluid layout is always the best way to be ready for any type of screen size and/or orientation. Thus will matter little if the user is accessing the site for a smartphone or a television 42", the layout will adapt to the resolution of the user.

Note: To avoid possible errors in calculations, use measures such as percentage and let the browser do the calculations.

Do not forget the Max and Min width

You can use min-* and max-* as limits applied to their relative sizes.

Its main function is to use to prevent the layout increase or decrease in the wrong way when displayed on a really large or small device.

Let's see some examples of use, suppose we want a fluid layout with more than 768px wide and less than 1024px, then we should use as follows:

Listing 5: Example use of min and maxwidth
min-width: 768px;
max-width: 1024px;

If we want a div with id="main" has no less than 1000px when viewed on a desktop, we can use as follows:

Listing 6: Do not be less than 1000px when viewed on a desktop
@media screen and (min-width: 1024px) { 
   #main { min-width: 1000px; } 
}

Conclusion


Over time this workflow becomes natural. By observing a layout you can mentally create the points of breakdown and some stages of this process can be skipped. You can, for example, work with only two wireframe formats: one for computers/tablets and one for smartphones. There are people who still prefer to burn down these steps and develop directly in CSS. Each has their way of working and neither is necessarily better or worse than the other. It's worthy testing different approaches until you find what works best for you, your staff and your customers.

With past tips in this article it is possible that web designers and front end developers can understand and delve a little deeper in the study of responsive design, which has become a trend and become a reality for the modern world.

I hope you enjoyed and to the next article.


Julio is a System analyst and enthusiast of Information Technology. He is currently a developer at iFactory Solutions company, working in the development of strategic systems, is also a JAVA instructor. He has knowledge and experi...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login