entrance2010
16APR
SAMPLE POST 1.
38
CURABITUR UT CONGUE HAC, DIAM TURPIS [...]
Adaptive layout NOTML5 and CSS3. Creating an adaptive page in HTML5 and CSS3 for beginners for six steps! Adaptive layout on HTML5 and CSS3
From the author: Since on the network began to appear articles showing new properties of HTML5 and CSS3, I had the idea of \u200b\u200bcreating a site creation without images. Taking the improvement of HTML5 and CSS3 to armared (compared with previous mail specifications), it is not too difficult to chase a worthy-looking web site that does not have to rely on images as elements of markup.
Here is the image of the site that we will be moved on HTML5 and CSS3:
Before we proceed to practical steps, I recommend you to view the demo work.
Header element (Header) represents an introductory group or auxiliary means of navigation.
Following their recommendations, the Header element will contain our logo, subtitle and basic navigation. When you enter the Header header element, we have a markup part containing all those parts of the page that we intuitively consider the title. (Or all those details of the page that will be invested in the DIV element with the header ID.) On the Header item page you can use more than once, and we will again use it inside the Article elements that will be included in the posts.
Hgroup element
The first inside the header element is another new tag - hgroup. We will use it to display according to the logo of our site and the subtitle in the tags H1 and H2.
The HGroup element is used to group the H1-H6 elements set when the title has multiple levels, such as subplacements, alternative names or subtitles.
The HGroup element can be superfluous until you wrap, as usual, headlines in the DIV element in order for the name or subplacement (s) an ordinary background or style. However, in the Hgroup document scheme plays an important role. The algorithm of the scheme checks your page and transmits the header structure. Check the sketch of your work using the Outliner tool. When the scheme algorithm encounters a HGroup element, it ignores everything except the title of the highest level (usually H1).
Now we have a problem: the algorithm of the scheme is not flawless and not completed. For example, the next element that we will discuss are the NAV element, and markup marks it as "Untitled Section" (Unnamed area). The markup developers received requests for the change in the scheme algorithm in order for the NAV element as "navigation". In any case, the Hgroup element provides you with a way to group your headlines and, thus, organizes both structurally and semantically.
Nav element
We go to the next HTML5 - NAV element. In NAV, we will turn on the main navigation of the site, wrapped in an unordered list.
The NAV element represents the page sector that refers to other pages or areas inside the page: Area with navigation links.
The use of NAV to create the main navigation site is something like a given, but the circumstances are such that there will be more areas containing links on your site; The question is, which of them you should wrap the NAV tag. Here are some examples of use that I believe may approach:
Related posts.
According to the specification, these may be suitable or inappropriate cases of use of the NAV element. The specification is not very clear, and the examples given are not too helping. So while the specification is not final and more specific, to select proper method The use of the NAV element can be reed only to the developer community.
Article element
The next element I want to imagine - article. The main area of \u200b\u200bour demo page contains three quotes from posts, and every of them we will wrap in Tag Article.
Xhtml
2010
16
apr.
SAMPLE POST 1.
38
CURABITUR UT CONGUE HAC, DIAM TURPIS [...] Written By: Author Name. Tags: Cool Modern. Hype-Friendly.
|
Here is the definition of W3C for an article:
The article is an article in the document modular composition [...], thus, it is intended to become autonomously distributed or repeatedly used, for example, when syndicating (simultaneously publishing content on several web sites).
This time the specification is more understandable and the post in the blog (or its passage) is much better ( pay attention to the mention of syndication) Suitable for article. Of course, we can place on the page many Article elements.
You have undoubtedly noticed that inside the article we have placed the elements of the header and the footer. Both Header and Footer can be used more than once on a separate HTML page. Since Header is a "introductory group or auxiliary navigation element", we included the date, name and number of comments. Next, we have a paragraph with an excerpt from the post, followed by the Footer (footer).
Footer element
As I said, the footer Footer can be used on one page as many times as needed, and it is a segment of the bottom footer of the document page or part of the document.
The Footer element represents the footer of the section to which it is drawn. Usually, the footer usually contains information about its section, such as authorship, references to related documents, copywriting date, etc.
Our demo page has four Footer elements: one for each of the three article elements and the overall footer for the entire page. The footer in the Article element contains the name of the author of the post, tags and links to the link to full version post in the blog.
The total footer contains three elements of sections and a copyright notice. Both options for using the Footer element are legitimate and comply with W3C recommendations.
Element Section.
The area of \u200b\u200bthe total footer of our demo page contains three section elements. We will list the most popular blog posts, the latest comments and a short biography of your fictional company.
The Section element represents the common area of \u200b\u200bthe document or application. The section in this case is a thematic content grouping, usually using a header.
The Section element is rather cunning, because in the definition of the specification seems very similar to the DIV element. I caught in this trap when I started writing code for a demo page; I posted inside the section element three article elements. Soon I understood the fallacy of my methods. The only way to decide whether to use Section is to see if you need the area that you want to wrap the Section element, the name (title). From the definition, it is clear that the Section element usually has a header.
Another question that is useful to specify to establish the validity of using the Section element is: Do you add it exclusively for styles? You add it simply because you need to highlight this section using JavaScript, or because you need to apply the usual style to it, and you instead of using the DIV element.
Wrapping in the Section of the three article elements of our demo page would be justified if Section included the title of type "Latest Posts in Blogs". It would make sense; Otherwise, tag, inside which article elements are located - it's just supporting styles - something that helps us aim at it javaScript help or CSS.
An element aside
The latter used for the demo page element HTML5 - ASIDE; We used it as a lateral column container.
An Aside element represents a page section consisting of their content, superficially associated with the content located around ASIDE, and which can be perceived separately from this content. Such sections are often presented in typography as side speakers.
As can be seen from the specification, one of the examples of the perfect use of an Aside element is a side column. Below on the chart you can see the location of the hierarchy of the Aside element of our demo page.
We have placed two section and one NAV. The first section Section contains links to Twitter and RSS, and the second represents the last tweet (user entry in Twitter). The second element section, besides, one of the rare cases when he does not have a header. He could have a name, something like: "the last tweet", but I think it is optional, because the readers are accustomed to see the blocks like this, but the TWITTER label under the quote is very recognizable. The NAV element of our side speaker is used to reflect the list of blogs and, unlike the main navigation, it has a header.
The last word
So, so it came to the completion of the first part of our article dedicated site layout on HTML5 and CSS3. I tried to make it so short as possible, and not to spend too much time on uncertainty in the HTML5 specification, because it is not finished yet. In the meantime, we will have to rely on the community and the work of "drugs" HTML5, which will become our guides to introduce new elements in sites.
Thanks for reading and do not miss the second part of the article, where we will discuss the CSS3 properties used to decorate markup.
As usual, I look forward to any questions and comments. Please do not be afraid to express and start discussing the use of new items, because it is - the best way Clear their favor.
Editorial: Horn Victor and Andrei Bernatsky. WebFormySelf command.
Without html5 and css3 far from leave
Modern sites and web development is no longer possible without HTML5 and CSS3, no matter how cool.
Any project, any customer requires a valid, cross-browser and modern layout on HTML5 and CSS3, and cubedly adapted for mobile devices.
If you can be able to move back to HTML5 and CSS3 and adapt the project to mobile devices, you can safely raise the cost of your work hours.
Well, if you create a website for yourself, then these knowledge will help make it better, functional and more convenient. As a rule, it turns into an increase in positions, an increase in attendance and, accordingly, income.
Do you know that...
Now in search results (in the Top 10) Yandex 55% are sites with adaptive designs that can adapt to mobile devices. This suggests that Yandex (and Google too) gives greater preference to sites with adaptive design. Those. Those on which the user is convenient.
And HTML5 and CSS3 add to the site additional featuresWith which we can make the site even more convenient.
For both users and robots.
Landing Page ( Landing Page, landing page) It serves to convert visitors to subscribers or customers.
It is also sometimes used to segmented traffic.
Landing Page can be like one separate page On the domain and as part of a full-fledged website.
In this case, the site is moving in search, and Landing is used for advertising in Yandex.Direct, Google Adwods, Target Vkontakte, etc.
Such a bunch allows the maximum to use a lot of Internet marketing tools.
Now it is possible to quickly learn and apply all this in your activities.
HTML5 + CSS3 + Adaptability + Landing Page
With this course you can:
create adaptive sites and pages
adapt them to mobile devices
Use HTML and CSS capabilities in their or client projects
Create any Ledding Page: Capture Pages, Subscription Pages, Commercial Landing, etc.
Add Various Effects and Scripts on Landing Page
Create and use advanced forms feedback and much more.
With this video course it will not be completely difficult!
Course summary
Input part
New features in HTML5 and CSS 3, which simplify and facilitate the process of laying.
Semantic marking - its secrets and what it is needed for.
Inserting media objects - how to insert audio and video without player.
Practical part
Phased creation Landing Page.
From layout planning, layout of each block of different complexity, before connecting scripts and pHP handlers For form
Carousel / slider, smooth scrolling, buttons, CSS sprites, validation of forms, etc.
Extra. Materials
In additional materials there are all scripts and sources with which we will work + cribs with a code that can be copied and inserted into the right place.
As well as other useful sources.
Number of video tutorials: 23
What can you have after passing this course?
In preparation
Wake up a PSD layout with Photoshop
Cut the desired images from PSD layout
Find beautiful designs Landing Page and Sites
Design blocks and stages of layers
Combine icons in CSS sprites
Work with the PhpDesigner program
In terms of worski
Connect beautiful fonts From Google's repository
Effectively use pseudoclass
Adapt site under all mobile devices
Use 2 and more background for block, animation, transformation, RGBA, etc.
Work with @media requests
Interactive Yandex Maps
Create CSS sprites and speed up page load
Use pre-thought-out styles (by analogy with frameworks, such as bootstrap)
In terms of improvement
Create hover effects ("revitalization" when hovering)
Make a smooth scrolling to blocks and for the button "Up"
Conduct the validation of feedback for the jQuery
Create smart feedback forms with UTM transmission tags
Connect and configure targets in y.metric using events
Facilitate pages making them load faster
Check and eliminate flaws on pages
Adaptive layout The site allows web pages to automatically adapt to the screens of tablets and smartphones. Mobile Internet traffic It grows every year and to effectively process this traffic, you need to offer users adaptive sites with a convenient interface.
Search engines use a number of criteria to assess the adaptability of the site when viewing on mobile devicesoh. Google tries to simplify the use of the Internet for the owners of smartphones and tablets, noting in mobile issuance adapted under mobile devices sites special mark mobile-Friendly.. The Yandex also works the algorithm that prefers sites with a mobile / adaptive version for users in a mobile search.
You can check the display of the page on mobile devices on the services and.
Fig. 1. Mobile yandex and google issuing with a note about the friendliness of the site to mobile devices What is an adaptive layout
Adaptive layout involves the absence of a horizontal scroll bar and scalable areas when viewing on any device, readable text and large areas for clicable elements. Using media regists, you can control the layout and location of blocks on the page, rebuilding the pattern so that it adapts to different sizes of devices.
The main techniques for creating an adaptive site are given in the article. For responsive design The width of the main container of the site is set in%, while it can be equal to both 100% width of the browser window and less. The width of the columns of the grid is also set in%. IN adaptive design The width of the main container and the grid columns is fixed using the values \u200b\u200bin PX.
The adaptive rubber layout, considered in this lesson, will work perfectly on a two-column pattern, making the site adaptive and convenient for viewing on mobile devices. The template assumes a different layout of the main contents of the pages, in this lesson will be dismantled to the master page.
Locker of the main page
The page consists of three main blocks: the top footer (cap), the wrapper container for the main content and sagebar, and the footer (footer). As a turning point of design points, take 768px and 480px.
In the first point, hide the top menu and move the Sidebar under the container with posts. In the second point, you will change the location of the header elements, cancel the positioning of the buttons of social networks in the posts and cancel the flow around the columns of the pages.
Fig. 2. Example of adaptive layout 1. Metagelet and section
1) add to the section
The required files are a link to the fonts used, the jQuery library, as well as the PrefixFree plugin (not to write for the properties of browser prefixes):
2. Page cap
In the header of the page
Logo ;
button to display / hide the main menu