Responsive Website design

Responsive Website design

Web projects need to work across multiple devices, screen sizes, and browsing contexts. Responsive design is a web design approach aimed at making websites to provide the good experience for all kind of browsers and devices.A typical website design with responsive capabilities is designed using CSS3 media queries,which allow specific CSS styles to be applied at different browser widths. Many designers wants to build a responsive website, or make your existing site responsive, by using CSS to create a fluid grid,make your images flexible, and add media queries that allow the site to respond to the device it’s being viewed on. Basic knowledge of HTML and CSS is recommended.
Clean, well-structured HTML helps create content that is meaningful and easier to manipulate based on context.
Responsive design has a number of advantages for small businesses:
-Content can be created once and delivered to multiple devices
-User experience is the same no matter which device accesses the site’s content
-Marketing opportunities can be enhanced with complementary services all delivered instantly across all customer touch points

 

To create a responsive website, we should know the below 3 main parts

1. Fluid Grid – It’s a flexible width path. We should stop using pixel-based sizes, instead we use the em or percentage in the stylesheet.
Here the column widths are proportional rather than fixed. For example: width: 1000px; will be width: 90%;

851565_546469912062389_1863186550_n

2. Flexible Images – Images on the website form an integral part of every website.The usage of fluid images causes the adjustment of the size to the parent block. The images will scale out according to the screen resolution/size.
The most common relative solution is to set the max-width of the image at 100%.

3. Media Queries(@media) -Media queries are used to write css for specific situations, which allows you to apply styles based on the information about device resolution. It can be set to detect such features as width, height, screen orientation, aspect-ratio and resolution. And also used to change the layout sizes and rules based on various devices. We have to specify some break points in the CSS.

By using CSS3 Media queries, we can make websites responsive.A typical media query looks like this:
@media (max-width: 500px) {
.container {
width: 100%;
margin: 0 auto;
}
}

By using the @media rule, a website can have a different layout for screen, print, mobile phone, or tablet.

 

Example responsive website : Check out http://www.block-c.com/ , a place to find coupon,deals and promocodes.

blockc_snapshot

 

Some notes:
Old browsers like Internet Explorer 6 don’t support media queries.
Websites who don’t utilize responsive tactics will likely miss out on more traffic and exposure to their website.

Article publié pour la première fois le 08/12/2014

Related Posts:

  • No Related Posts