How To Build A Site That Looks Great On Every Screen

Re:How To Build A Site That Looks Great On Every Screen by hkolk on Monday October 31, 2011 @06:47AM (#3176969)

Good in theory, bad in practice. I will fully admit that this is how it should work, but the soapbox site immediately points to the trouble you get from it. From simple things such as an email field that doesn't say it's an email field, and running out of the viewport boundary because it's too long, to issues like the top banner cutting the photo wrong on the Stay Connected page, and having to scroll down deep to get to content. I find this site looks a lot more unusable on a mobile device.

I applaud the Boston Globe for doing this so well, but I have yet to see other good implementations on proper big websites.

[ Parent | on HN ]

Re:How To Build A Site That Looks Great On Every Screen by rplnt on Monday October 31, 2011 @09:21AM (#3177261)

Another thing I always notice on these "responsive" sites is some huge picture that gets downloaded even if you are on a tiny screen. Here it is 25*(224x224px) + one bigger header image. That's quite good actually - I saw a site where I would get (as in download and render resized) a 2Mpix picture in the header even if I resized the tab to some 200px in width.

[ Parent | on HN ]

Re:How To Build A Site That Looks Great On Every Screen by nickzoic on Thursday November 03, 2011 @12:05AM (#3190204)

Reminds me of the good old days of

    <IMG SRC="Logo-From-Branding-Guidelines-2000x2000.gif" HEIGHT=100 WIDTH=100>

... It is pretty easy to avoid doing this with CSS background images: just use something like:

    .banner {
        background-image: url(banner-big.jpg);
    }

    @media screen and (max-width: 999px) {
        .banner {
            background-image: url(banner-small.jpg);
        }
    }

... of course, this kind of thing doesn't translate well into a "framework".

[ Parent | on HN ]