Skip navigation
Currently Being Moderated

Responsive Design and @media queries

Apr 16, 2012 12:03 PM

I thought my HTML/CSS guns were loaded and good to go; and then I started reading about responsive web design!

 

If I have a rule declared in the main body of my CSS and add a media query what happens to the existing rule?

 

It looks to me with my experimenting so far that if I take a style in the main section and duplicate that with some edits for a smaller width, I have to then remove it from the original and replicate it in another @media query.  Is that correct? 

 

So if I have this:

 

header {

    background: url("images/headerhand.png") no-repeat scroll left top transparent;

    height: 300px;

    margin: 40px auto 0;

    min-height: 300px;

    text-align: left;

    width: 100%;

}

 

I need to put this in a @media query for the below break point:

 

header {

    background: none;

    height: 300px;

    margin: 40px auto 0;

    min-height: 300px;

    text-align: left;

    width: 100%;

}

 

I then take the rule out of the main section of my style sheet and put that in another media query for the above break point.

 

 

So if I have a header element with background image and color, and border-radius and whatever but only want to lose the background image at a certain break point, I then need two @media queries one for below the break point and one for above and then remove the whole rule from the main section of the site?

 

Oh my, that was so complicated, I am not sure I even understand my own question!

 

Martin

 

PS "Mobile First" is starting to make a lot of sense!

 
Replies
  • Currently Being Moderated
    Apr 16, 2012 12:34 PM   in reply to martcol

    Hi Martin

     

    The only rule you require in your media-query is

    header {

        background: none;

    }

     

    As this is the only one that changes, all the other rules will still apply, (css cascade) providing you place the media-query rule, (or the link to the css page) after the 'general' rule.

     

    Hope this helps, as the css cascade can become very 'murky' when one adds media-queries on top of the normal cascade.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 7:31 AM   in reply to martcol

    Hi Martin

     

    David Powers wrote a good introduction to working with media queries that may help to clear-up a few things - http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 7:42 AM   in reply to pziecina

    pziecina wrote:

     

    Hi Martin

     

    David Powers wrote a good introduction to working with media queries that may help to clear-up a few things - http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html

     

    PZ

     

    I seem to remember David writing a different one to that? What happened to that?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 7:47 AM   in reply to osgood_

    osgood_ wrote:

     

     

    I seem to remember David writing a different one to that? What happened to that?

    Hi Os,

     

    You are probably thinking about the one he did for html5 or maybe the one for a mobile page, as both had a section on media-queries.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 8:11 AM   in reply to pziecina

    pziecina wrote:

     

    osgood_ wrote:

     

     

    I seem to remember David writing a different one to that? What happened to that?

    Hi Os,

     

    You are probably thinking about the one he did for html5 or maybe the one for a mobile page, as both had a section on media-queries.

     

    PZ

     

    Most likely...the example site was different. Do you know where the links are to them as I seem to remember I could follow that original tut a bit easier. I guess I'm going to have to start looking into different devices. No one has expressed their site work specifically to cater for those devices as yet though,

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 8:32 AM   in reply to martcol

    martcol wrote:

     

    I was using a code snippet from Chris Coyier which suggests 9 seperate media queries as a default guide. I'm thinking that might be a bit too much for me.  I'd be happy to have the site a) useable on many handheld devices 2) nice on some handheld device and 3) as lovely as I can get it on a desk top!

     

     

    I think the best approach is to target the most popular devices, ipod, ipad, iphone, who give a toss about the rest? Its going to become tedious and expensive.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 9:17 AM   in reply to martcol

    martcol wrote:

     

    osgood_ wrote:

     

    I think the best approach is to target the most popular devices, ipod, ipad, iphone, who give a toss about the rest? Its going to become tedious and expensive.

    Thanks Osgood.

     

    This is the hard part of learning/working in complete isolation with only online shizzle, this forum (and a couple of others) and books to lean on.  It's time consuming to test out ideas and benefit from the pragmatism that comes from other people's experience.  When it comes to making decisions it takes a lot of time to work out for yourself what the right way might be.

     

    Anyway, it's still great fun.

     

    Martin

    Hi Martin

     

    Well it seems you are more advanced than me in this area so when you have it 'nailed down' then let me have the information please

     

    I was reading an article about this very subject that Thierry Koblenz had written the other day, did'nt undertsand a jot of it, lol.

     

    I'm not really sure how you're meant to design for all possibilities. Most times when I get to produce a site there are variations from page to page - columns widths, number of columns etc. The more pages the more work it seems to me. Now this could take us back a few years in terms of design which will become much simpler to adjust or hopefully the kind of clients that I deal with will just ignore mobile devices, which is what I'm hoping will happen. Not sure they will be able to afford the 'refit' anyway - they struggle now to come up with a budget for the main package.

     

    Whatever will be will be.......I might retire.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 10:04 AM   in reply to osgood_

    Hi Martin and Oz

     

    If you wish to learn or even try media-queries and see how they work, then the first thing I would recommend is to download Adobes Shadow program and get the app for the device that goes with it, I have been using it for a few months now and I can honestly say it is much easier to understand media-queries when one can actually see the site working on different devices at the same time.

     

    Also, (I am not giving anything away here, as the feature has already been previewed) when Dw CS6 becomes available download the trial, as the 'Fluid Grids' feature may help you to get started in x-device development, even if you decide not to use it for future development. It is hard to understand how the feature works initially, but I think there will be a number of episodes on Adobe TV, and a few articles on Adobes Dev net to help.

     

    As for the future and x-device design/development, I have a number of clients who now insist that the site works on iPad and Samsungs Galaxy Tab, and one that is seriously considering dropping IE8,(or less) support in favour of redirecting development costs to mobile devices, (one has to have the device(s) to check the site on, for which I add a %age to the development costs).

     

    In my experience so far 'fly-out/drop-down' menus, and 'tooltips' attached to links, are the most troublesome as the link activates before the menu or tooltip, and one has to try and use background images as much as possible so that the mobile device does not have to download larger images than required.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 10:15 AM   in reply to pziecina

    pziecina wrote:

     

    Hi Martin and Oz

     

    If you wish to learn or even try media-queries and see how they work, then the first thing I would recommend is to download Adobes Shadow program and get the app for the device that goes with it, I have been using it for a few months now and I can honestly say it is much easier to understand media-queries when one can actually see the site working on different devices at the same time.

     

    Also, (I am not giving anything away here, as the feature has already been previewed) when Dw CS6 becomes available download the trial, as the 'Fluid Grids' feature may help you to get started in x-device development, even if you decide not to use it for future development. It is hard to understand how the feature works initially, but I think there will be a number of episodes on Adobe TV, and a few articles on Adobes Dev net to help.

     

    As for the future and x-device design/development, I have a number of clients who now insist that the site works on iPad and Samsungs Galaxy Tab, and one that is seriously considering dropping IE8,(or less) support in favour of redirecting development costs to mobile devices, (one has to have the device(s) to check the site on, for which I add a %age to the development costs).

     

    In my experience so far 'fly-out/drop-down' menus, and 'tooltips' attached to links, are the most troublesome as the link activates before the menu or tooltip, and one has to try and use background images as much as possible so that the mobile device does not have to download larger images than required.

     

    PZ

    Thanks for that PZ.

     

    I was looking at Adobe Shadow about an hour ago, first time I've heard of it to be honest. I might look into that when I have less time

     

    I hear what your saying about keeping up with the trends. This is all becoming a bit much for a one person set-up me thinks. These days I'm spending more time being 'unproductive' because I'm learning how to do this and how to do that. Once i've learned it's time to learn something else. I think I need to rethink my aims and concentrate on what I do best and target clients that best suit my skills rather than being 'a jack of all trades'.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 10:21 AM   in reply to osgood_

    osgood_ wrote:

     

    I think I need to rethink my aims and concentrate on what I do best and target clients that best suit my skills rather than being 'a jack of all trades'.

    Hi Os,

     

    In my experience that is the best way to get clients and make money anyway, and lets be honest if we are not doing that, then we may as well say %!# - it.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 10:33 AM   in reply to martcol

    @Martin,

    After reading Thierry's article on Device-Agnostic Approach

    Al Sparber put this responsive design together and I think it makes perfect sense (view source).

    http://www.projectseven.com/csslab/adaptive/percentages.htm

     

     

    Nancy O.

     

     


     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 12:32 AM   in reply to martcol

    martcol wrote:

     

     

    I really like the  site that Al Sparber put up and I am going to study that a bit more.

     

     

    Thats ok IF you like liquid design BUT personally I don't and I don't see many websites taking that approach these days. Obviously its simpler to make the design fit different devices but as I said in one of my previous posts it compromises the design approach in my opinion. It seems we are entering a period where we are now catering to devices again a bit like we did when Netscape Naviagtor 4/IE6  were around and no-one really wants to go back to that tedious and long drawn out workflow.

     

    Besides its difficult enough to get the client to approve content for one 'homepage' let alone 2 or 3 variants of the homepage. I agree with Martin. If you have big enough clients that demand compatibility they will most likely employ a 'workforce' where specialists in the team can deal with the issues this presents I can't see a small hotel or Jennys Chocolate Cookies finding the budget to be honest.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 6:21 AM   in reply to osgood_

    Hi Os

     

    Much of what you say is correct. Responsive design and the mobile web is I would say a none starter for 75% of web sites, because they simply do not require such an approach.

     

    It's like offering the local corner grocery shop a full e-commerce site, with product reviews and all that one expects of such a site, but if they do not intend to offer a delivery and/or an on-line order service, one must ask if the site is actually fulfilling the shop and site user requirements.

     

    One should instead think of mobile and/or desktop versions of a web site, as the one size fits all approach, no matter how well one designs it, rarely fulfils even 75% of the requirements of a good user experience. As an example, (using Jennys Chocolate Cookies) would it not make more sense to design a mobile only web site, complete with geolocation that shows the nearest outlet selling the cookies?

     

    The same may also apply to a restaurants web page, after all it is often the directions to the restaurant, and its proximity to oneself that are important when one is looking for somewhere to go out for a meal, is it not?

     

    As for testing on mobile devices, a good testing set-up now costs less than £400, ($600) and most items one will already own.

    They are -

    1  A smartphone, (most people have one now and a good budget smartphone can be purchased for under £70.00)

    2. A tablet device, (An budget android device now cost about £120.00, and can also be used as an e-reader)

    3. A iPod-Touch (If it works on this it will also work exactly the same on the iPhone)

     

    As for the iPad, use Dw's Multi-Screen preview or resize the browser, as for functionality that has already been covered by the above 3 devices. The real problems come with the iPad3, but until there is some reliable way to actually deliver resolution specific content, the iPad3's specs are overkill and cannot really be designed for without the creation of an iPad3 specific site, and not even the large multi-nationals are considering that.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 7:05 AM   in reply to pziecina

    pziecina wrote:

     

    Hi Os

     

    As an example, (using Jennys Chocolate Cookies) would it not make more sense to design a mobile only web site, complete with geolocation that shows the nearest outlet selling the cookies?

     

    So you are saying forget the desktop monster (assign that to the bin) and convince the client mobile is the way to go? Even if that is the case it still seems that you're going to need two or three different design set ups to satifsy the majority of devices, which means more expense, right? Plus from what I've seen the information all crushed into a 400px wide screen looks a bit shite, no?

     

     

    pziecina wrote:

     

     

    The same may also apply to a restaurants web page, after all it is often the directions to the restaurant, and its proximity to oneself that are important when one is looking for somewhere to go out for a meal, is it not?

     

    Can't see what location or direction has to do with anything or proximity to oneself. I look in yellow pages if I need a restaurant or I identify it on the computer before I go out........but then again I'm old so maybe younger people do all this whilst they are out. So we come down to demographics - cut out whatever section of society at your own peril. I guess a nightclub would be a better example, can't see many 50 plus year olds wanting to know where one of those are on the move.

     

     

    pziecina wrote:

     

     

    As for testing on mobile devices, a good testing set-up now costs less than £400, ($600) and most items one will already own.

    They are -

    1  A smartphone, (most people have one now and a good budget smartphone can be purchased for under £70.00)

    2. A tablet device, (An budget android device now cost about £120.00, and can also be used as an e-reader)

    3. A iPod-Touch (If it works on this it will also work exactly the same on the iPhone)

    Well I guess you have to factor in the cost of getting connected to the net on these mobile devices to check everything. I dunno if anyone in the UK offers a reasonable monthly package whereby you can be connected to all these devices 24/7 and not rack up any additional charge per minute.

     

    I can see myself bailing out quite soon and doing something else, maybe going back to graphic design from where I originally came. It's already very time intensive checking pages in the existing desktop browsers before you can release the pages so this is going to increase the workload by 4x.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 7:10 AM   in reply to osgood_

    osgood_ wrote:

     

    pziecina wrote:

     

    Hi Os

     

    As an example, (using Jennys Chocolate Cookies) would it not make more sense to design a mobile only web site, complete with geolocation that shows the nearest outlet selling the cookies?

     

    So you are saying forget the desktop monster (assign that to the bin) and convince the client mobile is the way to go? Even if that is the case it still seems that you're going to need two or three different design set ups to satifsy the majority of devices, which means more expense, right? Plus from what I've seen the information all crushed into a 400px wide screen looks a bit shite, no?

     

    Reply -

    No I am saying that one should offer the type of site/service that best suits the clients needs, be this a desktop, responsive or mobile only web site, or even telling the client that an advert in yellow pages would be better.

     

    pziecina wrote:

     

     

    The same may also apply to a restaurants web page, after all it is often the directions to the restaurant, and its proximity to oneself that are important when one is looking for somewhere to go out for a meal, is it not?

     

    Can't see what location or direction has to do with anything or proximity to oneself. I look in yellow pages if I need a restaurant or I identify it on the computer before I go out........but then again I'm old so maybe younger people do all this whilst they are out. So we come down to demographics - cut out whatever section of society at your own peril. I guess a nightclub would be a better example, can't see many 50 plus year olds wanting to know where one of those are on the move.

     

    Reply -

    So you are out and about, or driving home and suddenly decide that you would like to go for an Indonesian meal, do you now get the yellow pages out?

    BTW - I am over 60.

     

    pziecina wrote:

     

     

    As for testing on mobile devices, a good testing set-up now costs less than £400, ($600) and most items one will already own.

    They are -

    1  A smartphone, (most people have one now and a good budget smartphone can be purchased for under £70.00)

    2. A tablet device, (An budget android device now cost about £120.00, and can also be used as an e-reader)

    3. A iPod-Touch (If it works on this it will also work exactly the same on the iPhone)

    Well I guess you have to factor in the cost of getting connected to the net on these mobile devices to check everything. I dunno if anyone in the UK offers a reasonable monthly package whereby you can be connected to all these devices 24/7 and not rack up any additional charge per minute.

     

    Reply -

    Use Shadow and your home wifi network, extra cost nothing.

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 7:24 AM   in reply to pziecina

    pziecina wrote:

     

    osgood_ wrote:

     

    So you are saying forget the desktop monster (assign that to the bin) and convince the client mobile is the way to go? Even if that is the case it still seems that you're going to need two or three different design set ups to satifsy the majority of devices, which means more expense, right? Plus from what I've seen the information all crushed into a 400px wide screen looks a bit shite, no?

     

    Reply -

    No I am saying that one should offer the type of site/service that best suits the clients needs, be this a desktop, responsive or mobile only web site, or even telling the client that an advert in yellow pages would be better.

     

     

    Ok, I agree with that approach.

     

     

     

    Can't see what location or direction has to do with anything or proximity to oneself. I look in yellow pages if I need a restaurant or I identify it on the computer before I go out........but then again I'm old so maybe younger people do all this whilst they are out. So we come down to demographics - cut out whatever section of society at your own peril. I guess a nightclub would be a better example, can't see many 50 plus year olds wanting to know where one of those are on the move.

     

    Reply -

    So you are out and about, or driving home and suddenly decide that you would like to go for an Indonesian meal, do you now get the yellow pages out?

    BTW - I am over 60.

     

     

    Never happened to me lol. I can't even send a text message let alone use the internet on the phone. If I was driving home I'd probably already know where a good restaurant was in my area. If I'm hungry I'm not fussy about whether its Indonesian, Chinese or Indian . I guess we have just proved something......people use and choose in different ways. You're an over 60's Techy, that the difference, probably a rare breed.

     

     

     

    Reply -

    Use Shadow and your home wifi network, extra cost nothing.

    I think thats probably going to be the best option otherwise you don't know what bills youre racking up which all have to be passed onto the client of course.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 5:41 PM   in reply to martcol

    The one thing I see people overlooking in this debate (not only here) is that reproducing a "full size" site onto a mobile device is a waste of time. An example from the UK is the Argos site. Try and view that on a phone - its a nightmare and not unexpecedly so. Same with Play .com and anything similar.

     

    The approach has to be to produce a cut down version of the site that fits in one column and can be read easily without constant pinching. It shouldn't contain large background images because they will create problems with download speed and , unless you are connected to your home wi-fi system, bandwidth. I've seen some recommendations to use display: none in the css but whilst that hides a graphic from view it doesn't stop it being downloaded.

     

    Using the restaurant example you could get away with displaying the menu with prices,  the location, directions, reservation procedure and take away ordering options.

     

    Yes, you would want to put some enticing text in and around the facts but basically its painless functionality that you want to provide results.

     

    There will be instances where 2 columns would be viewable on a tablet but again the text needs to be large enough to be read without viewers having to keep manipulating text size.

     

    My summary is :-

     

    Phones. Be prepared to create a completely different version of a site.

     

    Tablets. Pay attention to readability and images and you could get away with modifyying a desktop site.

     

    Either way, additional work is required.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2012 12:55 AM   in reply to gbotour

    gbotour wrote:

     

     

    My summary is :-

     

    Phones. Be prepared to create a completely different version of a site.

     

    That's my view too if I look into this deeper. I don't think media queries by themselves are enough and to be quite frank the design will need to change so radically to fit a smartphone UNLESS its the simplest of sites that there is much less confusion just starting over.

     

    And then what happens to CMS's (Content Management Systems) I mean the client will have 3 or 4 versions to update, no?

     

    Take an 'embedded' image which is say 980px wide for a standard desktop device. That's no good on a smart phone or ipod etc. So how do you navigate that one without producing a completely different site and sending the end user to it/them based on 'sniffing' out the device which is being used?

     

    Ok you can use manually scaled down background images in the media query css BUT that isn't going to be any use to a client who wants to update the site via a CMS. Plus if its a slideshow then its not possible to use background images anyway.

     

    Any views on the above?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2012 3:31 AM   in reply to osgood_

    Hi

     

    I did say in one of my posts that mobile sites should be an and/or decision and that a one site fits all does not work successfully in my opinion.

     

    But to go a little further, using media queries can be, (probably should be 'is') a potential minefield for disasters, especially when one gets down to the smartphone. As an example the Safari iOS browser, (the one used on iPad/Phone/Pod will download all and every image it finds referenced in ALL css media queries if not done as separate files, and not just the one that applies to its css. So if you use a background image of 250Kb, (a little excessive but!) for the desktop and one of 50Kb for smartphones the 250Kb image will still be downloaded but not used.

     

    The above bug for the iOS browser may have been fixed by now, but I do know it was still happening on version 4 of the browser, (we are now on version 5). But it does illustrate the kind of problems one can encounter, and trying to find bugs, (and fixes/work-arounds) on smartphone browsers is much harder than for the desktop browsers.

     

    CMS's and slideshows are also a problem Os, slideshows because one cannot reliably scale them to fit, without making them unusable, (this also applys to Edge animations, or slideshows created using Edge). As for CMS's, yes one can just use the data from 1 version, by limiting the content read from the database and displayed, forget using Wordpress or similar as an install and forget CMS though, and I would personally say forget them anyway .

     

    No one ever promised that web design was going to remain a static profession forever, just because it had for almost the last 9 years.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2012 4:28 AM   in reply to pziecina

    Thanks for the response PZ.

     

    WOW looks like this is going to be a can of worms for a while as all these ifs and buts, dos and donts are emerging.

     

    The more I thought about this over the last  few hours the more all sorts of nasties kept coming out

     

    I'll just wait and see what happens, as I say so far not one of my clients has even mentioned any mobile device. This looks like its going to be initially the preserve of the well lubricated financially and bigger clients. I can understand news/sports intensive websites most likely have the need to go down this route quickly but I think as you said in one of your post 75% most likely have no real need for this UNLESS the desktop suddenly disappears completely. The tablet is most likely the conerning device rather than the smart phone as this has a bigger screen which could replace the desktop whereas the smartphone is more viewed as a convinience rather than a tool that you would choose to surf the web on.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2012 5:40 PM   in reply to martcol

    "the smartphone is more viewed as a convinience rather than a tool that you would choose to surf the web on"

     

    I think you'll find that applies to only a segment of the potential market. There are plenty of younger people who would say "losing my phone would be like losing my right arm". One of my sons aged 31 can't afford a tablet so he uses his phone on the internet to a large degree and he finds it especially useful whilst out and about. He's so used to using it that he can find stuff quicker on his phone than I can on a desltop.There are many more like him. Additionally many more businesses use tablets and phones as an essential part of their day to day work so that employees get used to working with those devices and carry on with that culture outside office hours.

     

    As you say there are probably many businesses that don't want anything other than a desktop version of a site (heck, a lot of businesses don't even need one of those anyway) but that leaves plenty that will want the additional options of allowing customers to surf their site "on the go". Only your own future experience will tell you which way to go. Refuse to get into phones and tablets and see how much business passes you by. If the answer is none then you've lost nothing. There's a  balance to be found between the cost of learning against the business need. It will be different for all of us.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 12:52 AM   in reply to gbotour

    gbotour wrote:

     

     

    As you say there are probably many businesses that don't want anything other than a desktop version of a site (heck, a lot of businesses don't even need one of those anyway) but that leaves plenty that will want the additional options of allowing customers to surf their site "on the go". Only your own future experience will tell you which way to go. Refuse to get into phones and tablets and see how much business passes you by. If the answer is none then you've lost nothing. There's a  balance to be found between the cost of learning against the business need. It will be different for all of us.

     

    I totally accept that and agree. Even if its something that you 'think' you may not require you should at least investigate the solutions.

     

    The problems faced are as has been already stated in this thread, numerous and enormous. Yes you can isolate the design, which seems a good idea and a simpler solution to me, (just as some created seperate sites when IE was a real PITA way back when and you 'sniffed' out what browser the end user was viewing the site in) You still have the issue of updating both version though, how does a CMS integrate with both or do you create independent CMS as well etc etc.

     

    If this was the year 2000 when the web was basically very text orientated and most were on 56k dial up then it would be less of an issue to create variable designs. Show me a website these days which doesn't use some kind of 'intensive' slideshow, revolving images, dynamic content, etc etc. Are media queries really up to that? I don't know because its quite a new technique. The example tutorials as put up by David Powers shows a very very basic static site which most likely uses css background images to achieve the desired design results across all devices. This is ok IF you are soley in control of the website but CMS's are big these days and that isn't going to work. So we are heading back to either the client not being able to update their own site OR creating 2 or 3 sites for them to manage.

     

    I still don't accept the argument that people, young or old, would prefer to view on a limited size screen if a large screen was available. That's like saying I prefer my 6 inch portable TV rather than my 42 inch TV screen. The viewing experience just isn't as good. That's why I said it was 'convenient'

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 7:05 AM   in reply to osgood_

    I've been doing some digging around today and although media queries seem simple enough to handle they come with their downsides as has been mentioned already by PZ. Obviously one site really does NOT fit all. Images for the desktop site in my opinion would be too download intensive for mobile devices and they can't be interchanged easily, only scaled. I also couldn't really see myself creating half a dozen different media queries for every page in a 100 page site, it would be a nightmare to manage, background images seem to pose an issue as well, without jumping through hoops, Might be OK for small sites, probably is.

     

    Media queries look too cumbersome for my tastes. My view so far is to create a stand alone, simple cut-down website specifically for mobile devices and sniff out the screen width.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 9:25 AM   in reply to osgood_

    osgood_ wrote:

     

    Media queries look too cumbersome for my tastes. My view so far is to create a stand alone, simple cut-down website specifically for mobile devices and sniff out the screen width.

    Hi Os

     

    I would not recommend this approach either, what happens if your mobile users does want to view the main site?

    You may say there is no reason, but if you are offering e-comm purchases then many payment processors do not allow purchases via mobiles without a special app. Yes, one can still purchase from them but currently the legal situation for who is responsible for 'hacked' user payment is still unclear, (and most users do not like to purchase via a mobile anyway) so if they wish to email themselves the desktop sites web address for purchase later, denying them the chance to do so is not a good idea.

     

    I have not yet found a solution that I can recommend for every site, as even inserting a link to the 'other' type of site, and then hiding it via css, (using a media query to detect the screen size) does not work successfully, as guess what shows up on the search engines, (your hidden link).

     

    The above is also an example of the problem with responsive designs and hiding the content for the smartphone, as the full content will still show if the mobile users does do a search, and it may even be that the text one has hidden to mobile users is what they wish to read. Even the mobile first strategy is not always a good idea, as if one does this, one has then the problem of what to leave in or out of the content.

     

    The problems can be compared to deciding if one should or should not support IE6, as guess which browser Google users to show the page preview, (yes, it's IE6) so if the page does look broken in IE6 it will also look broken on Googles preview of the page.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 10:06 AM   in reply to pziecina

    pziecina wrote:

     

    osgood_ wrote:

     

    Media queries look too cumbersome for my tastes. My view so far is to create a stand alone, simple cut-down website specifically for mobile devices and sniff out the screen width.

    Hi Os

     

    I would not recommend this approach either, what happens if your mobile users does want to view the main site?

     

    Send them back to index_2.html from the mobile site or there are php scripts which navigate that issue.

     

    It's not ideal but after evaluating a lot of things today I think its the simplest process and one which requires less complex maintenance.

     

    All mobile devices can then get a fluid design for screen widths of say equal or less than 699px.

     

    Job done!

     

    P.S. either way you look at it. Once you start going into the workings in more depth both methods have their pitfalls. Not that I'll be using any of them for the time being. I'm just thinking ahead for when this takes off. Perhaps by that time things will iron themselves out a lot more.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points