Hi all,

 

I've been building mobile and responsive websites for the last two or so years, and I'm finding the lines are becoming increasingly blurred between tablet and mobile websites, making it difficult to target mobiles exclusively using media queries.

 

For example, I used to target mobiles generally by using a media query like so:

 

@media only screen and (max-width : 650px) {

.examplecss {display: block}

}

 

However lately I've been wondering - "What if a mobile device (particularly when in landscape exceeds) 650px in browser width? Or what if the browser width on a landscape (particularly portrait) falls below 650px? What then?"

 

(By the way, the 650px is just a figure I originally assigned to try and cater for mobiles - open to suggestions if people think this should be a higher or lower figure)

 

I then try looking at using max-device-width instead of max-width, however I'm still left wondering whether this is a viable solution, given how the sizes between the largest mobile and smallest tablet have become increasingly blurred over the last 12-24 months.

 

I've also thought about targeting using max-height or max-device-height instead, but this still leaves me in doubt.

 

A lot of the articles on the web appear to be increasingly outdated, and do not address what media query rules in 2013 we should be using to effectively and exclusively target mobiles.

 

I'd be interested to know how anyone who is familiar with media queries and building mobile/responsive websites approach such an issue. How do you target mobiles exclusively when constructing your CSS?

Ah, media queries I tend to change my media queries up a bit depending on the project. My current method is designing mobile first. I'm a bit stuck in my ways from designing for desktop first, so I make a few more errors as I'm looking at the wrong screen(!), but on that basis, I tend to adjust my media queries from the base of 320px until the content itself 'breaks'.

 

A few times I've opted for adaptive as well as responsive and targeted the Apple devices more so, but as there are so many devices out there, you can't predict what's coming next.

 

For the project I'm working on now (and no doubt I'll soon find out if it doesn't work), I've used just two media queries. My base is designed around 320px and from there min-width 481px and min-width 768px. I have iPhones and iPads so I principally design for those and test with a Blackberry, Galaxy, Sony Expedia? and a Motorola Razr. From there I test with a Kindle and iPads and then whoever I can persuade to test out on their device. It's not necessarily the best method at the moment.

 

I found the Kindle caused me more problems due to it's resolution. Due to the media queries I targeted before, the sites I baked did not translate well with the Kindle at all. The project before this one has and additional media query of 598px I think as that worked for that site, but what with the iPad Mini and the amount of new mobiles out there, targeting for specific devices is increasingly difficult. Regarding max-height etc, I couldn't comment. I'm not sure which post it was but Wickham replied to a post yesterday I believe regarding the height property that might be worth reading.

 

I don't think what I have said may be that helpful to you, but what I would suggest is check out Andy Clarke's 320up. I'm not suggesting using the framework, but he has a lot of proven theories that work with designing for mobile that I have tried to include in my design. It might work for you, it might not. His website, unless you are already familiar with, it www.stuffandnonsense.co.uk

Ha, yes I'm forever changing my mind on media queries per project. I have come across the concept of designing for mobiles first. It's interesting as a lot of our clients are still getting to grips with thinking about mobile/tablet optimisation, and some are more enthused than others to get on board with it. It's been quite a learning curve for us as well. I think our designers can understand and see the benefits of designing for mobile upwards - but I'm not sure how soon (if ever) they'll take that step. Watch this space I guess.

 

Interesting you mentioned the Kindle causes you some headaches. Do you find a lot more people are browsing your websites via Kindle? We find it's mainly the iPad in terms of tablets.

 

Is there any need for using the min-width rule when it's as a small as 481px? Surely once you get to CSS for a mobile then the minimum width might as well be left out? If a smaller mobile came out that was below 481px then you wouldn't want the mobile CSS to not kick in, surely?

I haven't done any research on how many people use the kindle for surfing the net but realise that so many people have them. Personally I don't use them, but we have one in our household so I tend to double check that for results. I prefer my sites on the iPad but I have no control over what devices people use and other than analytics, I can't necessarily predict what they'll use. It would be great if we could design to a fixed (ish) resolution but that would take the fun out design, right?

 

The 481px media query for the site was set as I didn't like how it was being displayed in the iPhone's landscape mode. In hindsight, I may have to go back and redo the queries in the future, but as this site is my own and I don't anticipate the design to remain the same for a long period of time (designing for yourself is the worst!), I don't see that as an issue. With regards to clients, well, that's a different story altogether...

 

My ideals of mobile and desktop is that the content remains the same on each. I don't like the idea of mobile users having a watered down version of a site. Obviously that causes a lot of work and optimisation if the site is image or video heavy, but if the client has asked for it, I aim to provide it. If you start at the mobile, you have a base (such as typography) that doesn't need to change and you can add white space (if it applies to the design) as the screen expands. Each project is different of course and I wouldn't have the attitude of one rule applies to all. It's like teething all over again

Ok great, sounds like we share a lot of similar views/approaches to the topic, which is reassuring to say the least! It's tricky basing websites on a model which changes so frequently. I say often to clients that I regularly find myself having to relearn and adapt to how I work. Glad I'm not the only one!

 

Cheers for your time and your insights, they are very helpful.

I'm currently working on my first responsive design so I'm not too knowledgeable in this area but I thought I'd share this link which I found useful: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/. It's what it says in the URL - media queries for standard devices.

 

Lyndsey.

I'm currently working on my first responsive design so I'm not too knowledgeable in this area but I thought I'd share this link which I found useful: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/. It's what it says in the URL - media queries for standard devices.

 

Lyndsey.

 

Yes, these are good guidelines to work with. I think the desktop ones probably need adjusting now as the average user's desktop size has increased a bit since 2010 (oh, technology how I love thee...).

 

Good luck with the responsive design. It sure beats the old days of tables and AOL 'whatever-the-software-was-called'!

Yes, these are good guidelines to work with. I think the desktop ones probably need adjusting now as the average user's desktop size has increased a bit since 2010 (oh, technology how I love thee...).

 

Good luck with the responsive design. It sure beats the old days of tables and AOL 'whatever-the-software-was-called'!

 

That's true. Luckily I haven't yet gotten to desktop size as I have adopted your method - mobile first. A few people had recommended mobile first design so I just dived straight in to that

 

Thanks, it's been fun to say the least, but please don't mention the dreaded 'T' word

I don't see much value in designing responsive for specific devices, because the requirements change with every model and it's not very future proof. I tend to start with mobile and scale up, altering the look and feel using media queries when the design starts to 'break' or becomes too affected by the browser size. Don't assume the market share of those devices on the CSS tricks article will be high in the future, it will mean that you have to keep adding and changing media queries when new devices are out, which is not ideal.

I'm currently working on my first responsive design so I'm not too knowledgeable in this area but I thought I'd share this link which I found useful: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/. It's what it says in the URL - media queries for standard devices.

 

Lyndsey.

 

Hi Lucy. The article written by CSS Tricks (which you linked to) is the best media query guide I've found on the web to date, however even this one hasn't been updated since 2010, and a lot has changed since then. Hopefully CSS Tricks update it at some stage soon!

Edited February 28, 201313 yr by C A R

I don't see much value in designing responsive for specific devices, because the requirements change with every model and it's not very future proof. I tend to start with mobile and scale up, altering the look and feel using media queries when the design starts to 'break' or becomes too affected by the browser size. Don't assume the market share of those devices on the CSS tricks article will be high in the future, it will mean that you have to keep adding and changing media queries when new devices are out, which is not ideal.

 

Agree 100%, however the reality and tricky situation I've found myself in is that writing CSS to make a website fully responsive, as opposed to just for a mobile device does take longer. As a result, we have to quote more, and some clients tend to stumble on the extra costs for making a site fully responsive, as opposed to just for mobiles and smaller devices. I wish they did opt for and see the benefits of their website being fully responsive, as this would certainly future-proof things for them, but unfortunately a number of clients (mine anyway) still request just "mobile only" optimisation. I'm sure this request will increasingly filter out over time, as clients realise more and more the importance of optimising for every potential screen/device size through responsive web design.

Absolutely, it's a tricky situation, especially when the site was designed with fixed width in mind. I'm trying to avoid building fixed width for the time being, especially with my personal projects as a way of getting better at responsive design and progressive enhancement. Hopefully by doing this I will be more knowledgeable and able to build sites that bit faster with the reassurance ive done it before (in theory anyway).

Yeah, I tend to set my media queries when the site 'breaks', so usually end with 4-7 media queries which can get a tad confusing but is manageable. Though it is futureproof, I have often made a site work at a certain screen size on a computer then had the site appear different on a smaller device with the same viewport width.

 

Also I design desktop first. Yes mobile browsing is massively on the rise, but the majority of people still access sites on a laptop or desktop. I have read a fair bit about mobile first and whilst the concept is a good one, it is too soon to be considering the needs of a mobile user to be above the needs of a laptop user in my opinion. The last two sites I've done I prefer on a mobile anyway, and they were design desktop first.

That's interesting to note, jpwd. I don't necessarily advocate one way or another and have only recently switched to mobile-first. If desktop first works for you and you are happy with the results on mobile, I have no argument

Ditto, on the above. I just shrink my browser window and adjust accordingly then I bother everyone I know and ask them to look at the site on the actual devices. I can't quite get used to the idea of mobile first as I would likely come up with a pretty boring desktop version. I do think its important not to restrict content for mobile users though. There are a couple of plug-ins for both chrome and firefox that resize you browser and suggest various device sizes.

Ditto, on the above. I just shrink my browser window and adjust accordingly then I bother everyone I know and ask them to look at the site on the actual devices. I can't quite get used to the idea of mobile first as I would likely come up with a pretty boring desktop version. I do think its important not to restrict content for mobile users though. There are a couple of plug-ins for both chrome and firefox that resize you browser and suggest various device sizes.

 

Hi Mantis, yeh same I just shrink the browser and then once I think it's about 95% there, I double check everything on various mobiles and see if there is anything that's gone unnoticed.

 

Also one tip I'd like to pass on when applying media queries for responsive design, is to try and stage your media queries no less than in 50 pixels increments e.g. 950px, 900px, 800px, etc. I've found it gets very messy and confusing if you try and get everything pixel perfect every 10 pixels or so (for example). Try to avoid too many stages of media queries unless it's really necessary.

Edited March 1, 201313 yr by C A R

I personally find this book very helpful https://shop.smashingmagazine.com/responsive-design.html

It is all explained very well.