The adaptive design (responsive design)

Users accessing the Internet through tablets and mobile phones are increasing. This, as you know, means that it is not enough to just design a good website that looks good on our computer: it also has to be seen on each mobile device. The problem? Different screen sizes and resolutions. That is why it is so difficult to make a design that adapts correctly to all media (the famous responsive design, translated as adaptive design).

Here are some tips to keep in mind when making a design with these characteristics. Pay attention!

Tips for adaptive design

1. Make a simple templateBy simple I don't mean bland. I'm talking about the structure HTML of your website: the clearer it is, the better. Keep in mind that a computer screen can fit three vertical columns; on the screen of a mobile, you will only fit one. Think about it and how you will reposition the elements.
2. Eliminate everything unnecessaryAvoid jQuery effects, Flash animations and any other code that slows down the loading of your page. The less content of this type you have, the faster the web will load.
3. Define a style css for each "size"Create a tiny.css, small.css, and big.css (for example) that runs based on the device it's viewed on. For example:
   

   @import url (tiny.css) (min-width: 300px);

   @import url (small.css) (min-width: 600px);

   @import url (big.css) (min-width: 900px);

4. The most used resolutions320px/480px/720px/768px/900px/1024px
5. Make your template FLEXIBLEWhenever you can, work with percentages instead of fixed amounts. Here are some reference equivalences: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Typography more important than ever Sometimes your device screen can be so small that all you see is text. That is why we have to select very carefully the best fonts on our site, so that when they are reduced in size they do not lose legibility. In addition, we have to know how to combine more neutral fonts with others with personality that give the web the necessary character. Therefore, the first tip is that you spend time selecting the fonts that you are going to use.
7. Use high quality imagesAs the space is reduced, the images will accompany it. Select those that do not lose quality when reduced, and that work the same when scaled. A low quality image will make your website look bad.
8. That your images are always seen fullPrevent your photos from being cut off by adding the img (width: 100%;) code in your css. In this way, you are telling the device to recalculate the height that it should give the image so that its width can be seen one hundred percent.
9. Everything under the same URLForget about subdomains like www.mysite.com/mobile, since the same index.html file in the root folder will work for all devices (if you do the adaptive design correctly). You already know the advantage: the fewer subdomains, the faster the page load will be.
10. Take advantage of the supports: Be imaginative It is not the same to access a website from a desktop computer than from an iPad or a mobile phone. With the first, you will navigate in a calm and calm way. With the latter, you will do it in idle hours and close the window as soon as you get bored. Take advantage of these conditions to entertain the user and make them have fun in those few minutes that they are going to dedicate to you. Maybe when he gets home he will decide to visit you in a more relaxed way.
11. Get inspired In digital publications, you will wonder why this advice. Very easy: digital magazines (good) know how to take advantage of the support and their design is very intelligent. Get inspired by them and make a website that is hard to leave.

More information - Digital magazines

Source - splio, 960.gs, columnar