: What is responsive design exactly? Can anybody tell me what responsive design exactly is? I work in a firm and they have a site which are just a small version off the website. And if you

@Nimeshi995

Responsive design is a website design that responds

Responsive Design is used to describe a design which responds and adapts to the users resolution or device used. This can be setup in various and the widely common accepted method is by using the meta name viewport combined with css media queries.

Horizontal vs vertical design

Using media queries you can design a website that reacts either on vertical, horizontal or both at the same time. Generally horizontal is commonly used and recommended due to the way screens nowadays are widescreen and the fact that catering for horizontal use is much easier than attempting to cater for every single resolution. You see a ipad will be different in landscape vs a iPhone due to the resolution.

Setting landscape or portrait can be set by using


(min-device-width : px)
(max-device-width : px)
(orientation : landscape)
(orientation : portrait)


You can use multiple rules within one media query using AND such as:
@media only screen and (min-device-width:0px) and (max-device-width:624px) and (orientation:portrait)

So whats best? horizontal or vertical

This depends on your goal and how you want you website too look and how much time you want to spend testing on every single device. Spending time on the design may mean you spend less time on things that really matter like the content. You should establish what you need and want.

Vote Up Vote Down