Simple Responsive Design and Media Queries

[radderfire]

Hi Guys

I am handcoding a new website. I want this to display nicely on mobile, tablet and the desktop. I am aware of media queries, and know how to use them. However, I like simple solutions, and want to keep things as simple as possible as long the design looks acceptable.

My questions are:

Do you think I can get away with two possible layouts, one for mobile and tablet, and one for desktop, using a media query breakpoint at 768px or more?

Or do you think in practice it's necessary to have three possible layouts, one for mobile, one for tablet and one for desktop?

I just want a simple solution that will look ok across everything, but I don't want hours of fiddly coding. I don't mind if I have things spaced out a bit on the desktop. What do you say? Your comments please.

Also, any links to good articles about this problem would be appreciated.

Thanks

 

[GravyMonster]

Do you think I can get away with two possible layouts, one for mobile and tablet, and one for desktop, using a media query breakpoint at 768px or more?

Normally, no. You'd want one layout each for mobile, tablet and desktop. However designing for a tablet is relatively redundant these days thanks to their high resolution as they can normally run the desktop site pretty well. Obviously this is entirely down to the design you've got, but generally you just design for mobile and desktop.

Media queries for mobile shouldn't be fiddly at all, generally it's just changing to relative widths, amending floats etc. You just need to remember to structure your desktop markup while keeping in mind where elements will need to be moved to on mobile.