Responsive html design. How to make responsive design using CSS. Partial solution: make everything flexible

Today, most people access the Internet through mobile gadgets- tablets, phones, in this regard, site optimization also includes new level. If a user comes in and sees that the site is not optimized for mobile devices: the image cannot be viewed, the buttons have moved out, the fonts are small and unreadable, the design is skewed - 99 out of 100%, that he will leave and start looking for another more convenient one. And it will check the box that the resource is irrelevant, that is, it does not correspond to the search query. Therefore, the page design must be adapted to various mobile devices. What is a mobile version of a website, how to make it, and what is the best method to use? Read more in this article.

So there are four key ways adapt the site for a mobile version.

Method one - responsive design

Adaptive templates involve changing the website image depending on the screen size. As a rule, they are set to standard 1600, 1500, 1280, 1100, 1024 and 980 pixels. Queries are used for implementation. It doesn't change itself.

The advantages of this method include:

convenient development, since the structure itself adapts to the screen parameters, and any update does not require developing a design from scratch, it is enough to correct the CSS and HTML;
one URL address- the user does not need to remember several names, there is no need for a redirect (redirection from one address to another), which can complicate the work of a webmaster, and it is easier for a search engine to sort and rank a resource with a single address.

Of course, adaptive templates also have their disadvantages, which, by the way, outweigh their advantages. Nevertheless, many developers adhere to this very concept, for example, Google Corporation, whose mobile version of the site has adaptive design. So, the disadvantages:

Responsive design does not support the same tasks on a mobile device as on a desktop. If this is, for example, a mobile version of a bank’s website, where the user will most likely need information about exchange rates or nearby ATMs, then this design is quite sufficient. But if it is a complex structured resource with many sections and subsections, then it is unlikely to appeal to visitors.
Slow loading turns your favorite site into a hated one. This is especially true for resources where there is an abundance of animation, videos, pop-ups and others. active elements. Due to the large weight, the page will simply “slow down”, the user will get angry and leave, and search positions site - to fall.
The inability to disable the mobile version is another significant drawback. If an element is hidden by such a layout, you cannot do anything to open it, unlike sites where you can disable it and switch to a regular domain.

Nevertheless, such a mobile version of the site quickly, without special skills and costs, allows you to adapt the resource to any gadget. But, in view of the listed shortcomings, it is suitable for small, simple resources with a minimum of information and multimedia, without difficult navigation and animation. For a complex site, 2 other methods are suitable.

Method two - a separate version of the site

This method is very common and often successfully makes a site more user-friendly on a mobile device. Its essence is to create a separate version of the page, designed for the application and located on a separate URL or subdomain, for example, m.vk.com. At the same time, the main functionality is preserved, the site design just looks different. The advantages of this method are obvious:

convenient user interface;
it is easy to change and make edits, since the version exists separately from the main resource;
due to its low weight, a separate version of the site works much faster than an adaptive template;
Most often it is possible to switch to the main version of the page from the mobile one.

But this is not without its drawbacks:

Several addresses - desktop and mobile versions of the site. How to make the user remember two options? Web masters often transfer from the desktop version to the mobile version, but if this page does not exist in the mobile version, the user will receive an error. Here difficulties arise with search engines, which find it difficult to rank 2 identical resources, and this directly affects promotion.
The mobile version of the site from a computer, if a user accesses it by mistake, will look ridiculous, which can also affect traffic.
This version is often very stripped down, desktop, so the user will receive very limited functionality. But at the same time, if something is missing, the visitor can go to full version pages.

In general, a separate mobile site justifies itself and is the most common way to adapt a resource for mobile devices. It is popular among large online stores such as Amazon.

The third way is RESS design

Google search engine actively supports this direction of mobile design. This is the most difficult, costly, but effective method adapt the site for a phone or tablet. It's called RESS. This is targeting a resource into a mobile application that can be downloaded for each device separately. For Android - from GooglePlay, and for Apple - from iTunes.

Such applications are fast, free, convenient, and have the ability to host various types information, while the phone memory and Internet traffic are not consumed as much as when visiting a site through a browser. They are easy to access, since the link will always be on the screen at hand, and there is no need to enter a complex name into address bar browser.

Of course, there are also disadvantages here, such as complexity in development, high labor costs large number programmers, the need to make several layout options. Sometimes the mobile device is not recognized by the application. Regular technical support, correction of deficiencies. Nevertheless, this option is considered the best of the three proposed due to its productive, uninterrupted operation.

The cheapest way to make a mobile website

All of the above methods require, although not always long and complex, but still paid work for the webmaster. If you do not see an urgent need for such development, a simple and free mobile version of the site will suit you. What's the easiest way to do it?

Download special templates (plugins) for responsive design. For example, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile and others. They will help you display the site more correctly on your phone, and you will receive several tips on what should be corrected to better adapt the page to the mobile version.

Of course, this method is unlikely to be suitable for serious resources. Rather, it's free opportunity Intended for small and simple sites, blogs, news feeds. We should also not forget that Google search engine, like Yandex, today places serious demands on mobile versions, so there is a huge chance of lowering your position using this method.

With this method, most likely, advertising and pop-up banners will be cut off, but the page will load quickly and without lags.

Principles of creating mobile versions

It doesn’t matter whether the mobile version of the site was created for free or with the help of a staff of webmasters, whether it was made using the RESS system or using an adaptive template. The most important thing is that for it to work effectively, you need to adhere to several extremely important principles. So, what should the mobile version of the site be like? How to make it productive, efficient and productive?

We remove everything unnecessary

Minimalism is what a developer of a mobile version of a website should strive for. Imagine how difficult it is to perceive information that is full of colors, buttons, banners, and which you have to endlessly scroll through in search of the required material. Mobile design should be simple and clean. Choose 2-3 colors to divide the space (for example, branded ones). It's better if one of them is white. Divide the small screen space into clear and readable areas. Virtual keys must be visible so that the user clearly knows where to press and sees - here is the product, here is the form for filling out the data, here is the information on delivery and payment.

All additional options, which would be useful in the desktop version and would make life easier for the user, will only bring complications here. Leave only the most important elements. Animation, advertising banners, multimedia will most likely only slow down the operation of the site or application and distract from the main thing.

Alignment

The issue of alignment is no less pressing, since if done incorrectly, the user will only receive the endings of important words. It is generally accepted to align left and vertically. Imagine yourself scrolling news feed in phone. You do this from top to bottom, but not to the left or right.

An association

When there is no possibility of a long chain of transitions, try combining several steps into one. For example, a site requires entering data in several stages - a name, then an address, where in each individual cell there is a separate house, street, apartment, etc. In order not to force the user to try to get into many small cells, ask him to fill in only 2 - name and address.

And disconnection

Sometimes, on the contrary, it is necessary to disconnect too a large number of information. For example, in the drop-down menu you have a list of more than 80 cities where delivery is carried out. Group them by region so that the user does not have to scroll through this huge list. When he moves the cursor over a regional center or region, another list of cities will appear.

Lists

By the way, about the lists. There are two of them - fixed in alphabetical or other order and with substitution. Their choice depends on what will be listed.

Fixed is convenient if the user knows exactly what he is looking for. For example, city, number or date. The second option is suitable for long, complex names or for cases where there are many variations of the same name, and each one brings the user one step closer to the goal. The auto-substitution option is most often used when a visitor needs help. For example, a knitting website offers to buy knitting needles. User enters search query“Metal knitting needles”, but in the tooltip he sees “5 mm knitting needles”, “4.5 mm knitting needles”, etc.

Autofill

This point especially applies to sites where they sell something online, and you have to fill out standard forms for payment, delivery, etc. If a person makes a purchase from his phone, then most likely he does not have time to get to the computer, which means the process purchases need to be made as quickly and convenient as possible.

To do this, the forms may contain already filled in data; you can resort to the most popular answers. For example, insert today's date, cash payment method, city, if you work in the same region. They can be changed, but if you hit the target, the user's time will be saved.

Everything is read, everything is viewed

When creating the design of the mobile version of the site, remember that everyone’s phone is different, and so is their vision. Your site may be viewed on a small screen, so fonts should be simple and readable, buttons should be large enough to click on without being taken to another page, and images should open separately and large, especially when it comes to the Internet. -store.

Some statistics

When talking about adapting a website to mobile devices, one cannot help but resort to statistics to understand how important this process is for online promotion.

The numbers are as follows. Today, 87% of the population uses gadgets, apparently except for the youngest children and some elderly people. Economists predict growth mobile commerce 100 times over the next 5 years. However, only 21% of sites are adapted to work with mobile devices. This means that Internet traffic and the e-commerce market are occupied only by a small 5th part.

Think about these numbers. Does it make sense to adapt your resource? Of course yes. Moreover, while there are so many free space in this market, you can take your own segment in it.

Where is the mobile version needed?

Using the mobile version is advisable for any platform that seeks to get a high rating. After all, this is a direct impact on the user, creating comfortable conditions for him to stay on your site.

The following cannot exist without a mobile version:

news portals, since these are what most people view from their phones on the way to work or school;
social networks - for the same reason, plus there is the factor of online communication, which means that a convenient, understandable chat must be created for this;
reference books, sites with navigation, etc., where people turn when looking for something;
Online stores are an opportunity to attract customers who do not waste time shopping, but buy everything via the mobile Internet.

Instead of a conclusion

Today, mobile technologies are in a stage of active growth and development, therefore, striving for market leadership, any company must ensure that its Internet resource meets the requirements. Due to growing user requests, sites have to be constantly modernized and adapted to different devices. It is clear that if a person is inconvenient to be on a particular resource, he cannot get information about a product or price there, place an order, find out about delivery, then he will find the site where all this will become possible. Therefore, in order to win competition, it is important to have a flexible, convenient, functional and interesting resource.

The mobile version of the site Android or iOS will help you do this. To do this, you need to choose one of the above redesign methods - an adaptive template, creating a new site on a subdomain and moving to it by redirecting, using free templates or creating a mobile application with which the user can more conveniently enter and stay on the page.

This month's theme is website responsiveness, so we decided to talk more about what responsive web design is, why it is needed, and what the basic principles of responsive web design are.

Adaptive web design is a fairly new direction in the design of web resources, but now it is one of the main indicators of the quality of a website. In this article we will talk about what responsive web design is and what it can be.

What is responsive web design

Responsive web design (in English language"Responsive web design") is the design of web pages that provides an excellent user experience. various devices ah, connected to the Internet.

This means that the same site can be viewed on the most different devices, regardless of screen resolution and format - smartphones, tablets, laptops, etc. At the same time, viewing will be equally convenient for all formats - users of mobile devices, for example, will not need to expand individual areas of the site so as not to miss the desired link.

Responsive design aims to make web pages and the display of their content appropriate for the device on which they are viewed.

Why do you need responsive web design?

1) A wide variety of devices from which you can access the Internet. Currently, there are many devices that people use, including to access the Internet. All of these devices vary in screen size, resolution, and therefore how a website can be displayed on them. Therefore, it is important that your site looks good and displays correctly for any user, no matter what device they are using.

2) The popularity of mobile devices with Internet access and the increase in mobile Internet traffic. With the growing popularity of mobile devices, the number of users who access websites from them has increased noticeably, so you can no longer simply ignore them - this is not one or two people every six months, this is a significant part of your audience, and they should be comfortable using your website (otherwise they won't do it).

3) Urgent information. If your resource contains news/urgent information, and there is a high probability that the user may need to read this information from the phone (because he has no other devices at hand) in this moment time, care must be taken to ensure that he has the opportunity to do this.

The difference between a responsive website and a mobile version (application) of a website

Mobile versions of websites and mobile applications, specially designed for various mobile devices, also solve the problem of ease of viewing the website, but have some disadvantages.

1) Each type of operating system requires its own application / website version. This requires additional resources, both time and money.

2) The need to download the application. In order to use your app, users need to download it. This requires some additional effort from users, and many will not do this unless they are absolutely sure that they really need the application and plan to use it regularly.

3) Traffic separation. From the point of view of website promotion, a mobile application is not convenient because it divides all resource traffic into website traffic and application traffic, which will look like less website traffic.

4) The need to integrate site materials. In the case of a mobile application, you must either synchronize the site with the application ( additional resources), or do double work to fill the site and application with materials.

Unlike mobile applications, adaptive design is one site address, one design, one management system and site content.

Of course, adaptive design also has its drawbacks, the main one of which is the relative novelty of the technology and, as a consequence, the disadvantage good specialists and knowledge about designing responsive websites.

Principles of Responsive Design

Design starts with adaptive version website for mobile devices. At this stage, designers strive to correctly convey the meaning and main ideas using a small screen and just one column. The content is reduced if necessary, removing unimportant information blocks and leaving the most important.

Designing for mobile devices from the earliest stages (“mobile first”);
Using a flexible, grid-based layout;
Using flexible images;
Working with media queries;
Applying incremental improvement.

Types of Responsive Layouts

The article on Habrahabr presents the main types of adaptive layouts that currently exist.

1) Rubber

A type of site presentation that is easy to implement and obvious to the user. The main blocks are compressed to the width of the mobile device screen, where this is impossible - they are rearranged into one long tape.

2) Transferring blocks

An obvious way for a multi-column site: when reducing the screen width additional blocks(sidebars) are moved to the bottom of the layout.

3) Switch layouts

This method is most convenient when reading a site from different devices: a separate layout is developed for each screen resolution. The method is labor-intensive, therefore less popular than the previous two.

Switching layouts. Fragment of the LukeW Ideation + Design website

4) Adaptability “with little blood”

A very simple method that is suitable for simple sites. Achieved by simply scaling images and typography. Not very popular, because... lacks flexibility.

Adaptability with little blood. Fragment of the LukeW Ideation + Design website

5) Panels

A method that came from mobile applications, where extra menu may appear when tapping horizontally or vertically. Main disadvantage- non-obvious actions for the user: it is very unusual to see mobile navigation on a website. But over time, the method may become quite popular.

It must be remembered that the layouts presented above are not universal solutions - for each project it is necessary to choose the method most suitable for the needs and capabilities.

Internet users browse websites on different devices with screens various sizes. Screen sizes are constantly changing, so it is important that the site adapts to any of them. There are two main approaches to creating websites that are easily adaptable for different types devices:

Responsive Design (RWD) — responsive design— designing a site with certain property values, for example, flexible mesh layouts that allow the same layout to work on different devices;

Adaptive Design (AWD)— adaptive design, or dynamic display — designing a site with conditions that change depending on the device, based on several fixed-width layouts.

1. Responsive Design Techniques

Philosophy responsive web design is that the site was convenient to view from any device, regardless of screen size. Phrase responsive design was invented by Ethan Marcotte in 2011. main feature responsive web design - due to the fluid grid, the layout automatically responds to changes in screen size, inflating or contracting like a balloon.

Responsive Design(English) Responsive Web Design) combines three methods - flexible layout mesh based, flexible images And media queries.

Layout flexibility is based on using relative units of measurement instead of fixed pixel values, which allows the width to be adjusted according to the available space.

Flexibility of text content achieved by calculating font sizes relative to browsers' default font size of 16px, such as fixed font-size: 42px relative size is 42px / 16px = 2.625em.

Problem flexible images solved using the img rule (width: 100%; max-width: 100%;) for all images on the site. This rule ensures that images are never wider than their containers and never exceed their true size on larger screens.

Media queries change styles based on device characteristics related to the display of content, including screen type, width, height, orientation, and resolution. Media queries create a responsive design that applies appropriate styles to each screen size.

Rice. 1. Responsive design

Additional Responsive Design Techniques

Scalable Vector graphics - use svg images that scale to any size without losing quality and look good on Retina displays.

Card interfaces- use so-called card interfaces - rectangular shapes with rounded corners that represent containers for content. Such blocks are self-contained interface units and are easy to move around the layout.

Rice. 2. Pinterest, card-based layout

Leave only the essentials- a good technique, especially for responsive design. Create responsive and friendly minimalist interfaces that are becoming increasingly popular nowadays.

Rice. 3. Hotellook, minimalism in web design

Prioritize and hide content correctly- use hidden elements controls, especially for devices with small screens. Pop-up windows, tabs, off-canvas menus and other similar techniques will help reduce the number of elements on the page. Freeing up space from unnecessary elements, you will make the interface convenient and user friendly.

Create a large clickable space for buttons— the larger the active area of the button, the easier it is for the user to interact with it.

Add interactivity to your interfaces- in response to a user action, create a response action - an animation that will work when hovering over an element on desktop devices and when touching an element on mobile devices.

2. Customizing the viewport using the viewport meta tag

To mobile browsers for operating rooms Android systems and iOS did not automatically resize site pages, a special tag is used with the name="viewport" attribute. This tag allows you to set specific value For width parameters and initial-scale:

— initial-scale=1 means that the page size in the browser will be equal to 100% of the viewport size. That is, the relationship between the physical pixel and css by pixel will be 1:1;

— width=device-width means that the page width will be equal to 100% of the width of the window of any browser. That is, the width of the site page corresponds to the width of the device, so it does not need to be scaled.

IN in this example the content in the browser window will be 2 times larger compared to the physical size.

Also tag can be used to control how much users can increase or decrease the page width:

This code will allow you to increase the page width to a value equal to 3 times the width of the device screen and reduce it to half the width of the device screen.

You can deny users the ability to scale using the user-scalable attribute:

3. Universal templates

Most of the layouts used to create responsive web design fall into one of the five pattern categories defined by Luke Wroblewski:
Mostly Fluid(Most rubbery)
Column Drop(Columns below each other),
Layout Shifter(Moving layout),
Tiny Tweaks(Tiny changes)
Off Canvas(Off screen).
In some cases, a page may use a combination of templates, such as Column Drop and Off Canvas.

3.1. Mostly Fluid

A popular layout consisting mainly of rubber mesh. On large or medium-width screens, its size usually remains unchanged; on large screens, only the margins are adjusted. On small screens the rubber grid causes the layout to be recalculated for the main content, and the columns are placed one below the other. The advantage of the template is that it only requires one control point between small screens and large screens.

3.2. Column Drop

Columns are placed one by one vertically if the width of the window cannot display all the content. As a result, the columns will be positioned vertically below each other. The choice of breakpoints for this layout template depends on the content and is determined for each design option separately.

3.3. Layout Shifter

Most responsive template, as it provides multiple control points for different screen widths. The main difference with this layout is that instead of recalculating the render tree and placing columns underneath each other, the content is moved. Due to significant differences between the main control points, maintaining this layout is more challenging, and you will likely have to change not only the overall layout of the content, but also its elements.

3.4. Tiny Tweaks

The template makes small changes to the layout, such as adjusting the font size, resizing images, or moving content. It works well on single-column layouts, such as single-page sites and articles with a lot of text.

3.5. Off Canvas

Content that is rarely used, such as navigation elements or app menus, is placed off-screen and shown only when the screen size allows it. On smaller screens, content opens with one click.

4. Responsive design

Unlike responsive design, adaptive design(Adaptive Web Design) focuses on device sizes. It uses multiple static layouts for different types of devices (mobile devices, tablets, desktop computers), based on control (turning) points. That is, layouts load at certain device browser window sizes, and transitions between layouts occur abruptly rather than smoothly.

Typically, responsive layouts have six layout options depending on screen width:
320
480
760
960
1200
1600.

IN adaptive layouts Functionality plays the main role, that is, when creating a design, the features of devices are taken into account, for example, touch control for mobile devices or large spaces for desktop monitors.

Basic Responsive Design Techniques

Keep it consistent- any website should create trusting relationship with the user so that he feels comfortable when navigating and interacting with him. Consistent design means that when moving to another page on a site, the user does not feel like they are on another site. Pay attention to small details, build a visual hierarchy, highlight important elements in bold. Use serial color scheme throughout the site, reuse the same elements for different situations, such as the same pop-up notification design.

Use a grid— a 12-column structure is more preferable for controlling the width of columns and the padding between them.

5. What is the difference between responsive and adaptive web design

Rice. 4. Responsive and adaptive design on different devices

To create responsive layouts, use media queries and relative sizes grid elements specified using % . In responsive design, server-side scripts first determine the type of device the user is trying to access the site on (desktop, phone, or tablet), then loads exactly the version of the page that is most optimized for it. Grid elements are given fixed px sizes.

Therefore, the main difference between these techniques is responsive design - one layout for all devices, adaptive design - one layout for each type of device.

6. Useful services and tools

Android emulator for Windows, Linux and Mac OS X. iOS simulator is only available for Mac users OS X and is part of the Xcode package (you can download it for free from Mac App Store).

A PHP script running on any website detects the screen size and adjusts the image size to fit it, resulting in a small image size on small screens.

Tables of correspondence between the physical dimensions of devices and CSS values for height and width, as well as the pixel-ratio value for mobile devices.

A collection of websites using media queries and responsive web design.

CSS framework based on 12-column layout, maximum 960px. Supported by Chrome, Safari, Firefox, IE 7 and above, mobile versions of browsers.

A set of tools for developing web applications. LESS language, 12-column adaptive layout, support for mobile devices, tablets and monitors, many components, buttons, drop-down menus, own style input fields, lists, headers, labels, icons, alerts, tabs, progress bars, tooltips, accordion, carousel, and so on, various Javascript plugins, Scaffolding support, including the application of Bootstrap style to already generated HTML.

The presence of adaptive design is a necessity - life has proven this with its rake; no Mobile Joomla gives such an effect as direct website adaptation. Today I will tell you how to make a responsive design through editing CSS styles using your head and fingers. It won’t be possible to put everything into detail, since each template has nuances, but I will give an impetus to start adapting.

Adaptation for desktop

First, we adapt it for the desktop. This is the basic stage, from which dancing with a tambourine begins. Many people mistakenly perceive the world, thinking that with the display of a site on regular computers they have no problems, since someone designed the template, and it looks smooth at normal resolution. Depending on the resolution of your monitor, yes, but what about bigger screen, how do you look with absolute and pixels on a screen with a resolution of 1920x1080? The purpose of adapting the design is to display the site normally on mobile devices and avoid any problems on large screens.

What are we doing? The main thing is to translate everything large values V template css from pixels (px) to percentages (%). There are several rules here:

- We change px by % only for large values, there is no need to change 5 px by 1% (for example),
- Do all work through Firebug, then transfer the values to real life.

A little for common understanding. You have a website on which the page width is 1000 px, it has three blocks - a central 800 px and two side sitebars of 100 px. This means that after replacing with percentages, the page size will become 100%, the central container will be 80%, and the side blocks will be 10%. Rough, but understandable. Now a little more specifics.

I have before adaptation (saved for history old file CSS) the main container was styled like this:

#container(margin:0 auto;width:1100px; …

After adaptation it became like this:

#container(margin:0 auto;width:77%;overflow: hidden !important; …

Top menu has changed from:

Top-menu>ul>li ul(width:155px; …

Top-menu>ul>li ul(width:90%; …

And the offset of the content block is implemented with:

#content(margin:0 220px; …

#content(margin:0 20% …

Pay attention to the code:

overflow: hidden !important;

We use it to disable horizontal scrolling, this is useful for mobile adaptation; sometimes it makes sense to only indicate the prohibition of horizontal scrolling using:

overflow-x: hidden !important;

Carry out all work through Firebug or the Google inspector, check with your eyes - the site should look the same after converting px to %. You don’t have to shrink the screen yet; we haven’t gotten to mobile adaptation yet, but we’ve done the basic work for large screens.

CSS for mobile devices

The database has been created, by the way, this is the most difficult stage; now we need to ensure that the site is displayed correctly on all mobile devices. There are few previous manipulations, since under small screen It’s not possible to compress everything into percentages. Agree, it’s impossible to see a 10% wide sitebar on a smartphone with a resolution of 320 px.

We'll need to use @media screen and which make style changes for devices with a specific resolution. I first determined by reducing the browser screen at what resolution I was having display problems. By narrowing the screen, I found my point of “curvature”, it starts at a width of 1000px, which means that you need to register the main mobile styles from here - everything that will be displayed more in the styles of a regular desktop, and less in separate styles.

Example @media screen and

I have written CSS for mobile devices on Joomla template 1.5 like this:

@media screen and (max-width:500px)(body, tbody(-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;)

@media screen and (max-width:400px)(td(word-break:break-all;)

@media screen and (max-width:1000px)(td(word-break:break-all;).page-numbers, #footer, #navigation, #header,.logo,.nav-box (display: none !important ;) #content (position: auto; width: 80%;margin-bottom: 0;margin-left: 10%;margin-right: 20%;) #container ( width: 90% !important;).content-box (widht:110%).content-box h1 (font-size: 130%;).content-box h2 (font-size: 110%;).content-box h3 (font-size: 120%;).content -box h4 (font-size: 100%;) .top-menu>div (padding-right: 0px !important;) img(max-width:96% !important;height:auto !important;)

Some specifics on the code.

When the screen width is less than 1000 px, the side sitebars, header, pagination and footer stop displaying. In my opinion, they are not needed in the mobile version. This is what the code does:

Page-numbers, #footer, #navigation, #header,.logo,.nav-box (display: none !important;).

By default, in mobile Joomla 3 and higher, the side blocks go down, stretching the page to the point of disgrace, so even on new engines you can correct some things manually.

Other values are also indicated for the blocks of the main container and the content window, and the output of H1-H4 is converted to percentages (pixels suit me for the desktop). Corrections have also been made to the output of the top menu (fortunately, it needs to be minimized, but this is not critical and I will do it later) and the display of pictures has been changed:

img(max-width:96% !important;height:auto !important;).

For them, it is indicated that the maximum image size in width is 96% (with indents beautifully), and the height is set automatically.

The specifics are over, once again general sense website adaptation (design) via CSS.

- Change large px values to %,
- We register separately @media screen and for mobile devices.

Via @media screen and be sure to close unnecessary ones mobile blocks for output, but convert to % those values that are not displayed correctly because they were left in pixels in the desktop version of CSS.

As a result, the user experience when working with Joomla Mobile was 65-70%, with responsive design using CSS, it became 99%. The conclusions are obvious: Yandex and Goole were not tested for adaptability, but now they are passing with a bang.

Making a responsive website template is easy enough, but keeping the elements balanced at all points throughout the template is a real art. This tutorial introduces 5 techniques to use in CSS for a responsive template. There are very simple properties CSS such as min-width, max-width, overflow and relative values, but they all play an important role in developing responsive designs.

1. Adaptive video

This CSS trick allows the embedded video to stretch to the specified boundaries.

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% )

2. Minimum and maximum width

The max-width property allows you to set the maximum width of an element. It should be used to prevent an element from expanding beyond a certain frame.

Container with max-width property

The example below defines the container size as 800px, but sets the size limit to 90%.

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

Adaptive Image

You can make an image automatically resize to its maximum size using the max-width:100% and height:auto properties.

Img (max-width: 100%; height: auto; )

The above code is for adaptive image works in IE7 and IE9, but does not work in IE8. To correct the situation, you need to add the width:auto property. You can use conditional CSS rule specifically for IE8 or below given trick for IE:

@media \0screen ( img ( width: auto; /* for ie 8 */ ) )

min-width property

The min-width property is the opposite of the max-width property. It sets the minimum possible width of the element. Below is an example of using the min-width property to prevent the input field from becoming too small when zoomed out.

3. Relative values

IN adaptive template usage relative values can significantly simplify the CSS code and improve appearance design.

Relative fields

Below is an example of comments that use the relative width of the left margin to create indentation in a tree structure. Instead of an absolute value in px, a percentage value is used for the next level in the list. On the left side of the figure you can see that on mobile devices available space for list elements may not be enough for normal display if absolute values are used.

Relative font size

Using relative values for font size (em or %) you can easily achieve appropriate changes in line height and indentation sizes when adapting the template to the device screen size. For example, all related elements are automatically resized when you set new font size sizes for the parent element.

Relative padding

The figure below demonstrates the benefits of using a relative % value for padding. The block on the left has unbalanced space when applying absolute px values. The block on the right has great view with proportional filling of content.

4. Trick with the overflow:hidden property

You can prevent text from wrapping around an element using the overflow property. Very simple and useful way. You can unwrap text around the previous element and maintain the structure of the content.

The max-width property helps you fit non-breakable text (such as a long URL) onto multiple lines instead of just one.

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