How To Build A Site That Looks Great On Every Screen | Hacker News Reader

How To Build A Site That Looks Great On Every Screen

readwriteweb.com

63 pointsjanektm19 comments

Honestly, the sites I find most usable on my iPad and iPhone are normal desktop sites that don't interfere with pinch-zoom and double-tap. That's how the device and browser were designed to work.

Sites that try to deliver an "optimized experience" are usually crippled at best. At worst they are completely broken. The really fancy ones like OnSwipe crash Mobile Safari after a couple of page views.

I think responsive design is different in that the basic idea is just to reduce the number of columns as the screen gets smaller (or increase them as it gets bigger). Likely the sites you are complaining about are serving up something completely different for mobile or perhaps some are going beyond what responsive design is and messing things up.

Not sure if this is the same thing you're talking about, but I've found a handful of WordPress blogs have some sort of mobile theme that tries to mimic the iOS "bounce" when scrolling all the way up or down. Ironically, most of the time it breaks MobileSafari on my iPad.

That is OnSwipe

This is no tutorial or even an article on responsive design. It is a small collection of links, that seems to confuse HTML5 or iPad magazines with responsive design.

I think this is a fluff piece, with a catchy title, build around a buzzword, not around expertise or original research. We designers get a few links to the basics of HTML or irrelevant frameworks, could you even imagine the same happening for a serious programming article?

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.

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.

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".

I'm really not happy with the current situation of web design. Especially the "looks great on every screen AND device" part. To create a truly responsive Design you have to incorporate Orientation, Width, Height, Pixel density and much more. (which usually nobody bothers with since this would be way to complicated) People are using only subsets of these, so the sites often break on different devices, etc.

Then there's the problem with the content. Mobile users won't necessarily need all the things Desktop users do, since they usually have a very clear picture of what they want to do on the site. There needs to be an easy server-side implementation for such things. (would love to hear about it if someone knows any related projects)

PS: Please allow your users do "default" to a standard-version. I've seen so many sites break on mobile phones, making them completely useless...

  > Mobile users won't necessarily need all the things Desktop users do,
  > since they usually have a very clear picture of what they want to do
  > on the site.

That's backwards. Desktop users want exactly the same that mobile users do. Desktop version has more only because someone thought "hey we have some space there why not to fill it with something?". That something is often most usless stuff.

  > PS: Please allow your users do "default" to a standard-version. I've seen
  > so many sites break on mobile phones, making them completely useless...

The thing is: the default version will soon be the mobile one. Take a look at Luke Wroblewski's "Mobile first" it's a good insight what's going on.

The first point is actually the best thing that has come from Mobile Design thus far. It significantly reduced the amount of unnecessary distracting Ads on the page. Since, as you've said, they are usually used to fill the space larger Environments offer.

I've used the mobile first approach for my last project and I think a site isn't truly responsive if it hasn't a liquid(%) layout. Building those layouts is a pretty messy thing though :(

Hm, it depends. For a content or site, mobile first, which means a list of items without nothing on the sides, is probably the way to go, if you start from scratch.

But many other sites, apps, tools, can't be reduced that far. Take a calendar app, for example, it make sense to more on big screen in month view than on small screen.

It displays link URLs when printing or converting to PDF.

"kit called Foundation" changed to "kit called Foundation (http://foundation.zurb.com/)

But why does the Foundation layout go directly from 4 columns to only one at smaller sizes? For example, the soapbox page has 4 photo columns that at smaller sizes go to directly to one large column. Why not have two columns as a transition before one?

That site was unreadable from my mac as there were ads everywhere.

Ads? I can remember Internet ads but it has been a while as Firefox and Adblock Plus have existed for a while now...

It was useless on my MacBookPro (with Chrome) because the menu bar was white text, on a white background. And some white text had over-written the title. And a bunch of other stuff.

This is typical 'naive' solution which thinks all mobile devices are just "PC with smaller screen and slower CPU". Majority of my potential mobile market still use BlackBerry OS 5 browser which is not WebKit-based, and even more who use feature phone. Oh, and China phone.

So they will became your real market when they upgarde to the more capable smartphones, right? There should be a reason why they are "potential market" and I bet that not enjoyable user experience with those old-schoold devices is a big part of that.

Reply on news.ycombinator.com