5 ms·

There's no excuse for sidebars on my phone

41 points by kevinpet 15y ago

musket 15y ago
I'd love to see an official reply to that.
andybak 15y ago
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 15y ago
  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 15y ago
    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 15y ago
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.
Pewpewarrows 15y ago
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 15y ago
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 15y ago
  UPDATE: I just retested this and it appears that Wikipedia no longer breaks the back button.
  - ErrantX 15y ago
    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.
- deleted 15y ago
  [deleted]
- barrkel 15y ago
  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.
ChrisArchitect 15y ago
http://cssgrid.net http://cssgrid.net 1140 CSS Grid is pretty good with the media queries and what not
pbreit 15y ago
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 15y ago
  By sidebar I meant margins.
dbalatero 15y ago
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 15y ago
  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.
carussell 15y ago
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 http://news.ycombinator.com/item?id=1922041

41 points by kevinpet 15y ago

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

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 15y ago
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 15y ago
  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 15y ago

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.

Pewpewarrows 15y ago

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 15y ago

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 15y ago
UPDATE: I just retested this and it appears that Wikipedia no longer breaks the back button.
- ErrantX 15y ago
  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.
deleted 15y ago
[deleted]
barrkel 15y ago
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.

ChrisArchitect 15y ago

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

pbreit 15y ago

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 15y ago
By sidebar I meant margins.

dbalatero 15y ago

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 15y ago
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.

carussell 15y ago

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 http://news.ycombinator.com/item?id=1922041