3

Apparently there are two ways you can do responsive web design. I'm not sure how to call the two methods but let's just say they are frontend and backend:

  • By frontend I mean, the usual way where the layout resizes as you resize your browser (e.g., Twitter bootstrap, Foundation, etc.).

  • By backend I mean, loading a mobile version or desktop version on the top level domain. This is similar to having m.example.com and example.com except your scripts loads the mobile or desktop version only at example.com (no need for m.example.com).

Personally, I find the frontend way a little to "hackish" and it involves a lot of thinking/testing to achieve desired result, it also makes file size larger per visitor. While the backend way appears straight forward and easier, less file size per visitor.

I am leaning towards the backend way. But, it seems the frontend way (Twitter Bootstrap, Foundation, etc) is all over the place. Is there any problem with the backend way because it appears to be a less popular choice?

3
  • As far I I know "Responsive web design" refers only to using front end technologies to make a web site work with different screen sizes: en.wikipedia.org/wiki/Responsive_web_design Serving different HTML to different browsers based on user agent is a valid approach, but it is not "responsive". Sep 10, 2013 at 10:54
  • @StephenOstermiller What do you call the latter approach?
    – IMB
    Sep 10, 2013 at 13:22
  • I would call it "browser sniffing" or "user-agent sniffing". Here is a question on programmers stack exchange that compares it to responsive: programmers.stackexchange.com/questions/199228/… Sep 10, 2013 at 14:32

3 Answers 3

2

Summary: Go with responsive web design (what you call frontend).

When you go with the "backend" version, you have the following disadvantages:

  1. You have to create two websites: one for desktop and one for mobile. Or you have to create a smart custom solution that outputs the same content to the two different websites automatically. Not easy.

  2. You have to find a reliable way of telling if your visitor is using a mobile or a desktop browser. This is hard and hackish and not reliable (at least so far).

  3. You not only need to cater for desktop and mobile, you have tablets and larger and smaller tablets and mobiles, you now need to create multiple websites and not only 2. Also, the list of device screen sizes is growing everyday.

When you go with responsive web design, you avoid all the above, and you also get to work on solid frameworks and the latest technologies and you'll also find a lot of ways to fix any problems you encounter. Also, newer browser versions are implementing new features that will make responsive web design easier and more robust.

Good luck.

Cheers.

2

Go for frontend

Use a responsive framework, like twitter bootstrap or similars, create only 1 website for all.

Then use media queries to switch css rules where you need if for mobile or not.

And defintly switch all you want to show or not in mobile and desktop by server side.

For example a huge banner on mobile is useless, switch that using html modules and server side conditions, ana example could be:

<?php if(isNotMobile()){ ?>
$this->loadModuleBanner(); //this loads html module
<?php } ?>

So the more you're good on making modules the more your site code is easy to read, mantain, scale

Using 2 different website will get you crazy if you have not 2 developers teams 1 for mobile/pads and 1 for desktop

1

Think about it this way: no matter what your screen size or device, your content is the same plus minus a few items that are may not be relevant on certain device types.

This is analogous to having content on a screen and printing out that content. You can use separate style sheets for screen and print media. You don't make a separate website just for print views.

Similarly, a different screen size doesn't need a separate back end.

If you were using MVC architecture, all your changes would be needed only at the V (view)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.