0

What i'm going to query here is close to a question but i really hope that it can help many other people with a similar question.

I've been looking for some resources online for best responsive design but it's difficult to get a strong defining answer so it might be nice to receive different peoples methods and opinions.

I've been using media queriers a lot for the responsive design as well as Bootstraps grid system which helps making things responsive.

Now sometimes i've found that allowing the grid to control your elements responsively isn't effective for mobile devices in fact sometimes i feel that the content requires an entirely different approach which is where i end up doing something like this:

@media (max-width: 991px) {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
}
@media (min-width: 992px) {
    .desktop {
        display: block;
    }
    .mobile {
        display: none;
    }
}

With some HTML to go with it like this:

<div class="desktop">
     ... approach 1 displays only on desktop ...
</div>
<div class="mobile">
     ... approach 2 displays only on mobile ...
</div>

I don't know if this is a good way to do it when the designs require different layouts or styles for a mobile design especially with sometimes with backgrounds and breaking out of the grid that you can't simply break to columns to stack because of some of the web content in the background.

I know you can also do things such as m.domainname.com for mobile sites but to me this feels like moving to an extreme level especially when most of the site works responsively but some sections don't. What ways are significant for doing this? especially when you are working within a grid.

mdixon18
  • 1,199
  • 4
  • 14
  • 35
  • try read this: http://stackoverflow.com/a/16985056/3448527 and this: http://stackoverflow.com/a/8429850/3448527, hope it helps – dippas Oct 02 '14 at 01:01
  • Check out bootstrap it's a powerfull framework it adpats your website for all kind of screen size ----->> [Bootstrap](http://getbootstrap.com) – Ahmad Oct 02 '14 at 01:02
  • I'm using bootstrap but sometimes having say 2 columns and moving them to sit one on top of the over doesn't work especially if you have a full width background image of some kind in which case you need to redo the code for the mobile content i'm more curious how to do that... – mdixon18 Oct 02 '14 at 01:04
  • So I need to repeat the code and hide the desktop version and show the mobile version but surely the way i've shown above isn't best practice so there must be another way. Imagine having a slider in the desktop version but the mobile one is completely different and requires more elements for example you need the mobile one to show when the screen size is right (media queries) and the desktop when its fitting for desktops but surely just saying one is display none on desktop and the other on mobile is a bad idea? – mdixon18 Oct 02 '14 at 01:08
  • You are probably doing it wrong. I found that when I started with grid systems I found them difficult to use in some circumstances because I was used to manipulating the elements myself. You would be better off to try and find ways to do what your trying to do without fighting the framework. – OneHoopyFrood Oct 02 '14 at 01:08
  • Then the mobile content can't be different.. what if the design requires something different in a section specifically for mobile or vice-versa? – mdixon18 Oct 02 '14 at 01:09
  • 1
    If your mobile version requires a different interface entirely then you would likely be better off not going responsive and instead serving a separate mobile site. Responsive is a great technique, but it doesn't fit all situations. – OneHoopyFrood Oct 02 '14 at 01:10
  • That's what i'm trying to target but say only one section is different or maybe 2 that a whole new site isn't necessary? – mdixon18 Oct 02 '14 at 01:11
  • I create one site and use php mobile detect to serve up different html and/or scripts when the need arises. And what do you mean by "mobile" viewport sizes vary greatly on touch devices and are just as large as desktop devices. – Christina Oct 02 '14 at 04:51
  • Yes, it's a bad idea to display none on images for smaller viewports since the phone or smaller tablet will still get hit with it. Look up adaptive web design rather than just responsive, both can be combined. Responsive should be combined with fluid and when the html needs to be different, use server side – Christina Oct 02 '14 at 04:53

0 Answers0