Mobile vs Responsiveness

  • Hi,

    I have been trying to get a more conclusive answer on what would be the best option for our mobile side of our site. Currently we have a responsive website but because I did some editing to the css for the desktop version, the responsiveness is absolutely all over the place as far as things lining up correctly. We aren’t even sure we want a responsive website, we want something for like a sports website, for example if you go to any major sports teams website on an iphone, you are respented with a completely different side (which is more mobile, application themed). How do I go about getting my site took like this? I’ve used Duda Mobile before but they seem to be very static, we are trying to only update content in one spot but have a theme template like a sports team, application style.

    My site is dev.ussailing.org and if anyone has any opinions on how to make this work on a mobile device that would be great. So basically we want a mobile site but we don’t think that responsive look is what we want. We believe mobile should be different as far as how they receive the information (something on a desktop might not be what they want on a mobile on the first screen). I’ve also seen some of the free themes that support mobile but not exactly what I’m looking for….

Viewing 4 replies - 1 through 4 (of 4 total)

  • Welcome to the wonderfully complicated world of responsive design!

    There are many different ways you can attack the mobile/desktop issue. Some people do use JavaScript/browser detection to serve different content on their mobile readers. The problem with this is that you have to detect what type of browser your visitors are using and then decide which content/layout to serve them.

    The fashion – at least with the smaller sites – is to make a responsive design.

    Im a firm believer in always serving the same content to a visitor no matter what device they visit on. Now by same content I basically mean same text/menu/page structure. Things like images/videos/eye candy can be switched off using CSS media queries and even JavaScript.

    Your site looks great on desktop and there is not that much wrong with it on mobile that a few css media queries wouldnt solve.

    For instance your columns are always set to 48% wide, if I was you I would write a media query into the end of your css that makes them 100% wide with a screen smaller than 400px.

    There are other things that can be quickly fixed on there as well such as the logo size/position on mobile.

    Hope at least some of that made sense!

    Thread Starter ussailing

    (@ussailing)

    Right but the first 2 modules are actually one so if I were to set that to 100% the one on the right would fall off.(Recent News). I just tried doing it and it did not work.

    If you give both “featured article” and “recent news” a width of 100% they will fill their container. You may also need to add float:left to each so they stack on top of each other inside their parent.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If you develop a theme in future you’ll have a much easier time if you build the site mobile-first and use media queries to target larger devices (rather than the other way around).

    What I’ve been told to do is to check where content and experience of the user is compromised and then target that point. That point could be at an iPad landscape size, or a laptop screen size with a small height and standard width. You still provide support for different devices, but this way you focus on the most important things, content and user experience.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile vs Responsiveness’ is closed to new replies.