Designing for mobile -> how will we do it a year from now
-
Recently I sort of redesigned a blog I maintain, and I decided to put some extra effort in removing the sidebars when the site is viewed from smaller screens. The sidebar isn't really important anyway and now it reads a whole lot better, especially because I also changed the zoom behaviour (always fully zoomed in using viewport) etcetera.
However, I used CSS media query wizardry to get the viewport width, and I use a treshold of 800px. Which works fine for me personally as my phone has a 800x480 resolution. However, it won't work so well on the iPhone in landscape, and I don't even want to begin thinking about phones like the Galaxy Note and the Galaxy Nexus, which both have super-high resolution screens.
Am I missing something or is the whole designing for mobile thing impossible a year from now, without relying on user agents etc (which is kinda sketchy)? -
Oh, there is probably going to be some discussion (rightfully so) about whether or not you should cater specific changes to mobile phones. But this is mainly about the technical possibilities.
-
This is why Simple RESS is very interesting to me because it allows me to serve completely different files instead of simply relying on CSS to change some styles. I understand the reasoning behind providing the same content for a mobile and desktop experience, but since the desktop allows for more room, maybe you would want to offer more pics,etc.
For example, a restaurant site could just show directions and menu for a mobile experience, but on the desktop you can get the idea of the ambiance of the place. -
@Scrivs: your post about it actually spurred mine, but doesn't ress do the same thing? Just rely on resolution?
if($res < 800) {
echo 'Smaller nav component.';
} else {
echo 'Larger nav component.';
}
Is what I see in the code. But how can we still rely on resolution if the Galaxy Nexus has a resolution of 720 x 1280 pixels? If I had a 2 column site which I wanted to display better on mobile phones I'd remove the sidebar on phones, and have a smaller version of the important stuff below the main column. Also, I'd enlarge the font, as mobile phones have increasing PPI and as such the font will likely be unreadable.
I'd still want to do those things on newer phones, but resolution-based filtering won't work then. -
@RoyAhuis Maybe I don't understand what you are asking, but if the resolution changes from landscape to portrait you would have to refresh the page anyways to get the new style. I haven't heard of a solution that automatically sends data to the server when the client changes resolutions, but then again I've never tried it.
Not quite sure why resolution-based rendering wouldn't work with what you are trying to do. -
No, I mean there is no way to serve phone-specific CSS if the phone has a superhigh resolution. It can't be detected it's a phone anymore.
-
Hm, just so I can get a better understanding of your reasoning why would it matter if it was on a phone specifically? 800px is 800px no matter what type of device you are on.
-
The real dimensions of 800px can be totally different though. Like it might be 5cm on a phone and 20 on a pc screen. This results in us serving the mobile sites the same as for screen and making them unreadable. Like Roy says—it's all about the pixel density (PPI).
-
Thanks @malydok, that's exactly what I mean. Counting on pixels for readability doesn't work on mobile phones because of the higher ppi. You can increase font size though, I guess?
But then still, there is the issue of detecting whether it's a mobile phone or a laptop. 1280x720 is now available on phones, but a lot of laptops still have that resolution or something like that. -
The future lies in responsive web design. One website that resizes and adjust the content based on the screen resolution, not the device. A free flowing design that can resize itself in a way that continues to deliver the EXACT SAME CONTENT of the main site no matter what device. Designing for mobile, tablet, or desktop should not be about taking away content from the site for specific devices. To remove content based on size is highly aggravating to those of us who want to use a website with all the trimmings when on our phones.
How many times have any of you been on a social media site and have been forced to use the mobile version. Certain important admin features are usually disabled, certain settings are not accesable, and then you have to wait until you are in front of computer to access the full features of the main site. Why even make your site accessable on a phone if you can't bother to include all of its features?
If I only wanted one feature of a site I would look for an app that focused specifically on that feature. And honestly if a site has a feature that has the popularity to make it app worthy then owners of that site should design an app for that feature.
I'm very new to responsive web design but these sources are a great place to start if anyone is curious and eager to learn more.
Responsive Web Design
http://www.abookapart.com/products/responsive-web-design
50 examples:
http://designmodo.com/responsive-design-examples/ -
@t3amBrian: Imagine you have 3 visitors:
- 1 browsing from a Galaxy Nexus phone, 1280x720 on 4.6"
- 1 browsing from a Galaxy Tab, 1280x720 on 10.1"
- 1 browsing on his laptop, 1280x720 on 13.3".
How are you going to do 'responsive webdesign'? Media queries are based on pixels, and pixels don't work in this example as the PPI is totally different. -
@RoyAhuis Essentially all sizes in between the media queries should hold form based on the closest size. The designs are more or less liquid and snap to size when confronted with a pixel width that fits or comes close to fitting the specified media queries.
I'm very new to designing web content for multiple devices. If I had access to the new galaxy I might be able to get back to you with an answer to your question. I'll hunt somebody down and find out what some of these sites, like the Boston Globe, look like on high res phones.
The more I think about it the media queries might benefit more from a PPI:Pixel ratio rather than a specific resolution. Does that sound like a good solution? A little research is in order. -
@RoyAhuis
You do know Media Queries go beyond "min" -and "max-width", right? There's also "min" -and "max-resolution", "orientation:portrait" -and ":landscape", also "device-aspect-ratio".
Also, you are not limited to px with Media Queries. You can go everywhere from % to em.
Sorry I couldn't be more helpful — I'm a designer who can code, and not the other way around. But I'm sure you'll find a solution, eventually. -
I'm in the same boat. More or less a designer who has been forced to code. I did not know that media queries had a device-aspect-ratio.
-
I'm pretty sure you're not actually going to need any of those queries building a simple blog. My advice to you is not to experiment with "device-aspect-ratio" or "max-resolution", but to get familiar with CSS for fluid designs, "max" -and "min-width" queries for responsive design and the differences on various devices. Based on personal experience, I am fairly positive you're just, for some reason, imagining it to be more difficult than it is. Don't overthink it. Responsive web design is actually quite simple. You just need a chance to test your designs on actual devices. Some results can be surprising.
-
Scrivs, thanks for posting Simple-RESS. I have been looking for something similar to that because sometimes CSS3 Media Queries do not work for my sites.
My two cents is mobile design will become easier in a few years from now. Each year, the mobile phones are upgrading in screen resolution and processors, so eventually, a simple design for a website will work in a mobile phone with little to no tweaking. I'm not sure if a complex design will ever work on a mobile phone, but with technology evolving, I believe we will need less user-agents and scripts to adapt to mobile.
