Adaptive layout using html5 and css3. Video course “Adaptive layout in HTML5 and CSS3. Styles for the main content block

Adaptive website layout 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 by 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 a page, rearranging the template so that it adapts to different device screen sizes.

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 ;
button to show/hide the main menu;
Main menu

;
site search form.

L O G O

We will wrap the announcement of articles with the element:

Design Spring

The Russian language is very rich in words relating to the seasons and the natural phenomena associated with them.

In the side column we will add a list of categories, recent posts and a newsletter subscription form:

Categories

In the footer of the page we will place copyright information, social network buttons and an email link:

General styles, reset browser styles to default:

*, *:after, *:before ( box-sizing: border-box; padding: 0; margin: 0; transition: .5s ease-in-out; /* add smooth transitions for all page elements */ ) ul ( list-style: none; ) a ( text-decoration: none; outline: none; ) img ( display: block; width: 100%; ) h1, h2, h3, h4, h5, h6 ( font-family: "Playfair Display"; font-weight: normal; letter-spacing: 1px; ) body ( font-family: "Open Sans", arial, sans-serif; font-size: 14px; line-height: 1; color: #373737; background: #f7f7f7; ) /* add flow cleanup for all containers that have child elements wrapped inside them */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after ( content: ""; display: table; clear: both; ) /* style class that controls the width of the grid container */ .container ( margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px ; )

We divide the site footer into three equal columns:

Footer ( padding: 30px 0; background: #3C3D41; color: white; ) .footer-col ( width: 33.3333333333%; float: left; ) .footer-col a ( color: white; ) .footer-col:last- child ( text-align: right; ) .social-bar-wrap ( text-align: center; ) .social-bar-wrap a ( padding: 0 7px; font-size: 18px; )

The jQuery code that we previously added to the page markup before the closing tag is responsible for showing and hiding the top menu when the button is clicked (the height of the menu is switched from zero to equal to its contents):

$(".nav-toggle").on("click", function())( $("#menu").toggleClass("active"); ));

From the author: ever since articles demonstrating the new properties of HTML5 and CSS3 began to appear on the Internet, I had the idea of creating a website layout without images. Taking advantage of the improvements in HTML5 and CSS3 (over previous venerable specifications), it's not too difficult to put together a decent looking website that doesn't have to rely on images for markup.

Here is an image of the site that we will design using HTML5 and CSS3:

Before we begin practical steps, I recommend that you view the demo result of the work.

The header element represents the introductory group or navigation aids.

Following their recommendation, the header element will contain our logo, subheading and main navigation. When we enter the header header element, we have a markup detail containing all those parts of the page that we intuitively think of as a header. (Or all those page details that will be nested in the div element with the header id.) The header element can be used more than once on the page, and we will use it again inside article elements, which will contain intros to posts.

First inside the header element is another new tag, hgroup. We will use it to display our site's logo and subtitle respectively in the h1 and h2 tags.

The hgroup element is used to group a set of h1-h6 elements when a heading has multiple levels, such as subtitles, alternate titles, or subheadings.

The hgroup element may look redundant unless you wrap the headings in a div element as usual so that the title or subtitle(s) have a normal background or style. However, hgroup plays an important role in the document schema. The schema algorithm checks your page and reports the header structure. Check the outline of your work using the Outliner tool. When the schema algorithm encounters an hgroup element, it will ignore everything except the highest level heading (usually h1).

Now we have a problem: the circuit algorithm is not perfect and not complete. For example, the next element we'll discuss is the nav element, and the markup marks it as "Untitled Section". There have been requests from markup developers to change the schema algorithm to represent the nav element as "Navigation". In any case, the hgroup element provides you with a way to group your headings and thus organize them both structurally and semantically.

We move on to the next HTML5 element, nav. In nav we will include the main navigation of the site, wrapped in an unordered list.

The nav element represents a section of a page that links to other pages or areas within a page: the area with navigation links.

Using nav to create the main navigation of a site is something of a given, but the circumstances are such that there will be more areas on your site that contain links; the question is which ones you should wrap with a nav tag. Here are some use cases that I think might be suitable:

Related Posts.

According to the specification, these may or may not be appropriate uses of the nav element. The specification is not very clear and the examples given are not very helpful. So while the specification is not final and more specific, you can only rely on the developer community to determine the correct method for using the nav element.

The next element I want to introduce to you is article. The main area of our demo page contains three post quotes, and we'll wrap each of them in an article tag.

XHTML

2010 16apr Sample Post 1 38

Curabitur ut congue hac, diam turpis[…]

cool

modern

hype-friendly

2010

April 16

Sample Post 1

Curabitur ut congue hac, diam turpis[…]

Written by: Author Name

Tags: cool modern hype-friendly

Here is the W3C definition for the article element:

The article element represents a modular composition in a document […], so it is intended to be self-distributable or reusable, such as in syndication (the simultaneous publication of content on multiple Web sites).

This time the specification is clearer and the blog post (or excerpt) is much better ( note the mention of syndication) goes to article. Of course, we can place many article elements on a page.

You've no doubt noticed that inside the article we've placed header and footer elements. Both header and footer can be used more than once on a single HTML page. Since header is an “introductory group or navigation aid,” we included the date, title, and number of comments. Next, we have a paragraph with an excerpt from the post, followed by a footer.

As I said before, the footer can be used as many times as needed on a single page, and it represents the footer segment of a document page, or part of a document.

The footer element represents the footer of the section it is accessing. Typically, the footer contains information about its section, such as authorship, links to related documents, copyright date, etc.

We have four footer elements on our demo page: one for each of the three article elements and a common footer for the entire page. The footer in the article element contains the post author's name, tags, and a link button to the full blog post.

The general footer contains three section elements and a copyright notice. Both uses of the footer element are legal and comply with the W3C recommendation.

The general footer area of our demo page contains three section elements. In them, we list our most popular blog posts, recent comments, and a short biography of our fictional company.

The section element represents the general area of a document or application. A section in this case is a thematic grouping of content, usually using a heading.

The section element is quite tricky because in its specification definition it appears very similar to the div element. I fell into this trap when I started coding the demo page; I placed three article elements inside the section element. I soon realized the error of my methods. The only way to decide whether to use section is to see if the area you want to wrap with a section element needs a title. From the definition, you can see that the section element usually has a title.

Another question that is useful to ask to determine the validity of using the section element is: are you adding it solely for styling purposes? You're adding it simply because you need to make the section stand out using JavaScript, or because you need to apply regular styling to it and you need to use a div element instead.

Wrapping the three article elements of our demo page in a section tag would make sense if the section included a title like “Latest Blog Posts.” It would make sense; otherwise, the tag that contains the article elements is just styling support—something that helps us target it using JavaScript or CSS.

The last HTML5 element used for the demo page is aside; we used it as a sidebar container.

The aside element represents a section of a page consisting of content that is superficially related to the content surrounding the aside, and which can be perceived as separate from that content. Such sections are often represented in typography as sidebars.

As you can see from the specification, one example of an ideal use for the aside element is in a sidebar. Below in the graph you can see the hierarchy of the aside element on our demo page.

We placed two sections and one nav. The first section element contains links to Twitter and RSS, and the second represents the latest tweet (user's post on Twitter). The second section element is also one of the rare cases where it does not have a title. It could have a title, something like “Last Tweet,” but I don’t think that’s necessary because readers are used to seeing blocks like this, and Twitter’s tag under the quote is very recognizable. Our sidebar nav element is used to display a list of blogs and, unlike the main navigation, it has a title.

So, the first part of our article on website layout in HTML5 and CSS3 has come to an end. I tried to keep it as short as possible and not spend too much time on the uncertainties in the HTML5 spec because it's not finished yet. In the meantime, we will have to rely on the community and the work of HTML5 “healers” to become our guides in introducing new elements into the sites.

Thanks for reading and don't miss Part 2 of this article where we'll discuss CSS3 properties used to decorate markup.

As always, I look forward to any questions or comments. Please don't be afraid to speak up and start a discussion about the use of new elements, because this is the best way to clarify their usefulness.

Editor: Rog Victor and Andrey Bernatsky. webformyself team.

You can't get far without HTML5 and CSS3

Modern websites and web development can no longer be imagined without HTML5 and CSS3, no matter how you look at it.
Any project, any customer requires a valid, cross-browser and modern layout in HTML5 and CSS3, and must be adapted for mobile devices.
If you know how to code in HTML5 and CSS3 and adapt the project for mobile devices, then you can safely increase the cost of an hour of your work.
Well, if you are creating a website for yourself, then this knowledge will help make it better, more functional and more convenient. As a rule, this results in an increase in positions, an increase in traffic and, accordingly, income.

Do you know that...

Now in the search results (in the TOP 10) of Yandex, 55% are sites with adaptive design that can adapt to mobile devices. This suggests that Yandex (and Google too) gives greater preference to sites with responsive design. Those. those on which the user is comfortable.
And HTML5 and CSS3 add additional features to the site, with which we can make the site even more convenient.
For both users and robots.
Landing page (Landing page) is used to convert visitors into subscribers or clients.
Also sometimes used for traffic segmentation.
A landing page can be either one separate page on a domain or as part of a full-fledged website.
In this case, the site is promoted in search, and the landing page is used for advertising in Yandex.Direct, Google Adwods, Target VKontakte, etc.
This combination allows you to make the most of many Internet marketing tools.
Now there is an opportunity to quickly learn and apply all this in your activities.

HTML5 + CSS3 + responsiveness + Landing Page
With this course you will be able to:

create responsive websites and pages
adapt them for mobile devices
use HTML and CSS capabilities in your own or client projects
create any landing page: capture pages, subscription pages, product landing pages, etc.
add various effects and scripts to the landing page
create and use advanced feedback forms and much more.
With this video course it won't be difficult at all!

Course Summary

Introductory part

New features in HTML5 and CSS 3 that simplify and facilitate the layout process.
Semantic markup - its secrets and why it is needed.
Inserting media objects - how to insert audio and video without a player.

Practical part

Step-by-step creation of a landing page.
From planning the layout, layout of each block of varying complexity, to connecting scripts and PHP handlers for forms
Carousel/slider, smooth scrolling, buttons, CSS sprites, form validation, etc.

Add. materials

The additional materials contain all the scripts and sources with which we will work + cheat sheets with code that you just need to copy and paste into the right place.
As well as other useful sources.
Number of video lessons: 23

What will you be able to do after completing this course?

In preparation

Understanding PSD layout using PhotoShop
Cut out the desired images from the PSD layout
Find beautiful landing page and website designs
Design blocks and layout stages
Merge icons into CSS sprites
Working with PhpDesigner

In terms of layout

Connect beautiful fonts from the Google repository
Use pseudo-classes effectively
Adapt the site for all mobile devices
Use 2 or more backgrounds for a block, animation, transformation, RGBA, etc.
Work with @media queries
Insert interactive Yandex maps
Create CSS sprites and speed up page loading
Use pre-designed styles (similar to frameworks like Bootstrap)

In terms of improvement

Create hover effects ("revival" when hovering)
Make smooth scrolling to blocks and for the "Back to Top" button
Validate feedback forms using JQuery
Create smart feedback forms with transmission of UTM tags
Connect and configure goals in Ya.Metrica using events
Lighten pages by making them load faster
Check and correct defects on pages

Modern websites and web development can no longer be imagined without HTML5 and CSS3, no matter how you look at it. Any project, any customer requires a valid, cross-browser and modern layout in HTML5 and CSS3, and must be adapted for mobile devices. If you know how to code in HTML5 and CSS3 and adapt the project for mobile devices, then you can safely increase the cost of an hour of your work. Well, if you are creating a website for yourself, then this knowledge will help make it better, more functional and more convenient. As a rule, this results in an increase in positions, an increase in traffic and, accordingly, income.

Additional Information

Introductory part

0. Introductory video
About the course and how to use it

1. HTML5. Semantic markup
About new tags: header, nav, section, aside, article, etc.

2. HTML5. Media objects
Inserting video and audio without additional players + attributes.

3. HTML5. Forms
Working with forms in HTML5 + new field types.

4. HTML5. Other options
Examples of implementing other features in HTML5

5. CSS3. New properties in CSS3
Linear gradients, radiuses, transparency, shadows, transformation, animation.

Practical part

1. Layout and PSD source
Getting to know the PSD source and sketching the future layout

2. Header layout
Calculation of adaptive dimensions and header layout + formula for calculating EM and %

3. Layout of the "Services" block
Stage planning, image preparation and block layout.

4. Layout of the "Portfolio" block
Planning, double classes and layout.

5. "Portfolio" block: hover effects
Creating a hover effect when hovering over elements using CSS3.

6. Layout of the “About Us” block
Layout of a tricky block with positioning and pseudo-classes.

7. Layout of the “Our Team” block
Preparation and layout of the block + creation of CSS sprites

8. Layout of the "Partners" block
Layout of a block and insertion of an image carousel using JQuery

9. Inserting a Yandex map
Insert a full-width Yandex interactive map.

10. Layout of the feedback form
Planning a stage, creating a form with new field types.

11. Block with copyrights
Layout of the copyright block, CSS sprite extension, date insertion in PHP

12. Improvement and revision
Adding a smooth scrolling function to blocks and a "Back to Top" button (3 options)

13. Improvement and revision part 2
Validation of fields in the feedback form (via JS) + protection against SPAM bots

14. Adaptation for mobile devices
Adaptation for tablet and mobile phone screens + work with FireBug

15. Adaptation for mobile devices part 2
The second part of the adaptation video.

16. PHP form handler
Creating a handler script in PHP for the feedback form.

17. Smart feedback form
Connecting a script for a feedback form with transmission of UTM tags and writing to a CSV file.

18. Transfer to hosting and validation
Transferring the landing page to hosting via FTP, checking, speeding up and setting a goal in Yandex.Metrica.

Smartphones are becoming an integral part of life, so the share of mobile traffic is steadily growing. Layout in HTML5 and CSS3 allows you to adapt desktop browser pages to the interface of mobile media. The video course on adaptive layout was created so that you can master the professional environment and make your website more convenient.

The author of the course “Adaptive Layout in HTML5 and CSS3” Oleg Kasyanov is an experienced web developer, founder of the Internet resource JoomlaTown.net, blogger and creator of training programs for beginners and experienced professionals.

Each video lesson is accompanied by an explanatory commentary from the author. You will learn about the features of using HTML5 and CSS3 technologies, improve your development skills, and also learn how to create customized layout.

Oleg Kasyanov's video course consists of theoretical foundations, practice and additional materials. You will receive answers to the following questions:

what is the functionality in HTML5 and CSS3 layout;
what is semantic markup;
how to work with different types of media objects;
what are the stages of creating landing pages;
why it is important to mix types of page forms and visualizations;
main difficulties with creating a mobile version of the site.

The course “Adaptive Layout in HTML5 and CSS3” is accompanied by templates for work, scripts and cheat sheets with code. Oleg greatly facilitates the learning process, thanks to which you can actually master working with HTML5 and CSS3 several times faster.

The results from completing the course will not be long in coming: you will learn to analyze the current situation, see the design of the future web resource, and also make useful changes. Oleg Kasyanov's course will help you master adaptive layout in HTML5 and CSS3.

All about mobile technology

RELATED ARTICLES