VD0
What media query will cover the majority of the smartphones?
Hi folks,
what media query do you use that covers the majority of the smartphones?
I use this and work pretty well but some of the smartphones with bigger screens are displaying the desktop layout instead of the mobile one:
@media only screen and (max-width: 479px), screen and (min-device-width:719px) and (max-device-width:721px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
Cheers,
Vic
I've recently moved to a device agnostic approach, so don't target phones and desktop separately.
The idea is should work no matter what combination of screen size or input etc. So a tablet will display the full size version but will also be designed to be touch friendly. I moved to this approach when I was looking or a new laptop and realised about half of the ones I looked at had touch screen.
Similar to Alex I use
@media screen and (max-width: 600px){then go fluid under that.I also fix the with to 300px
@media screen and (max-width: 300px){this isn't really going to come up very often but from a device agnostic point of view you need to consider all eventualities.Sorry, not sure if any of that answers your question at all.
I'm basically saying why not try targeting the size rather than the device.
each smartphone renders different. E.g. I'm testing now an email that shows a different font size on Samsung (II & III) than Nexus 5 and iPhone. So it's not even a question of OS (Nexus and Samsung both share the same Android OS) but the device itself.
Why not just resizing the web browser since you think is all about the screen size?
This! Breakpoints should be based on your content not on a specific device size. Setting them in this manner will cover everything you need.
Also, definitely agree that designs should be touch friendly across every breakpoint. Everyone should be designing for touch regardless of if they're designing things responsively or not.
yeah I embraced lately the fluid layout for devices bellow 600px and it works great. It seems so far the best solution to keep up with increasingly number of smart phones and tablets over there. Are you guys optimizing for Windows phones and Blackberry?
Most of our emails at Litmus follow a similar approach as Alex mentioned. We use
@media screen and (max-width: 525px)and keep things fluid under that, which works well with our mostly single-column design. For some of the more advanced stuff that our designer, Kevin, pulls off (animations, video backgrounds, etc), it's useful to target specific devices using some clever media queries.That being said, I think Mark is on the right path. It's more important to think about the content instead of the device. Instead of targeting specific devices with breakpoints, look at how your content reacts when shrinking down your browser. Wherever your content starts looking funky, make that a breakpoint and adjust your styles accordingly. This accomplishes two things:
Here's some interesting reading on the subject. While email is a far cry from the web and not everything applies across both mediums, web design is a great place to go for education and inspiration.
7 Habits of Highly Effective Media Queries
Designing for Breakpoints
Logical Breakpoints for your Responsive Design
I usually just use
@media screen and (max-width: 630px){and let it go fluid under that.I think only a single break-point is required in email. Most tablets will display a 600 px wide email just fine without breaking. having a breakpoint under 600px will cover the vast vast majority of smartphones.
So I usually use something like this:
As for Device width vs width, I think this is due to outlook.com's rendering.
Although most tablets are able to display the full width of a 600px or even 650px email, I believe we should consider them mobile devices. User experience on tablets are much more similar to phones than they are to desktop environments because of the touch interface. A simple, clean layout with easily tappable CTAs will give a better experience. It doesn't have to be single-column like on phones, but if you have a nav bar with lots of links or just content with many text links, maybe consider creating a breaking point to target tablets.
What Narong said - we have a very similar approach. We use media queries at the design breakpoint, typically 640px these days. Then design the full width/desktop version so it will work on a touch screen for things like tablets. That also helps when the media query isn't read on things like gmail app.
that said, there is a media query trick to get stuff to work a bit better on things like the S3/4/5, but I don't have it to hand.
Well, why would you have a nav bar in an email to begin with? :) I've always subscribed to the idea that any extra information/links that takes your recipient away from a preferred action is bad. I always call extra stuff like nav bars 'chaff'.
A simple, clean layout with easily tappable CTA's should be preferred, even in a desktop version.
Unfortunately this is a generalisation that should not be made lightly.
We have a client where the Nav bar is the biggest driver of conversions.
Similar to what Alex has said, most of our clients want nav bars. Despite our best efforts in trying to convince them, they always want to cram their entire website in the email. Our best compromise is the nav bar.
on devices with 600px and wider screens I don't see any issue displaying an email as long as the email is no wider than 600 which is a rule. What you are saying falls in a different conversation about optimizing the layout so it's easily tappable (made the word up but probably will soon arrive in the dictionaries). The truth is you cannot have all newsletters have huge chunky buttons just for the sake of making them accessible to people on mobile devices.
Everything you've said is correct, but I believe there's more to email than just how it renders. As email designers, we have to care about how it looks and renders, but we shouldn't stop there. Creating a good experience for users should be just as important as making the email look good.
Many modern websites, even in desktop mode of widths over 1,000px have adopted these 'tappable buttons' and websites with a majority of their buttons as text links begin to look more and more dated. It is the trend of today's design and I feel that we, as designers, should stay on top of trends.
If your brand has the classic, retro feel -- great! But most brands could benefit from a good update.
also, to help with the majority of smartphones, be sure you have the IE Edge meta tag in place as well.
IE for smartphones?
Windows phone ????
gosh who's optimizing for Windows phones? Are they even supporting media queries?
They do if you have the IE Edge meta tag. And apparently, lots of people are :)