Responsive website Tips

--Layout

When creating a responsive site, or making an existing Web site responsive, the first thing to focus on is the layout of the elements. I am building a responsive site, always first to create a non-responsive layout, the page width fixed size. If the non-responsive version is done very well, I'll add the media query (mediumQueries) and the Responsive Code. This mode of operation makes it easier to implement responsive features and focus on a single task at the same time.

When you have completed the unresponsive site, the first thing to do is to paste the following code between the HTML page. This will set the screen to a size of 1:1, which provides a full view of the website in the browser of the IPhone and other smartphones, and prevents users from zooming in on the page.

123	<meta name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="HandheldFriendly"content="true">

Now it's time to add some media queries. According to the web site, media queries consist of media types and conditional expressions for 0 or more media queries. By using media queries, skin rendering can target output devices in a specific range without changing the content itself. In other words, media queries make your site look good on a variety of displays, from small smartphones to big computer screens and so on.

Media queries depend on the layout of your site, so it's difficult for me to provide you with a code snippet that you can use out of the box. However, the following code is a good starting point for most Web sites. In this example, #primary is the main content area, #secondary is the sidebar.

As you can see from the code, I've defined two specs: First there is a maximum width of 1060px, optimized for the horizontal display of the Tablet PC. The #primary occupies the 67% of its parent container width, #senondary takes up 30%, plus 3% of the left margin. The second specification is for tablets and smaller screen sizes.

Because of the small screen size of the smartphone, I decided to set the width of the #primary to 100%, #secondary also set the width of 100%, he will be under the #primary. As I have already said, you may have to modify this code bit to accommodate the specific needs of your site.

1234567891011

/* Tablet Landscape */@media screenand (max-width: 1060px) {    #primary { width:67%; }    #secondary { width:30%; margin-left:3%;} } /* Tabled Portrait */@media screenand (max-width: 768px) {    #primary { width:100%; }    #secondary { width:100%; margin:0; border:none; }}

When you're done, let's see how your layout responds. To do this, I used this Matt Kersley to create a very responsive test tool.

Media

A responsive layout is the first step in implementing a responsive web site. Now, let's focus on the very important aspect of another modern website: media, such as video or images. The following CSS code will ensure that your images will never be larger than their parent container, the code is very simple and works for most Web sites. Please note that max-width directives are not supported by older browsers such as IE6.

1	img { max-width: 100%; }

While the above techniques are effective, sometimes you may need to have more control over the image, such as displaying different images based on the client's display size.

This is a good method invented by Nicolas Gallagher. Let's look at the HTML:

1	"image.jpg"data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg"alt="">

　　

As you can see, we use the Data-* property to store the URL of the replacement image. Now, let's use the powerful CSS3 to specify a replacement image for the media that matches the min-device-width condition:

1234567891011

@media (min-device-width:600px) {    img[data-src-600px] {        content: attr(data-src-600px, url);    }}@media (min-device-width:800px) {    img[data-src-800px] {        content: attr(data-src-800px, url);    }}

　　

Impressive, isn't it? Now, let's look at another media that is very important in today's website-video. Since most websites use videos from third-party websites, I decided to focus on Nick La's elastic video technology, which allows you to embed responsive videos.

Html:

123	<div class="video-container">    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"width="800" height="450"frameborder="0"></iframe></div>

　　

Css:

1234567891011121314151617

.video-container {    position: relative;    padding-bottom: 56.25%;    padding-top: 30px;    height: 0;    overflow: hidden;}.video-container iframe, .video-container object, .video-container embed{    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;}

After applying the code on your website, the embedded video is also responsive (responsive).

3– fonts

The final step of this tutorial is absolutely important, but often overlooked by web developers-fonts. Up to now, most developers, including myself, have used the image to define the size of the font. Although pixels are OK for normal site use, there should be a responsive font for responsive web sites. In fact, a responsive font size should be associated with the width of its parent container so that it adapts to the client's screen.

　　The CSS3 specification introduces a new unit called REM, similar to the EM class, but REM is easier to use relative to HTML elements.

REM is relative to the HTML element, and don't forget to reset the HTML font size:

1	html { font-size:100%; }

　　

When you are finished, you can define the font size of the response, as follows:

123	@media (min-width: 640px) { body {font-size:1rem;} }@media (min-width:960px) { body {font-size:1.2rem;} }@media (min-width:1100px) { body {font-size:1.5rem;} }

Note that the old browser does not support REM units, so do not forget to implement an alternative.

Responsive website Tips