Mobile Styling? Mobile Versions best approach?
Permalink
Hi Team..
Having designed quite a few sites now with mobile styling. I have been doing it one of 2 ways.
1. Using your mobile theme switcher
2. using @media min-width within main and mobile theme.
Now my most recent site design has a widescreen banner with HD images which are quite large, and a bit pointless downloading on most mobile devices but not all?
So my question is how can I target just tablets for hd gallery and lower quality ones for other mobiles?
So far made a theme using media which sizes based on screen width, this works well on all mobile devices I have tested so far. But this still loads hd images on to my mobile which has a hd screen, but seems a bit OTT.
Next I copied my theme and changed only the banner block to (banner-mobile ) Added the gallery with small low res, pictures.
This also worked nicely for mobiles with small images faster loading, But Doesn't look so nice on the tablets which can handle much bigger image quality?
Any Ideas how i can?
1. Target just tablets?
2. Add a HD/Low/high quality option which switched the web site banner and maybe all other images/gallery image sizes/quality?
Thanks for any advice/assistance
Regards
Carl
Having designed quite a few sites now with mobile styling. I have been doing it one of 2 ways.
1. Using your mobile theme switcher
2. using @media min-width within main and mobile theme.
Now my most recent site design has a widescreen banner with HD images which are quite large, and a bit pointless downloading on most mobile devices but not all?
So my question is how can I target just tablets for hd gallery and lower quality ones for other mobiles?
So far made a theme using media which sizes based on screen width, this works well on all mobile devices I have tested so far. But this still loads hd images on to my mobile which has a hd screen, but seems a bit OTT.
Next I copied my theme and changed only the banner block to (banner-mobile ) Added the gallery with small low res, pictures.
This also worked nicely for mobiles with small images faster loading, But Doesn't look so nice on the tablets which can handle much bigger image quality?
Any Ideas how i can?
1. Target just tablets?
2. Add a HD/Low/high quality option which switched the web site banner and maybe all other images/gallery image sizes/quality?
Thanks for any advice/assistance
Regards
Carl
There's no one-size-fits-all solution to this too, since each project is going to have it's specific requirements on how images are resized. Some projects may actually want to serve hi-res images to mobiles so you can zoom in and see details, where for others instead of just resizing the image to a lower resolution and file-size, it's more important to focus on particular part of an image (e.g. a face), which is referred to as the 'art direction problem'.
Have a look at this article for some suggestions:
http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive...
I know some people are having success with Adaptive Images -http://adaptive-images.com
https://github.com/teleject/hisrc... looks interesting too, and might be the thing you need to solve the specific problem you've raised. You'd need to hack your galleries to generate the extra versions of the images and output the extra HTML attributes.
My preference when we're talking about responsive/mobile sites in general, is to avoid browser detection and have one theme with responsive breakpoints in it to handle things (your point 2). I originally was using breakpoints based on iPhone and iPad sizes, but I've now moved onto making sites scales continuously across widths, using specific breakpoints to fix when/where the design starts to need adjustment. When there's so many different devices out there now, different tablet sizes, bigger phones, etc, it's more about ensuring that a site works well on any screen size.