Smartphones are becoming an integral part of life, so the share mobile traffic growing steadily. Layout in HTML5 and CSS3 allows you to adapt desktop browser pages to the interface of mobile media. The video tutorial on responsive layout was created to help you master the professional environment and make your site more convenient.
The author of the course "Responsive 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.
Responsive website design - training
Each video tutorial is accompanied by an explanatory commentary by the author. You will learn about the peculiarities of using HTML5 and CSS3 technologies, improve your development skills, and also learn how to create an adapted 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 media objects;
- what are the stages of creating landing pages;
- why it is important to mix types of page forms and visualizations;
- major difficulties in creating mobile version site.
The course "Responsive 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 it is really possible to master the work with HTML5 and CSS3 several times faster.
Responsive HTML5 and CSS3 layout
The results from the course will not be long in coming: you will learn to analyze the current situation, see the project of the future web resource, and also make useful changes. Oleg Kasyanov's course will help you master responsive layout in HTML5 and CSS3.
You can't get far without HTML5 and CSS3
Modern websites and web development are already impossible to imagine without HTML5 and CSS3, whatever one may say.
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 typeset in HTML5 and CSS3 and adapt the project for mobile devices, then you can safely raise the cost of an hour of your work.
Well, if you create a website for yourself, then this knowledge will help make it better, more functional and more convenient. As a rule, this translates into an increase in positions, an increase in traffic and, accordingly, income.
Do you know that...
Right now in search results(in the TOP 10) of Yandex 55% are sites with responsive design that can adapt to mobile devices. This suggests that Yandex (and Google too) gives more preference to sites with responsive design. Those. those on which the user is comfortable.
And HTML5 and CSS3 are added for the site additional features, with the help of which we can make the site even more convenient.
For both users and robots.
Landing page ( Landing page, landing page) serves to convert visitors to subscribers or customers.
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 on Yandex.Direct, Google Adwods, Target Vkontakte, etc.
Such a bundle allows you to make the most of a variety of Internet marketing tools.
Now there is an opportunity to quickly learn and apply all this in their 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 the capabilities of HTML and CSS 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 forms feedback and much more.
It won't be difficult with this video course!
Course outline
Introductory part
New features in HTML5 and CSS 3 that simplify and facilitate the layout process.
Semantic markup - its secrets and what it is for.
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 in the right place.
And also other useful sources.
Number of video lessons: 23
What can you do after completing this course?
In preparation
Understand PSD layout with PhotoShop
Cut desired images from PSD layout
Find beautiful designs landing page and sites
Design blocks and layout stages
Combine icons into CSS sprites
Work with PhpDesigner
In terms of layout
Connect beautiful fonts from google storage
Use pseudo-classes effectively
Adapt the site for all mobile devices
Use 2 or more backgrounds for a block, animation, transform, 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 ("animate" on hover)
Make smooth scrolling to blocks and for the "Up" button
Validate feedback forms with jQuery
Create smart feedback forms with the transfer of UTM tags
Connect and configure goals in Ya.Metrica using events
Lighten pages by making them load faster
Check and fix flaws on pages
Venezuelan leader Nicholas Maduro, in the Rafael Correa program on RT, said that US President Donald Trump has an obsession with Latin American peoples. “I speak openly ...
Trump calls war with Iran "last resort"
There is no talk of a war with Iran in light of the attack on Saudi Arabia's oil facilities, there are many options, US President Donald Trump said on Wednesday. "There are many options. There is an extreme option ...
Zelensky held telephone talks with Pence
President of Ukraine Volodymyr Zelenskyy held telephone talks with US Vice President Mike Pence. It is reported by "Strana.ua" The Ukrainian leader thanked Pence for the extension ...
The Pentagon calls Russia the largest US security challenge
Pentagon chief Mark Esper said Russia is the largest US security challenge in the near term. “Russia remains our biggest security challenge ...
Attack not from Yemen: Saudi Arabia blames Iran for attack on refinery
Saudi Arabian authorities publicly unveiled wreckage of drones and other aircraft that were fired at a state refinery on Saturday night, September 14. In the Ministry of Defense of the Kingdom ...
Trump reacted to the cut in the base rate of the US Federal Reserve
American President Donald Trump was again dissatisfied with the work of the US Federal Reserve after it became known that the base rate was cut. He wrote about this on Twitter. He noted that the head of the manager ...
Ukraine has again set the conditions for the implementation of the "Steinmeier formula"
At a regular meeting of the contact group held in Minsk on Wednesday, the Ukrainian delegation again set strict conditions for Kiev to fulfill the political points of the Minsk agreements. This was confirmed ...
Johnson and Trump discuss necessary response to attack on Saudi refineries
LONDON, 18 Sep - RIA Novosti, Maria Tabak. British Prime Minister Boris Johnson and US President Donald Trump have declared the need for a unified diplomatic response from international partners ...
Klitschko arrived at the bridge, which was blocked due to the threat of an explosion
Kiev Mayor Vitali Klitschko said that the man who threatened to blow up the Metro bridge in Kiev was drunk or under the influence of drugs. Previously, the head of the Kiev police ...
Juncker, who criticized the Belgians, was accused of drunkenness
The heads of two cities in Belgium demanded that the President of the European Commission Jean-Claude Juncker officially apologize for saying that French-speaking people are intolerant in Belgian cities ...
Netanyahu presented Israelis with a choice
Israeli Prime Minister Benjamin Netanyahu commented on the preliminary election results, in which the nationalist Likud party ranks second. The corresponding post appeared ...
Steinmeier Formula: Kiev made concessions on Donbass
Ukrainian Foreign Minister Vadim Prystaiko agreed to use the "Steinmeier formula" to resolve the conflict in Donbass. This initiative provides for the provision of a special ...
The United States returned to Russia the stolen decrees of Nicholas II
The United States handed over to the Russian side 16 decrees signed by Emperor Nicholas II during a ceremony at the residence of the American ambassador in Moscow. Historical documents have been stolen ...
Until you fell asleep: the Central Bank considered it legal to block the accounts of Russians
"They will run by themselves": a new plan to "return" Crimea RIA Novosti Crimeans will run to Ukraine if it does not spread rot and creates a window of opportunity. About this, as reported by the "Federal Agency ...
Media: Netanyahu canceled a trip to the UN General Assembly due to the political situation in the country
Israeli Prime Minister Benjamin Netanyahu will not travel to New York next week to participate in the general political debate of the 74th session of the UN General Assembly due to the political situation in the country ...
Ukraine made a decision on the special status of Donbass
Ukrainian Foreign Minister Vadim Prystaiko spoke about the agreement reached by the participants of the "Normandy Four" according to the so-called "Steinmeier formula" on granting a special status to Donbass. About it...
Trump found a replacement for Bolton
The new National Security Adviser to the US President will be Robert O'Brien, who is currently the president's special envoy for hostages ...
Ukraine prepared for the withdrawal of troops in Donbass
The commander of the Joint Forces Operation (JF), Vladimir Kravchenko, announced preparations for the withdrawal of weapons along the line of demarcation in Donbass. He spoke about this during a meeting with a permanent ...
Timeframes and Roadmaps: Plans for the Integration of Russia and Belarus
The plan for the integration of Russia and Belarus may be approved by Presidents Vladimir Putin and Alexander Lukashenko by December 8. "Road maps" have been developed in 31 directions. Until November 1, Moscow ...
The winner does not decide: who will form the government of Israel?
The early parliamentary elections in Israel have not yet revealed a clear winner of the race, although, according to preliminary data from the country's CEC, the right-wing Likud bloc is ahead of its rival - ...
With the advent of mobile devices: tablets and smartphones, the ability to do adaptive layout of web pages has become very popular.
This means that the site should be viewed normally on any device. Well, and already, if not exactly the same as it is displayed on desktop computer then close to that. The main thing is that it is convenient to work with it: browse, search for something, press buttons, etc.
Found on the net an interesting, free mini-course on responsive website layout based on HTML5 and CSS3. Studied it.
** You can download this course for yourself by filling out the upper or lower test request form. **
New in HTML5 and CSS3
I decided to check if it is possible (?) To make a site adaptive to all devices, WITHOUT use of technology HTML5 and CSS3 .
I'm trying!
Layout in encoding "ANSI" , and with a full service record: "HTML 4.01 Transitional" , instead of the set by the rules HTML5:
New tags: header, section, article did not use. It turned out that block layout is enough, as usual for tags div .
New shape attribute at tags input "placeholder" (hint) in the browser IE8 NOT worked. In the rest - works.
Likewise. New "type" attribute at tags input type = "email" only works in modern browsers.
Attribute "value" still used for entering values into forms.
The most important thing! First, the site is laid out on a regular monitor, and only then in the tag head
a line of code is entered:
This entry tells the browser ( ** this is explained in the course!), so he scaled correctly page content for the device used.
Although, in fact, such a record browser says absolutely nothing... This is a "appeal" to search engines.
But they are already oh-oh-very "jealous" of the presence / absence of such an entry in the tag head
especially recently. Checked!
However, it must be said that modern browsers mobile devices seem to have learned to read "other people's letters".
**For example. When testing such a line of code, I added it to unadapted website page, and ... ... .... And immediately removed it quickly!
Having checked its display on the smartphone, I saw that the browser of the smartphone gave out "horror", i.e. showed the FULL SIZE of the page, providing the option long horizontal scroll.
New attribute for tags img "srcset" in the tested version "HTML 4.01" does not work!
Let me remind you and emphasize that I did NOT make any media queries... Trials!
Examples of CSS table entries
First of all, about which (?) Are checked CSS properties and how (?) they worked.
Background-size property: cover; better Do not use... Drawings are "cut", i.e. go beyond the monitor screens. You have to zoom out to see them in full.
And on the contrary!
Background-size property: contain; works great! In all browsers! Optimal for "center"drawings... It is their scales great for any monitor size.
Likewise.
The same property is background-size: contain; worked EXCELLENT for "lateral"drawings, i.e. left / right. I tried it!
Displayed side pictures through tags span
by giving them float: left or right, but MAIN!
The main thing that the drawing was displayed as background on 2 non-breaking space characters
giving text size,
equal height background picture
(**
by reducing the size of the text, the picture is reduced proportionally, without distortion).
The output diagrams are below.
<— это HTML
Span # proba8 ( <— здесь CSS
background: url (images / proba8.jpg) no-repeat;
float: left;
font-size: 240px;
background-size: contain;
margin: 0 20px;
padding-bottom: 0;
}
The test drawing displayed according to the above scheme had real size 210х240px... It adapted well, and was fully displayed on the monitor with resolution 120x150.
Everything works! BUT!
After checking the use of such an inference scheme at my "Polygon", I discovered the appearance of significant voids before and after drawings when viewing the page on a smartphone. This was especially noticeable when viewed vertically. Even!
Even though it was written in the CSS rules: remove top / bottom margins!
That is why, everyone side drawings for this page output in the usual way, without any adaptive "quirks".
Moreover, the size of the largest side drawing allowed for this.
True, in this case lateral the pictures are displayed too large, which does not really correspond to their central(adapted) "colleagues", but ... ... ....
Here everyone chooses what is best. I preferred to choose the simplest of "two evils".
** And the last one. File "zeroing" styles "reset.css" did not connect to this page. For such simple sites, it is not needed. Yes, and ... ... I don't like him. Drink-and-drink then all over again.
Well, seriously - download speed... Each additional file is server access.
Now a few lines about adaptation.
At first gave an example of writing a code to reduce two input fields (name and e-mail) in form tags to a size of 200px (if viewed on mobile devices) So, how it was given in the mini-course . Strange entry!
media screen and (max-width: 900px) (
width: 200px;))
Actually, the media query code should look different.
@media (max-width: 900px) (
.subscribe input, .subscribe input (
width: 200px;))
* Prim. Using fixed width, it is better to indicate it maximum size.
Optimal for fixed width is 1200px ±
These "media queries" I was reminded of the design if (condition) (execute) from languages: PHP and JavaScript... We use them to rebuild the site styles depending on the screen sizes.
reference
For correct work with fonts, it is advised to indicate their sizes not in "px", but in "em", and also take the fonts themselves from the so-called "safe CSS font stacks".
I made a special drawing in Photoshop, from which you can find out which fonts are related to "safe", and most importantly - why (?!):
1em = 16px
True, it must be said that such a translation is rather "conditional", although in the mini-course there is not a word about it!
You can find out in detail about the existing units of measurement and how they translate into each other in an excellent article from the attached archive.
Sample units for adaptive layout
I tried it. Some font sizes were prescribed through these units. Works! But I'm more used to dealing with pixels. So I used them for the layout of this page.
Moreover, the pixels, in my opinion, perfect fit for responsive layout, since they are "tied" exactly to sizes and resolutions of monitors devices used.
In other words, each device will have its own pixel size, and if you do not "jerk" from one unit to another, but express everything in the same units, the result will be positive!
What, in fact, you see on your device, viewing this page.
For non-font elements: pictures, block sizes, advise calculate, and use percent "%", and this is a different calculation technique - depending on the size "parent block".
In short - "creepy hemorrhoids."
Therefore, after practicing a little on this test page, I "spat" on all sorts of adaptive layouts, and began to typeset in the usual, familiar way for me. Tired of it!
Well, but seriously, I wrote about it at the end of the page.
Anyone who needs adaptability should pay attention to the tools already built into browsers.
Useful web development tools
To develop a responsive layout in a browser Firefox there are great (!) tools.
Such a tab opens when you press the F12 key
Button "adaptive design" allows you to see how the page will look in different sizes of monitors, and in their different orientations (vertical / horizontal).
How to use the button of this tool is explained in detail in the mentioned mini-course.
True, I want to say that I myself prefer check done on real devices
, which eliminates the "quirks" of browsers.
The button is certainly very useful and very helpful, but ... ... ...
For those who do not have such an opportunity to check their web pages, I can recommend an interesting resource for testing adaptability: "Quirktools" (opens in a new window).
**BUT! Remember!
It only shows pages already uploaded to the internet.
In addition, his server very often "crashes" (ie unavailable).
In general, a sure sign correct responsive layout - no bottom scroll.
One last thing to know: on real mobile devices sites look different, not the way they are shown by various verification services.
Conclusion, conclusions
As I already wrote, after practicing a little here on this page, I "spat" on adaptability, and began to typeset in the usual way. And this is not accidental at all!
At first: the complexity of the layout increases significantly, and with it the size of the CSS code.
What is so bad, in detail here: "Website development"(in a new window).
Secondly: and without "adaptive wisdom" you can make sites that display normally on mobile devices, for which they need to be given more fixed width.
Example: "Personal page" (opens in a new window).
Thirdly: follows from the previous one, since content fixed the page will not be "smeared" across the entire monitor if the site is accessed on a computer with a large display.
Fourthly: I often see sites, only considered adaptive, but themselves content is clipped so has to their appearance reduce by 2-3 times!
Fifthly: follows from the fourth point. So what's the difference (?!) that mine non-adaptive pages on smartphones have to be pushed apart fingers to the desired size. Yes, and then! For the sake of convenience only. Content is intact!
By the way, smartphones are not critical for my site. Insofar as, more than 97% visitors come to it from normal computers and tablets, and less than 3% from smartphones.
You can still continue this "mourning list", but I think that's enough. I told enough about the reasons why I was tired of adaptive layout, which studied but apply NOT going to.
What for?!
Why make it harder what can be easier ?! Without any "shamanic adaptive dances".
Output - there is no need!
This is the conclusion I made for yourself from all of the above. In the end, on absolutely any device: be it a normal computer, tablet, or smartphone, the site can be viewed!
If something is hard to see, you can push it apart with your fingers. Nothing ugly! Modern electronic devices are smart! They allow you to scale the visibility of the monitor screen.
In addition, try to "keep up" in the code (constantly increasing it) for all possible sizes of existing devices - UTOPIA!
For example, the other day my nephew showed his new acquisition. Smartphone watch, slightly larger than a matchbox.
So what?!
To rush now "headlong" to write code for the size of a matchbox ?! And then a brooch-sized computer will appear (or has already appeared). So what?!
Change the code again ?! Yes, well, fig, such "troublesome sites" to do! Simpler... ...
Actually, my entire resource is intended for those who want to learn how to make simple sites, and make them with pleasure, and not look for themselves "headache"... Something like that... ... ...
However, this is my personal opinion. Whoever would certainly want to do this, let him look further.
Important addition
For those who want to better understand the different types of layouts, I highly recommend at first(before studying the mini-course) download and read two good, interesting articles: "Responsive layout or mobile version" and "Adaptive design".
And besides that!
Necessarily read the article and from the lower attached archive.
Why is it obligatory ?!
I compiled it using materials from a book on web design by a famous designer in Runet, and the words of the author of the book about mobile site versions dramatically different from what you could read in the previous archive.
But the most important thing(!)- for a different reason.
And by filling out this form, you can get an interesting educational video course for adaptive layout.
We have released a new book, Content Marketing on Social Media: How to Get Into the Heads of Subscribers and Fall in Love with Your Brand.
In particular, this technology is actively used so that the site is displayed in the same way on different types of devices: computers / laptops and smartphones / tablets with different display sizes.
A responsive site today is built using HTML5 markup language and CCS3 cascading style sheets. But until the time when the corresponding technologies became the standard for all popular browsers, the JavaScript programming language was used for the corresponding purposes. Even earlier (before 2010), it was necessary to create several versions of the same pages, but with different markup, so that the site they were developing would be displayed correctly on different screens.
What is responsive page layout for?
Until relatively recently, when visiting many sites at the bottom of the browser, you could see a slider that scrolls the page horizontally. This happened, for example, if the Internet browser window was not maximized to full screen, but occupied a relatively small area of it. Also, this could almost always be seen when the resolution of the screen on which the image was displayed was 800 by 600 or, even more so, 640 by 480 pixels.
Today, even the owners of mobile devices rarely encounter this. And the reason for this lies not only in the fact that the resolution of modern displays is HD or higher, but also in the fact that adaptive page layout has now become almost the standard.
Why and when did responsive design appear?
By the beginning of the second decade of the 21st century, there was a strong need to create technologies that would allow the development of universal web pages. The main prerequisites that provoked the creation and development of responsive design were:
- massive influx of new users to the Internet;
- the emergence of many devices with different screen resolutions;
- pressure from search engines, which began to impose sanctions on sites on which several versions of pages with the same content were present.
The person who first created is officially web designer Ethan Marcotte. In mid-2010, he published a material in which he talked about a technology that should solve the problem of normal display of web pages in browsers with different workspace resolutions.
Some time later, another well-known podcaster suggested additions to the concepts that his colleague was talking about.
With what and how is an adaptive layout created?
Before proceeding to consider the question of how to make a responsive layout, it is necessary to briefly consider the main technologies used. Now there are two of them: HTML5 and CSS3. Until recently, HTML4 and CSS2 were used, but in order to create a universal design with them, you also had to use JavaScript.
CSS3 is the next generation of cascading style sheets. This technology is designed to create rules for displaying page elements in the user's browser. Using it, you can specify, for example, what size an element should have at a certain screen resolution of the user, or set a rule that it should always occupy a certain percentage of the space (100% - filling the entire working area of the browser).
It was in the third generation that the "media queries" rule appeared, using which a layout designer can create separate classes for each specific resolution.
A very important point!
Anyone planning to use CSS3 for responsive design should be aware that, unlike CSS2, the third generation of Cascading Style Sheets uses percentages rather than pixels to specify the size of objects.
As for HTML5, it is used to directly mark up the page, that is, it indicates where certain elements should be placed. To make the objects adjust to the resolution, the HTML-tags parameters contain classes previously created using CSS3.
A simple example of a responsive layout
To understand what a responsive layout is, the examples should be as simple as possible. Therefore, we will consider an option in which the prepared image is automatically adjusted to the resolution of the browser workspace.
First, use HTML to place the element itself on the page:
DIV tag - indicates that everything contained within it is a separate block. When there are many such blocks on the page, the "class" attribute is specified. This is necessary for the browser to understand which rule to apply for a particular block.
Now you need to create the rule itself, the so-called,
CSS container:
Div (width: 100%; text-align: center;) div img (wight: 100%; height: auto;)
This code sets the permissions for the responsive layout. In particular, it states that the width (wight) should always be 100% of the width of the web browser stage, while the height (height) adjusts automatically.
Checking responsive layout
There are special tools for testing responsive layout. For example, in the Google Chrome browser, you can press the "F12" key, and then, on the panel that opens, click on the icon with the image of a smartphone and tablet. After this action, several more panels will appear, in which you need to specify the resolution of interest.
It can be made even easier. To check if responsive design works, you need to hold down CTRL and then press "+" or "-". After this action, the page should increase or decrease accordingly, but the element to which the adaptive layout is applied will retain its aspect ratio (or will do something else, what was specified in the rules).
Tools to simplify responsive design layout
Layout of responsive design is a rather laborious task. Therefore, in order to reduce the time spent on the implementation of all these procedures, it is better to use special tools. One of these is the well-known Bootstrap * framework.
This set of tools for HTML and CSS, for example, includes a large number of predefined classes that you can use in your design. It also contains dynamic ones, which, in accordance with all the rules and standards, allow you to create adaptive elements.
To start using it, you must, first, get knowledge directly about CSS3 and HTML5 themselves, and then study the features of the framework. However, having understood most of the intricacies of working with it, you can subsequently reduce the time spent on developing responsive website design.
* Bootstrap is an open source software developed by Twitter Inc. It is distributed free of charge and has a wide community from which you can always ask for advice.
