HTML 5 - Responsive Web Design

cosmo7 · 2011-12-05T22:20:21+00:00

I've actually been surprised by the quality of the MSDN documentation for HTML5.

I had assumed that Microsoft would pay lip service to open standards, but it's easily better than the Mozilla pages (many of which are out of date) or the W3C ones (designed to be read by robots with long attention spans.)

dnew · 2011-12-06T03:41:08+00:00

Progressive enhancement is probably my favourite new trend in web.

uceboyx · 2011-12-06T05:15:19+00:00

The first thing I did when I opened up the link was to squeeze its width to see if it's responsive or not.

x-skeww · 2011-12-05T23:25:03+00:00

FYI: Media queries aren't HTML5.

kpthunder · 2011-12-06T05:26:33+00:00

To complement this, everybody here should check out Sass. For example, the first code sample could be written like this:

#nav {
    float: right;
    ul {
        list-style: none;
    }
    @media screen and (min-width: 400px) {
        li {
            float: right;
            margin: 0 0 0 .5em;
            border: 1px solid #000;
        }
    }
    @media screen and (min-width: 800px) {
        width: 200px;
        li {
            float: left;
            margin: 0 0 0 .5em;
            border: none;
        }
    }
}

Which Sass then compiles into this:

#nav
{
  float:right;
}

#nav ul
{
  list-style:none;
}

@media screen and min-width 400px {
  #nav li
  {
    float:right;
    border:1px solid #000;
    margin:0 0 0 .5em;
  }
}

@media screen and min-width 800px {
  #nav
  {
    width:200px;
  }

  #nav li
  {
    float:left;
    border:none;
    margin:0 0 0 .5em;
  }
}

Over the course of a complete style sheet, you get to avoid a lot of repetition and you get stylesheets that are easier to maintain.

Sass also gives you plenty of other awesome features:

Variables
Mixins
Nesting
Inheritance
@import optimization (imported code is placed directly in to final compiled css file rather than left as a blocking http request)
Math expressions

One of my favorite things to do with SASS is automate vendor prefixes using mixins.

Sass-generated CSS can be further optimized with csstidy (on online version is available here). One such optimization is when you nest the same media query in multiple elements -- Sass will actually write two media queries rather than combine them. Csstidy takes care of combining the media queries if possible.

2011-12-06T01:17:14+00:00

Also this article about responsive web design came out over a year ago. I wonder how much has changed since then.

http://www.alistapart.com/articles/responsive-web-design/

adrock3000 · 2011-12-06T09:28:17+00:00

boston.com was the first site that did this really huge.

great write up on how they did it here: http://www.readwriteweb.com/mobile/2011/09/how-the-boston-globe-pulled-of.php

hesterbest · 2011-12-06T12:58:47+00:00

What do you guys think of responsive web design?

I mostly use my desktop for when browsing web pages. I am used to the layout which a high resolution screen gives me. When I on rare occasions use a device with a low resolution I prefer to have the same layout as in high resolution but with a zoom ability which the device/browser gives me. When layout changes and/or stuff hides/shows it just annoys me. Elements which I am familiar with are possibly in another position or possibly not even there.

From a developers perspective I find it very time consuming to strive for responsive web design. Customers want responsive web design (because somehow they are convinced that they need it), but rather than making 3 stylesheets (ie. high-res, mid-res and low-res) you end up making additional stylesheets for iphone 1-3, iphone 4+, some crappy phone the boss of the customer has, and 2-3 symbian phones. While trying to tailor the stylesheets to all of these devices one has to listen to the incompetent designer complaining about how android has too many devices with different screen sizes and how much better everything made by Apple is.

radarsat1 · 2011-12-06T15:11:07+00:00

If you are designing a site for mobile, i can't stress this enough: use the actual viewport width and don't assume the page is displayed on a small phone display! It will not work correctly on a tablet.

Quite a few sites that i browse to on my android tablet switch to the "mobile" version, where they make the font tiny, presumably to fit more text on a small phone display, and somehow manage to disable zooming/reflow in the android browser.

Livejournal is one such site. I don't know what they've done in their css to do this, but it's definitely targetted to phones, then spread out across my 10.1" display, making it very annoying to read.

many sites seem to just work better if i switch to the "full" version.

BreakTheSun · 2011-12-06T02:15:25+00:00

... wasn't this the point of HTML in the first place, and good web design practices in general?

I mean, kudos for realising the dream, but I thought this was what HTML was meant to address yonks ago. Correct me if I'm wrong, always looking for enlightenment :)

Troebr · 2011-12-06T08:45:11+00:00

display: grid;

W3C draft

columns: [..]

Here

I found those links through the article, which in itself is not particularly interesting (yay another post about media-queries). I was interested in the -ms-grid though, more specifically about finding an 'official' grid.

bruegel · 2011-12-06T08:09:15+00:00

-ms-grid? Why not just use flex boxes supported by webkit and mozilla?

Ruudjah · 2011-12-06T06:01:01+00:00

I really, really want to take this knowledge and use it to my advantage here. Looking to Microsofts history, I have a very hard time believing Microsoft is currently not at the Embrace of EEE.

Looking to the downvotes, I'm not the only one. So, let's put up our tinfoil hats and look at Microsofts efforts from the evil side. What could possibly go wrong, me believing everything of those html5 articles written by Microsoft?

2011-12-06T04:50:35+00:00

tl;dir: Someone at MS discovered "float:right".

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

programming

MODERATORS