Depending to order our website is intended to evaluate what we design and put in the same elements.


Types of web design for our site








Customers visit your website from different devices, from smart phones, tablets, netbooks and more. This grows day by day, and it has changed the traditional forms of development of a web design, is developing a new way to meet the needs of the users. This is known as "responsive web design".




"Responsive web design" has quickly become a buzz word in the design industry. Fixed widths are a thing of the past, giving way designs fluids through the "media queries" and CCS3 that help show the site to different resolutions and portable devices in one way or another. This gives the user a beautiful and best experience regardless of the size of the screen.




What is a design responsive (RWD)?

A responsive (or RWD, Responsive Web Design) design is a design that is able to adapt to the device that we are navigating the site. In this type of designs are always send the same content and is mobile, the tablet or the computer that performs the work to adapt the display to the screen, usually aided by javascript. This adaptation to the screen of the device is usually done stacking columns or modules that form our site forming one or two columns on the screen of the device, showing first the columns on the left and which finally are more to the right of our design. The advantages of this type of design are:



• Will only need a single design for the entire site.
• The design will be the same for any device so there will be users who think are somewhere else if they agree with the mobile.
• Responsive designs used the device screen size to fit the content, so a greater number of devices will see the site correctly.
• In general the cost of developing a responsive site is less than that of an adaptive site.
The disadvantages of this approach are
• can not define an independent mobile strategy and in some cases have to make commitment decisions so that our sites will show up in several places.
• Older devices do not adapt correctly to these designs.
• In the case of access with mobile, we are overloading the user's network to send much more data than it needs the device to display the site correctly.





 Adaptive website design
What is an adaptive design?

An adaptive design is one that is only thinking about how you will be our design in one or several mobile (usually). In this type of designs the server detects the device that accesses the web and sends you a content adapted to it. The advantages of this type of design are:

• To send only content tailored for the device, page load speed improves when not sending unnecessary content and do not force the device to change how that content is displayed.
• Obliges us to think specifically about the mobile experience that we want to have our users and that will improve the mobile experience.
• Can create different experiences for different devices.
• We can create as many designs as devices want to differentiate, allowing us to take into account the limitations of each device (avoid using JavaScript or Flash for older models, for example).
The disadvantage of this method is that we will need to make an extra design for each device by doubling the work in the best of cases, and this implies a rise in development.

Below I summarize the three technical elements for adaptive web design:
• Fluid grid: instead of pixels uses percentages to define the widths of the columns or divs.
• Media queries: allow queries to the CSS style sheet based on the minimum width and maximum of a browser.
• Flexible image: the images have no fixed widths but Max, which usually tends to show 100% on a PC.




Fluid web design or web design liquid, is one who tends to occupy the entire width of the screen, regardless of the size of this. Is a type of less used than the previous design, since it requires much more work by the web designer and if fails its result can be quite attractive to "normal" and small screen sizes, but when many inch are used his aesthetic is, the less awful, unless techniques are used such as max-width to limit the maximum width accepted by our design. In this case the web designer uses percentages instead of pixels to set widths of your designs, but you can also use pixels and measures maximum and minimum with min-width and max-width. Luckily is a type design that increasingly is taking more land and will be replacing the fixed design.




The elastic web design, is a type of design very similar to the fluid, but in this case the content is also growing along the width of the design to fill the screen. It is by far, one type of design and very little residual practically usable. We again as in the case of fluid design, elastic design may be more or less pleasant on screen sizes more or less small, but when using very large screens content becomes excessively irrational, so that with few exceptions not have any reason to be. In this case the web designer uses em to set the widths of web design and the rest of the content it hosts. It is a type of design that we should stay away as much as possible.



Depending on that end is intended for our website we assess what type of design and items put into it. Ask ourselves if we want to be more usable than graphics, smarter than extravagant or simply a set of both.
The first question we will have to do is:
Often go our user to our website?
What kind of customer we have?



In short, we can choose between:

Fixed: the width is fixed, so you change the size of the browser or see it on different devices will not affect the appearance of the web. However, a horizontal scrolling may be necessary to cover her whole, and we will have a website that won't look good on smartphones and tablets.
-Fluid: the web is built using percentages to determine the width of the columns. In this way, the columns will be proportional and the browser, ranging from how fluid toward more wide or narrower.

-Adaptive: fixed or relative widths are used, but the code includes specific questions to adapt to specific, as small monitors, tablet or Smartphone screen sizes.

-Sensitive: this type of websites are built on a fluid code, and it also uses questions to control the design and the content as you change the scale to adapt to the browser or device.

Some tools for a good web design:
Responsive Web Design Sketch Sheets

This tool is a useful aid to plot the location of elements across different devices. With this tool, you can have an idea where to place elements on the web page in different browser sizes.


Less Framework 4

Less Framework is a system of network of CSS to design adaptive web sites. It contains 4 designs and 3 sets of types of typography, all based on a single network.



Multi-device Layout Patterns

Design multi-patterns devices are sets of popular patterns used by designers to make designs Resposive. Shows how web sites are adapted to different screen resolutions and how elements on the page with the variation in sizes of screens are displayed.



Fluid Grids

Fluid Grid Calculator is a great tool that you can use to generate CSS for the design of a network of fluids. All you have to do is enter the number of columns and the size of the columns and the channels of communication.
 Adaptive website design