There's no excuse for sidebars on my phone | Hacker News Reader

There's no excuse for sidebars on my phone

kdpeterson.net

41 pointskevinpet16 comments

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.

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.

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

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.

The reason I don't like the Wikipedia mobile site is because it collapses all the text into sections, and makes it extremely tedious to read - you have to keep poking at the article like it's a big treeview. But it's not a problem to disable, thankfully. The way Android handles zooming in on paragraphs and reformatting based on the zoom level, works much nicer than almost all mobile sites for me.

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"

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.

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.

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.

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.

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.

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.

By sidebar I meant margins.

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

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

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

Reply on news.ycombinator.com