Adaptive layout code. Adaptive layout: what it is and how to use it. Adaptive layout - where to start

In order for the layout of your site to look good on iPhone or tablets, it must be adapted to these devices and it is important to do it efficiently...

Adaptive website layout (sometimes also called mobile-friendly) - DETAILED and step by step as in the lesson:

Please note: Yandex and Google have their own tools with which you can check the site for adaptability. Yandex has new version For webmasters, it is located like this: tools - checking mobile pages.

If you want to know how to make a responsive website design, then this will be written below and in detail in the examples, BUT, if you do not have skills in working with css, it will be more difficult. Or your programmer or webmaster can do this.

Responsive website design - involves setting the width of the page window and the width of columns and sidebars in %, in adaptive - in px.

Please note: if you have a popular engine for your site, such as wordpress, then they do not have a “headache” with adaptive design - everything is done there in a couple of mouse clicks - the plugin is simply installed and activated and that’s ALL). For example, for WP - I used WPtouch - it is very good, but if you have a full-time programmer, then it is better to do this moment individually.

You need to understand that basically, with adaptive layout, the following are often manipulated: width (width of the element: max-width and min-width), float (wrapping, it is removed as the width of the window decreases), font-size (the height of the letters is changed).

1) First you need to write a special meta tag for different types devices:

2) Adaptive page parameters (width and height):

Container (
width: 800px
max-width: 90%;
}

In this case, a fixed container width is set, but it should not be more than 90% of the window width, and this is very convenient - then the site itself will adapt to the size of the window.

3) Css adaptive layout for images of the entire site:

img (max-width: 100%;
height: auto;
}

Here we show that the size of the picture: its maximum width should be no more than 100% of the eye - this way the picture itself adjusts to the size of the phone or other gadget. Here is such a simple method - adaptive image design.

4) Adaptive layout of website text: in this case, manipulations occur with font height: font-size and other parameters.

Break-word ( word-wrap: break-word; )

This CSS is designed for hyphenation when there are long non-hyphenated words.

There are many errors in font size: Yandex loves to write - Text size is too small to read on mobile devices ah - for this we do this:

body (font-size: 16px) - this will avoid this error, and for the p tag and for links you need to put it separately. It is precisely because the body tag contains font-size: 12 or 14 px that this error occurs! And this is the verdict:

5) Adapting a 3-column design or 2-column layout - there is nothing complicated about this if everything is done on divs - oh, then usually you need to cancel the wrapping, that is, set float to none and the blocks will go down.

6) Adaptive CSS for video (from Habr):



Video (
position: relative;
padding-bottom: 56.25% ;
height: 0 ;
overflow: hidden;
) .video iframe ,
.video object
.video embed (
position: absolute;
top: 0 ;
left: 0 ;
width: 100% ;
height: 100% ;
}

Media Queries - media queries

To create an adaptive design, media queries are often used (they set rules based on the width of the screen - based on the screen resolution).

Here is a sample media queries - what resolutions to use for adaptive design:


@media only screen and (max-width: 1200px) (


@media only screen and (max-width: 992px) (

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) (


@media only screen and (max-width: 480px) (

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) (
/**/
}

/*========== Mobile First Method ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) (
/**/
}

/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) (
/**/
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) (
/**/
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) (
/**/
}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) (
/**/
}

But you can also avoid media queries by setting the width of columns and blocks in percentages.

For media queries, we start from the top: everything we did is acceptable for max-width: 768 will also work at 480.

What are the problems when adapting websites for mobile devices?

For example, Yandex can show this - There is horizontal scrolling:

You have something with padding or margin - reset them to zero for parent selectors (blocks) and you will be happy.

And at the end, Yandex Webmaster shows this:

I also did it for 4 hours, the first time is always difficult! But then, you can do it in just a couple of hours! And we send it to the webmaster for re-checking, so that it’s faster - important for SEO.

In general, today many people use ready-made templates - Bootstrap and there is practically no pain -

Adaptive layout The site allows web pages to automatically adjust to the screens of tablets and smartphones. Mobile Internet traffic is growing every year, and in order to effectively process this traffic, you need to offer users responsive websites with a user-friendly interface.

Search engines use a number of criteria to evaluate a site's responsiveness when viewed on mobile devices. Google is trying to simplify the use of the Internet for owners of smartphones and tablets, marking sites adapted for mobile devices with a special mark mobile-friendly in mobile search results. Yandex also has an algorithm that gives preference to sites with a mobile/responsive version for users in mobile search.

You can check the display of the page on mobile devices on the services and.

Rice. 1. Mobile search results from Yandex and Google with a note about the site’s friendliness to mobile devices. What is adaptive layout?

Adaptive layout assumes the absence of a horizontal scroll bar and scalable areas when viewed on any device, readable text and large areas for clickable elements. Using media queries, you can control the layout and placement of blocks on the page, rebuilding the template so that it adapts to your needs. different sizes device screens.

Basic techniques for creating a responsive website are given in the article. For responsive design, the width of the main site container is set in %, and it can be equal to 100% of the browser window width or less. The width of the grid columns is also specified in %. In responsive design, the width of the main container and grid columns is fixed using px values.

The adaptive fluid layout technique discussed in this lesson will work perfectly on a two-column template, making the site adaptive and convenient for viewing on mobile devices. The template assumes a different layout of the main content of the pages; in this lesson the layout of the main page will be discussed.

Home page layout

A page consists of three main blocks: a header (header), a wrapper container for the main content and sidebar, and a footer (footer). Let's take 768px and 480px as design turning points.

At the first point, we will hide the top menu and move the sidebar under the container with posts. At the second point, we will change the location of the header elements, cancel the positioning of social network buttons in posts, and cancel the wrapping of the page footer columns.


Rice. 2. Example of adaptive layout 1. Meta tags and section

1) Add the necessary files to the section - a link to the fonts used, the jQuery library, as well as the prefixfree plugin (so as not to write browser prefixes for properties):

Adaptive website layout

2. Page header

We will place the following container elements in the page header:
logo

Read Also

Safety

AirDrop - how to use?

2024-02-21 03:53:31

Liked? Like us on Facebook