I think that there is one important media query that we have missed and that a lot of people just ignore. We go from large size monitors (1200+), to middle sized (1024) to tablets (734) and then mobile. Well we forgot a really important one! Ready?
Half-Screen Media Query
With the advent of “snapping” introduced to the general public when Windows 7 came out, snapping has grown to have a Mac app, work on newest Linux UI/Desktop managers and more. Yet, we don’t compensate for it. I’m currently working with Twitter’s Bootstrap and so I have the documentation open on one side of the screen, you know what that means? I get a crappy semi-mobile view that hides the menu, squishes the text, gives me TOO much damn padding on each side of the screen and generally sucks. Why? Because the width of the container is set to 730. There’s a lot of space on each side. And there’s a lot of devices/computers/monitors that take advantage of the 1024-730 range
You know what’s worse than that? Media queries that keep that 1024px width so I’m stuck with scrolling unless I size the screen just a tad smaller than half my monitor to get that “tablet” view which just doesn’t work right on a desktop.
Now, I’m as guilty as anyone for not having an optimized view but check out my site! If you have a 1960 (new standard in my opinion) and size it to half. What happens?
- full menu visible
- full text visible
- no scrolling
- no dropping of floated elements
- text is slightly smaller (kinda blows, I might adjust that!)
Isn’t that better though? You can use the entire site, and leave it half-screened with another site next to it. I’m growing increasingly frustrated with non-fluid layouts that just don’t allow you to do that. And even with a fluid layout, I’m not on a tablet! And if I was, why is my menu condensed? You’ve got 5 damn items in your menu, there’s no reason to call up a mobile menu!
Here’s what I propose the new half-monitor-sized (half-screen-size) conventions follow:
- break somewhere between 960 and 900, be fluid within that range
- keep the full menu up there in some form or fashion. No “select” drop downs or Bootstrappy stuff
- no dropping floats unless you have more than 3 columns on your site (such as sidebar, sidebar, main or sidebar, main, sidebar config)
- the padding on each side of the screen should not exceed 15% of the screen size. That already sucks. Bring it down to 10px on each side!
- text should be clearly legible and should not size down with the site (issue on my site).
Simple? Yep. Useful? IMMENSELY. I close out of sites that can’t accommodate my half-screen view!
Worst sites to view in a half-screen size on a 1960px monitor (again, a new standard, i think):
- WordPress dashboard – elements overlap, it’s impossible to use. You have to size it down just a tad for the elements to drop into a single column view which is actually really bad ass. This is one exception where floats should be dropped
- Reddit – ever used it on a half-screen sized view? No? Well, it sucks. Immensely. Elements overlap, stuff appears at the bottom of the page. It ain’t pretty.
Know of a site that executes this well?
Let me know, would love to point people to it whenever I have this issue and tell them how to resolve it.