
How To Build A Site That Looks Great On Every Screen - janektm
http://www.readwriteweb.com/archives/how_to_build_a_site_that_looks_great_on_every_scre.php
======
extension
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.

~~~
ceol
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.

~~~
extension
That is OnSwipe

------
blauwbilgorgel
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?

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

~~~
rplnt
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.

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

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

~~~
rimantas

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

~~~
algorithms
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 :(

------
alok-g
It displays link URLs when printing or converting to PDF.

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

See also: [http://davidwalsh.name/optimize-your-links-for-print-
using-c...](http://davidwalsh.name/optimize-your-links-for-print-using-css-
show-url)

------
smharris65
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?

------
phzbOx
That site was unreadable from my mac as there were ads _everywhere_.

~~~
DanBC
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.

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

~~~
rimantas
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.

