1

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 turn your device to landscape - it gets a little bit bigger. This is not responsive design or is it? What i mean is that a mini version off a site, which is totally useless for reading is just a convenient way to show your website on a small device. Is it not just the browser converting it?

By the way what is this method called in a design world?

What I want is a way to show and use a website on a small device. When I surf on my smart phone or tablet, i ran into sites which is converting beautiful to a functional and readable website ( it has a "Hanburger" menu, and I know there are some thougths about this kind of menu). Is this a responsive site?

What about horizontal versus vertical. Should a website convert automatic? or just horizontal

edit: I just want to know the definition of responsive design Because i am a little bit confused. Is a mini version of a website, where you have to slide your fingers for getting some kind of content or is "the Hamburger menu" the right way?

Maybe someone could point me to a website which have some best practice articles Thats all

Thanks in advance

Improve this question
  • See this question on the User Experience site: What is the meaning of responsive design?. – dan♦ Sep 14 '14 at 20:11
  • edit: I just want to know the definition of responsive design Because i am a little bit confused. Is a mini version of a website, where you have to slide your fingers for getting some kind of content or is "the Hamburger menu" the right way? Maybe someone could point me to a website which have some best practice articles Thats all Thanks in advance – Newbie Sep 14 '14 at 22:07
  • @Newbie: bybe's answer pretty much covers it. There is no one design that a "responsive design" should look like. There is no singular correct "responsive design" that works in all cases (some really don't work that well in my opinion). A "responsive design" is simply that... one that dynamically changes for different devices and resolutions. How you design it depends entirely on your content and to some extent your target audience. – MrWhite Sep 14 '14 at 22:28
3

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.

Improve this answer
  • Ok Thanks for pointing it out. I can't give you any credit for your answer because it is on hold. – Newbie Sep 17 '14 at 20:24
  • No credit required, glad I could help. – Simon Hayter♦ Sep 17 '14 at 20:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.