

There's no excuse for sidebars on my phone - kevinpet
http://kdpeterson.net/blog/2011/08/mobile-stylesheets-with-bender-js.html

======
Pewpewarrows
As others have echoed here, the solution has been and will continue to be:
Media Queries.

The entire point of Media Queries is to provide a functionally identical site
that modifies its layout automatically based on a few properties of the
browser viewport, most commonly width and height. Media Queries, when used
properly, get rid of the entire need for a toggle between mobile and desktop
"versions" of the site. Instead it's the exact same site.

The only tricky part then becomes complex javascript interaction that changes
drastically for the mobile "experience." Modernizr helps here, providing
javascript a way to tell which Media Queries are active or not. You're going
to run into some hairy problems if you want to use something like jQuery
mobile, having it only be usable for certain screen sizes.

------
fr0sty
The author holds up Wikipedia as a good example, but I have found the
wikipedia experience on my phone to by abysmal because the back button doesn't
behave correctly.

When nagivating to a Wikipedia page I get a flash of the normal page then a
redirect to the mobile version. Pressing back gives me the normal page which
redirects me forward. to actually get "back" I need to double tap quickly
enough to actually escape the site.

Many other sites do the same thing but Wikipedia stands out in my mind as
consistently frustrating.

~~~
fr0sty
UPDATE: I just retested this and it appears that Wikipedia no longer breaks
the back button.

~~~
ErrantX
The mobile Wikipedia site is being worked on, I think. At least, the tech team
were rolling out updates the other day (which ended up displaying for normal
Wikipedia too, oops).

I'm not sure if there is anything more to come.

------
andybak
Isn't the point of media queries not to try and guess what type of device is
being used (are people really doing that?) but to make a layout decision based
on the available device information.

The author seems to be claiming that media queries are saying "I reckon this
is probably a phone so I'll show them a mobile layout" whereas surely the
point is for the media query to say "This device has a screen width less than
x pixels so I'll move the left column underneath the content"

~~~
kevinpet
Author here. That may be the point of media queries, but they don't (in my
limited understanding) achieve that very well at this point in time. The
article I linked is explicitly saying "here's a rule which will allow you to
load your mobile stylesheet that works with current mobile browsers." Of
course, media queries for iPhone 4 deal with different kinds of pixels, so you
can't rely on the standard, you have to dig into device differences.

My goal was a simple enough solution that is suitable to use places like blogs
or Hacker News. If you're trying to build a very slick eye-candy-heavy site,
then media queries might be the answer, but they require more testing and
thought than my solution.

~~~
tingletech
what I like about your approach vs. media queries, as I understand it, is that
you can toggle between the two views. Sometimes I want to see the screen view
on my phone, and vice versa. I don't think you could do that with media
queries alone.

------
lostconvos
This is silly. Media Queries aren't the non standards-compliant nightmare you
make them out to be. With the ability to check for greater than or less than
values for a variety of widths and devices I can create a site that looks
perfect on an iphone or ipad at horizontal or vertical or an htc or a notebook
or laptop or desktop.

------
dbalatero
Getting my site to work on mobile is so low priority it's not even funny. I
get how many mobile devices are used today, but there are often bigger fish to
fry, often with limited team resources.

~~~
kevinpet
That's the attitude I'm targeting. Drop in five lines of code and use a
different stylesheet for mobile. Easy and no danger of making it worse (since
they can switch back).

I'm not really going after anything built by a team though. I'm mostly
thinking of this as a solution for blogs or maybe the pre-login section of a
site. Usually once you're inside a web app, things get more complicated than
you can deal with with the simplicity of stylesheet A vs. B.

------
pbreit
What's a "sidebar" in a mobile context (I'm an iPhones user)? Is it a
reference to scroll bars?

I absolutely detest the Wikipedia mobile version with all the sections
collapsed.

~~~
kevinpet
By sidebar I meant margins.

------
ChrisArchitect
<http://cssgrid.net> 1140 CSS Grid is pretty good with the media queries and
what not

------
carussell
You know all that stuff that you strip out when you send content to mobile
devices? Just get rid of it. What makes you think everyone _does_ want to see
that cruft on desktops, notebooks, or tablets?

<http://news.ycombinator.com/item?id=1922041>

------
musket
I'd love to see an official reply to that.

