Current responsive best practise?

Get Started
1

I’ve built a few XHTML and CSS sites and dabbled with a bit of PHP and Javascript in the past.

Recently I’ve been looking at HTML5 and think it would be a good time to study responsive layouts too.

What’s the best current way to tackle responsive layouts?

I’ve got some info that uses width and pixel count, but with all the new mobile devices sporting very high displays I think this info is way out of date.

Phil

2

Decimal percentage is the best way to calculate responsive design’s dimensions. A good explanation you can find here :

http://nimbupani.com/using-decimal-percentage-values-in-responsive-design.html
3

Setting sizes to stiff is definitely bad idea.

4

What about selecting the correcting css file for the device?

I’ve found instructions for a css media query

<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="layoutSmall.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="layoutMedium.css" />

But I’m wondering if this is best practice because of the high resolution mobile displays, or am I getting mixed up with pixels and the resolution of the device?

5

Thanks people, I did a bit more researching and followed some video tutorials and came up with this test page.

First test page, single column with menu

After that I was able to piece together something closer to what I was hoping for

Second test page, a 2 column layout which adapts to a single column on small screens

The second page uses responsive %s for it’s padding.

6

After working on the responsive layouts, I’m now looking at responsive menus.

Any ideas about tackling menus for the smart phone sizes. I’m thinking along the lines as a form or pop up menu.

Links to sample code would be good guys.

7

To help clarify my question, I’ve been looking for the best way to display a menu across desktop, tablet and smart phone.

[URL=“http://tynesidegraphics.co.uk/responsive/menutest/”]http://tynesidegraphics.co.uk/responsive/menutest/

This is looking ok on desktop and tablet but the menu looks too big on a smart phone, so I’m wondering what the other options are.

Any ideas?

8

I design my layouts at an average resolution with an idea of how they’ll look when shrunk and enlarged. Then I’ll code it completely elastic/fluid with the heights/sizes/spacing of the smallest version. Then I add media queries and go from small to large resolutions.

Just the process that makes the most sense to me and has produced the best results from personal experience.

Hope this helps.

9

Bootstrap is the best practice for responsive website.

you just add meta viewport name and content inside the header section of html.

<meta content=“width=device-width, initial-scale=1, maximum-scale=1” name=“viewport”>

And then add media query for screen resolution.

@media only screen and (max-width: 320px) { /css style coding/ }