How to make responsive design. Adjusting screen resolution
This month's theme is website responsiveness, so we decided to talk in more detail about what responsive web design is, why it is needed, and what the basic principles of responsive web design are.
Responsive Web Design- a fairly new direction in the design of web resources, but now it is one of the main indicators of the quality of the site. 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 mobile devices, for example, there will be no 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) For each type operating system you need your 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 on filling 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 disadvantages, the main one of which is the relative newness of the technology and, as a result, the lack of good specialists and knowledge about designing adaptive 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;
- Usage flexible images(flexible images);
- Working with media queries;
- Applying incremental improvement.
Types of Responsive Layouts
The article on Habrahabr presents the main types adaptive layouts, currently existing.
1) Rubber
Easy to implement and obvious to the user type of site presentation. 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 an additional menu can appear with a horizontal or vertical tap. The main disadvantage is that the actions are not obvious to 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 most suitable method for needs and capabilities.
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. With the resolution of your monitor, yes, but what about on a larger 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 convert all large values into 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 remove horizontal scrolling, this is useful for mobile adaptation, sometimes it makes sense to only disable horizontal scrolling with:
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 squeeze the screen yet, we haven’t gotten to mobile adaptation yet, we’ve done it yet 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 it will not be possible to compress everything into a percentage for a small screen. 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. Narrowing the screen, I found my point of “curvature”, it starts at a width of 1000px, which means writing down 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. My opinion is that they are mobile version Not needed. 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 been made to the output. top menu(fortunately, it needs to be minimized, but this is not critical and I’ll 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 maximum size The width of the images is 96% (with nice indents), and the height is set automatically.
The specifics are over, once again general sense adapting the site (design) using CSS.
- - Change large px values to %,
- - We register separately @media screen and for mobile devices.
Via @media screen and be sure to close the display blocks that are unnecessary for mobile, but convert to % those values that are displayed incorrectly, since 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 Using relative values can greatly simplify your 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 absolute value px uses the percentage value for the next level in the list. On the left side of the figure you can see that on mobile devices, the available space for list items 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 cancel text wrapping previous element and maintain the structure of the content.
The max-width property helps place unbreakable text (such as long URL address) in several lines instead of one.
Break-word ( word-wrap: break-word; )
Greetings, casual visitors and regular readers of the blog site!
During the existence of this site, I changed the template several times and even created my own from scratch.
One of the main tasks when choosing a new template is the adaptive layout of the site for all screen resolutions.
Brief outline of the article:
In a previous article I already wrote about why it is needed. But how to achieve this very adaptability?
For this there is different ways. Some use javascript, some use something else. But I believe that the simplest and The right way is an adaptive using CSS.
How to make a responsive website layout
Firstly,
if you set out to create a responsive website design, between the tags
What a fool I was that I didn’t do this right away when I was trying to make an adaptive website layout!!!
The problem with mobile browsers is their scaling of website layout, even adaptive ones.
Imagine, I draw a design, then write down all the necessary styles and queries, check the site’s adaptability when different resolutions. Everything seems to be fine! But when I open my blog on my smartphone, I see that the site has simply shrunk. It did not adapt to the mobile device, but simply reduced the size of the font, pictures, etc.
How so? I began to double-check all the styles to see if I had written the classes correctly, and eventually got to the point where I checked the width of the browser window in px using javascript. I was shocked. When checking on a laptop, I got a result of 1024px, and I got about the same result when opening the site on a smartphone!
But this cannot be!
Turns out, if you do not write the code that I indicated above, mobile browser doesn't understand that the site is responsive and is simply trying to make the website page smaller so that it fits into a small mobile phone screen.
Because of my stupidity and incompetence, I lost a lot of time. But now I remember it forever))).
Adaptive layout CSS media queries
To make it responsive using CSS, you need to use media queries.
How is that? Yes, very simple. IN CSS file you need to write queries like:
@media screen and (min-width: 1440px) and (max-width: 1599px)( )
This code means that styles enclosed between “( )” will work for screens with a minimum width of 1440px and a maximum of 1599px.
That is, those styles of site elements that must be adapted depending on screen resolution must be written separately for each possible screen width.
The most important screen resolutions for adaptive layout
- 320px- Mobile devices (portrait orientation);
- 480px- Mobile devices (landscape orientation);
- 600px- Small tablets;
- 768px- Tablets (portrait orientation);
- 1024px- Tablets (landscape orientation)/Netbooks;
- 1280 px or more- PC.
It is these permissions that need to be emphasized and given Special attention with adaptive layout. These are the most common types of screen resolutions.
bootstrap responsive design
Very convenient to use for creating adaptive bootstrap layout. The convenience is that all styles for adapting blocks, buttons, tables, etc. are already registered in bootstpap. You just need to figure out which class to assign to which element.
To get started, download the latest version of bootstrap and connect it to your site. Please note that connecting styles and scripts to WordPress has its own characteristics.
The layout on Bootstrap is different in that the width of the block or screen is divided into 12 equal parts. And by assigning a certain class to a block, you can set the width of the block equal to the required number of parts.
For example, this design will allow you to allocate one wide block for content 8 parts wide and one narrow block for a sidebar 4 parts wide:
The width of the blocks will be calculated automatically depending on the width of the screen. And when viewed on a mobile device, these blocks will shift under each other.
You can also adjust the distance of the block from the edge, again, to the required number of parts. For example this design:
A block 10 parts wide will be created with a left indent of 1 part of the screen.
If you look at it, working with bootstrap makes the work very fast. Moreover, these styles definitely work correctly and there will be nothing crooked on the site.
In the future I plan to post several lessons on working with bootsrap. Therefore, I advise you not to miss this moment.
Checking website adaptability
But the question arises: how to check the website’s adaptability? Now you have written media queries in CSS, connected bootstrap and used the necessary classes. How can you check that the site adapts correctly at all screen resolutions?
Very accurate and most importantly free service, which deserves respect and gratitude from webmasters and layout designers who deal with adaptive layout sites.
Well, how do you like the article? All clear? If not, write in the comments, we’ll figure it out together.
Yes, to make a responsive website design, you need to work hard. But these efforts will be rewarded with a favorable attitude towards your site from search engines, and most importantly, visitors to your site.
Translation of the extremely valuable article “Responsive Web Design Techniques, Tools and Design Strategies” from the popular online publication for developers Smashing Magazine.
Back in January, we published an article about responsive design, “Responsive Web Design: What It Is and How To Use It.” Responsive web design continues to get a lot of attention, but considering how different it is from... traditional methods website development, it may seem prohibitively complex for those designers and developers who have not tried it.
For this reason, we have compiled a review of resources useful when creating responsive websites. The review included detailed guides, approaches, tools, articles containing practical advice necessary to create your own responsive website.
Responsive web design techniques
1. CSS Transitions and Media QueriesCSS Transitions and Media Queries
Elliot Jay Stocks goes into detail about the method of combining CSS Media Queries and CSS transitions. The basic idea is this: when you design a responsive site using Media Queries, you constantly change the width of your browser to see how the site behaves. But every time one of your Media Queries is processed, it is visible hard transition between styles (the first, for example, for desktops, the second - for tablets). Why not use CSS transitions to smooth out those hard transitions with animation?
Responsive Images and Videos
5. Fluid ImagesRubber images (browser scaling)
Rubber images are one of the central themes in responsive web design. The article by Ethan Marcotte gives detailed review creating them using a classic code snippet img (max-width: 100%; ), as well as all the necessary parts needed to get started.
Responsive Emails
14. Optimizing Your Email for Mobile Devices With the Media QueryOptimization Email for mobile devices using Media Queries
To view large emails, horizontal scrolling is often necessary, especially when there is an attachment attached to the email. large image. IN this study Campaign Monitor explains how emails can be optimized for mobile devices using Media Queries and suggested several useful methods and code snippets for practical use.
Tools for Responsive Web Design
You can design adaptive design from scratch or use the tools listed below to speed up and simplify the process of creating one.This is a fast and lightweight Polyfill (a piece of code that adds functionality not supported by the browser) created by Scott Jehl to support the min-width and max-width properties from CSS3 Media Queries in IE6-IE8 and above.
Use the information from this little tool to create a responsive website.
A tool for rapid prototyping of responsive design. You can design CSS for a variety of popular screen sizes, orientations, and browsers, be it phones (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tablets (BlackBerry Playbook, iPad,Samsung Galaxy Tab, Dell Streak), monitors or TVs (720p, 1080p).
You can view your design results directly in your browser and use your favorite development tools, such as Firebug. Also try the alternative tool ScreenFly.
The 320 and Up tool is based on the principle mobile first(mobile first), where the design is created first for mobile device screens and then expanded for tablets, desktop PCs and larger screens. It works well both as an addition to the HTML5 boilerplate and on its own.
These are customizable templates for creating feature-rich, high-performance mobile web applications. You will get cross-browser compatibility for class A smartphones and good support for old BlackBerry, Symbian and IE Mobile. And a large number of various optimizations for mobile browsers.
Frameworks for responsive design
33. 1140 CSS Grid1140 CSS Grid optimized to work on screens ranging from the size of mobile devices to 1280px wide monitors. It's simple and flexible mesh, using Media Queries.
This CSS framework is a good basis for developing on tiny screens (like phones) and small screens(eg tablets) straight out of the box with minimal effort. In addition, there is a generator for creating a flexible CSS framework for yourself.
Flurid is a rubber mesh with 6, 7, 8, 9, 10, 12 and 16 columns.
FluidGrids is a modular grid generator that creates 6, 7, 8, 9, 10, 12, or 16 column layouts.
CSS framework for creating responsive layouts. It contains 4 basic layouts and three typography sets.
A fluid framework with a focus on typography.
Tiny Fluid Grid will help you create your own fluid grid of 12, 16 or 24 columns, set their maximum and minimum width and padding percentage.
Responsive Design Strategies
40. The Responsive Designer's WorkflowResponsive web design developer workflow
Luke Wroblewski took notes on Ethan Marcotte's presentation on the application of responsive web design principles to modernize the website of one of the leading newspapers. Among other things, Ethan explains how he approaches responsive web design design methodology and what the prototyping process is in the context of responsive web design.
Luke Wroblewski took notes at the Breaking Development Conference during Stephen Hay's talk on the realities of designing for different devices.
Discussions and different points of view on responsive web design
These articles, while not tutorials, can give you valuable information about why you should use responsive web design techniques (and when not to).An excellent introduction to responsive design as a way of thinking rather than a tool or technique. Jeremy Keith argues that responsive web design cannot simply be added as a step to an existing workflow. Instead of striving for pixel perfection, we should strive for proportional perfection.
The publication is a combination of philosophy and strategy for accumulating best practices in the field of responsive design.
A regularly updated collection of websites that use Media Queries.
In episode 9 of The Big Web Show, Jeffrey Zeldman and Dan Benjamin invited Ethan Marcotte to discuss responsive design.
An excellent addition to the article would be a blog about responsive design, in which developers share their experiences and write reviews of responsive tools.