How to make Website Template Theme Responsive and User Friendly

Today every one customer has needed well and responsive websites with all formats like Iphone Ipad Smartphone’s devices because designing is the major part of your business. Most sites create a new device and resolution for each of its stand-alone version is simply unrealistic; the result is that we will win the use of certain equipment users, and those who have lost the use of other devices. However, there may be another way, can help us to avoid this from happening.

Responsive Web Design philosophy is to design and develop a page should be an appropriate response and adjusted according to user behavior and device environment (system platform, screen size, screen orientation, etc.). Specific practices by many, including elastic grid and layout, images, CSS media query usage and so on. Whether you are using a notebook or iPad, our page should be able to automatically switch the resolution, picture size and associated scripting capabilities, so as to adapt to different devices; in other words, the page should have the ability to automatically respond to the user's device context. Thus, we do not have to make a special version of the design and development of new equipment constantly coming up.

Responsive Web Design concept

Obviously, we cannot and do not need to use a motion sensor, or robotics, responsive Web design is more abstract thinking required. Fortunately, a number of related concepts have been the practice, such as liquid layout, help pages reformatted media queries and scripts. But Responsive Web design is not just about the screen resolution adaptive and automatic scaling of images, etc., it is more like a design for a new mode of thinking.

Adjust the resolution

Different devices have their own screen resolution, clarity and screen orientation, and constantly being developed with a variety of new devices will also bring new screen sizes. Some devices based on cross-screen (portrait), some are vertical screen (landscape), and even a square; for the ever popular iPhone, iPad and other smart phones, tablet PCs, users can switch the screen orientation by any rotating equipment the way. How can we make one design to meet all circumstances?

Portrait landscape

To do compatible horizontal, vertical screen (also possible to switch the direction of the user in the process of loading the page), we must consider the N kinds of screen sizes. Indeed, we can use these specifications is divided into several categories, and then do a program for each class, ensure that the program as much as possible, at least in this group have flexibility. But even so, the result will be very anxious, who knows certain types of equipment in five years after the share? But many users do not even maximize the browser window; variables like this, we have to consider how much of it?

Part of the solution: All flexible

A few years ago, flexible layout (flexible layout) is almost a luxury, so-called flexibility, but also reflected in the vertical layout and font size, etc; picture always can easily destroy the page structure, and even the structure of which the elastic element, In the extreme case, will destroy the layout. The so-called flexible layout is in fact not so elastic; it sometimes cannot meet the desktop and notebook screen resolution differences, not to mention the mobile phones and other mobile devices.

Now, we can design and develop responsive ideas to make the page more "flexibility" of the. Size Image can be automatically adjusted; page layout will no longer be destroyed. Although never the perfect solution, but it gives us more options. No matter how the device user to switch the screen orientation, or from the desktop to the iPad screen browser, the page will be truly flexible.

Cropping Logo

If we continue to transfer a small browser window, you will find the text of the logo image will always keep back down, to ensure its complete readable, but will not be cut illustrations around the same on both sides. So in fact the whole logo consists of two parts: the title page illustration as background image size will remain, but will be cut with the adjustment of the layout; the text part is a single image.
  <H1 id = "logo">
   <a href="#"> <img src = "site / logo.png" alt = "The Baker Street Inquirer" /> </a>
 </ H1>

Where, <h1> element uses the illustration as a background, the text portion of the picture remains aligned with the background.

The examples show how little responsive Web design ideas. But this is not enough to avoid a small effort to change the entire layout of the small size of the window is too narrow or too short, and eventually become a small logo text to be difficult to identify, much of the background image will be cropped.

Elastic Image

A responsive Web design idea, one important factor is how to deal with problems image area. There are many pictures of scaling up technologies, many of which are simple and easy for this you can Use of CSS max-width property.