Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.

This may seem like an odd question. However, more and more I am seeing web applications that are built on the "mobile first" / "responsive design" principle that are about as responsive as a wasp in winter.

Mobile isn't a "trend" but it's being treated like that. It's "trendy" and "eye-catching" for digital agencies to be "mobile first", but for most that only means one or more of the below:

  • @media queries
  • Jquery mobile
  • Twitter bootstrap

I've recently seen a site which was billed as "mobile first" which only used @media to differentiate between devices. It was a .NET webforms application that heavily relied upon view state and the download size for just the homepage (pre postbacks) was over 1mb! Responsive? Not on my crappy Samsung in the middle of a field.

I know that this just sounds like a rant, but I'd really just like to know what peoples opinions are on how to tackle device differentiation?

Personally, I show / hide markup (ie sections of a page / includes) based on device to ensure, not only the layout and functionality are optimized, but the download total too. Am I a dinosaur?? Am I wasting my time??

share|improve this question

closed as not constructive by gnat, Blrfl, GlenH7, Kilian Foth, Jim G. Mar 20 '13 at 13:30

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. If this question can be reworded to fit the rules in the help center, please edit the question.

Am I a dinosaur?? Am I wasting my time?? No. You're doing it right. –  НЛО Mar 20 '13 at 10:06
Thanks dude.. :) –  LiverpoolsNumber9 Mar 20 '13 at 10:07

3 Answers 3

I think that "responsive" is just a buzzword being thrown around at the moment. I was in a meeting the other week where people who really didn't have much of an idea about web design were talking about parallax scrolling and responsive design.

With that said, Responsive design is very important when someone is not designing a specific mobile interface. There is nothing worse than coming across a site that is not mobile optimised or removes the majority of features.

In terms of tackling devices, I generally have my designer make all websites touch friendly - you can't not these days. This means making all elements finger friendly. Two designs will be produced, generally one with a width of 1024px, and one for mobiles that uses percentages to support varying screen resolutions. With that said, we do do some responsive stuff but it's just another tool to getting the job done; it doesn't work well for some types of sites.

share|improve this answer
I agree with your comment "There is nothing worse than coming across a site that is not mobile optimised" - to be fair, at least sorting the layout out for mobile should be done at a minimum. But yes, "responsive" is most definitely becoming a buzzword!! Touch friendly is v.important too, yes. UX is king, especially in certain, highly saturated markets. –  LiverpoolsNumber9 Mar 20 '13 at 10:16

One thing that is changing quite rapidly in the field of web development is the breadth of devices you're aiming a site towards.

Back in the day you'd be fine with a fixed width design (say, 1024x768) that worked in IE, and maybe in Firefox.

Then, smartphones started getting more and more capable of being a primary browsing device for many users this has changed, and you were looking at two designs, one for mobile, one for desktop. (many sites used, and still use, the m. or mobile. subdomain to host mobile-specific sites, and for a time this was perfectly acceptable)

More recently, tablets became fairly common devices, and smartphones are being an even greater percentage share of the devices used for web browsing. This means two things; one is that we have at least one more layout to design (tablet, which is basically a mobile-style site with a browser-sized layout), the other is that users are expecting more and more functionality out of their mobile browsing experience.

Mobile-first is a design paradigm that allows designers to concentrate on the key UI and UX areas of a site for the mobile device, then add secondary functionality or design elements for the desktop site. This is basically a form of progressive enhancement where the desktop site is treated as the mobile site + 1.

Responsive design takes this switch to mobile-first even further. It allows the designer to have multiple designs, each with the same (or very similar) functionality, and adjust them to the size, and possibly input-method, of a wide range of devices without having to consider each possible size separately. This saves huge amounts of work from an implementation standpoint, but still lets the designer take advantage of the different purposes and sizes of devices to display information and functionality in the optimal way for each device.

Put simply, the changing face of the browsing market is why Responsive Design is gaining so much traction, and being talked about so much. And, like Agile, MVC, or any other "trendy" tech, we all know that the popular approaches and technologies tend to attract a large amount of wannabes and marketing nonsense. I'd also point out that neither mobile-first nor responsive design have a primary aim of increasing site speed, they're focused around increasing user experience on non-desktop devices, and speed is only a part of that.

I'd say that any highly-skilled, enthusiastic, designer is going to be looking to add Responsive Design to their portfolio of skills, in the same way that any responsible designer has already conquered Photoshop and CSS. Responsive Design is very much becoming less of a "badge" and more of a "must-have".

As for how to go about doing mobile optimisation? That's a big bag of tricks, but you're right about minimising the payload. Cut out as much HTML, JS, and CSS as you can for your mobile device version, and bring in additional content as needed for the devices on a proper net connection. At the end of the day, front-end optimisation is only one part of site optimisation; if your site is very slow to load in the first place, or badly written (such as in your ViewState example) you're not going to get very far with your optimisation by focusing on the HTML payload!

share|improve this answer
Great answer. The only issue I have is with "neither mobile-first nor responsive design are aimed for increasing site speed" - they should be. Other than that, great stuff, and thanks for taking the time to answer. –  LiverpoolsNumber9 Mar 20 '13 at 13:06
@LiverpoolsNumber9 I think my point was written a little unclearly, I'll do an edit, totally agreed that (in retrospect) that gives the wrong impression! –  Ed Woodcock Mar 20 '13 at 13:22
I shouldn't worry too much - the pedants have killed yet another decent post with decent information... –  LiverpoolsNumber9 Mar 20 '13 at 14:27
@LiverpoolsNumber9 Happens alot; to be honest I'd consider the OP slightly off topic (ranty!) but salvageable, however, I'm not a mod so I'll leave it at that. –  Ed Woodcock Mar 20 '13 at 14:45
I'm lost if I'm honest mate. I know Stack Overflow is about pure "help" but I thought this site was a little more relaxed. Never mind. –  LiverpoolsNumber9 Mar 20 '13 at 15:30

Has it become a bit of a buzzword? Yes.

Are the principles of responsive design important? Absolutely.

Do some developers do it badly? Yes.

Do all manager/sales types understand it fully? No, but if they think they can sell something more because of a certain reason (availability on multiple devices) they'll say it, even if they don't understand it and expect their devs to know how to do it right in the timeframe they have sold.

share|improve this answer

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