2

Most people see the pros of responsive design being one codebase with a variable visual layer via CSS media queries, and the pros of an adaptive, mobile specific site being able to use a mobile framework from the start allowing for some device-specific functionality and overall just being a more lean solution.

BUT... If I'm designing a site and have the key components of a responsive design (flexible grids/images, media queries with break points), is there any reason to not have a case when I hit a mobile-friendly resolution where I completely change the UI and even then use a mobile framework like mobify.js? Understanding the implications of loading multiple frameworks for all users, couldn't I just hide the full mobile functionality the same way I'd hide a div using CSS?

Is there a solid reason for or against this solution?

Improve this question
1

2 Answers 2

Reset to default
2

Responsive design is meant to be device agnostic, meaning that when your fridge get's a touchscreen with an internet connection it should support that as well. You are talking more about an adaptive design where you know what devices your users have and you have decided it would be more beneficial to support specific devices, instead of supporting all devices.

Mobile first is, at this point, synonymous with responsive design. And a big reason why people choose to do mobile first is because it saves them time compared to building out a separate mobile app (along with other benefits).

Unless you have a really compelling reason to do a full mobile solution or you want to make a mobile app for the fun of it, then the reasons are many not to do a 'full mobile solution' and instead stick with responsive design.

Improve this answer
0

I think the main argument against a plan like yours would be that there's no perfect way to detect the kind of device you're serving. Sure you can detect screen pixel size, but I don't think you can determine physical size (I did some experimenting with this in the last year and tried various ways to find pixel size with JavaScript and it was never very accurate).

So I'm claiming you cannot know the physical size (inches or millimeters) of the screen, you can only guess at it, and given that you can end up serving large-screen content to a small high-res screen. If that's a potential problem, as it is to most web designers, a semi-solution is to enable manually switching between the 2 site formats. Being able to switch from the small format to the large format and vice-versa solves some problems but introduces others. The issues surrounding "separate mobile site" solution are well discussed around the web so I'm not going to get into that here.

Improve this answer
4
  • You can detect dpi using the "resolution" media query, but this is an HTML5 query that may not be supported on older devices.
    – Brian
    Feb 6, 2013 at 18:22
  • Thanks for the response. Understood that finding exact resolution is difficult, but the real question is more about what I can do with media queries once I hit that breakpoint. Can I essentially swap entire layers of functionality at a 480w breakpoint? Why/why not, etc.
    – Hoops Martin Jr.
    Feb 6, 2013 at 18:58
  • @HoopsMartinJr - You can swap content at 480px wide but you then some phones might get the larger version of content (because they are very high res), and some devices will swap content on orientation change. With the wide and increasing range of device sizes there's no significant breakpoint to use. The current thinking is not to focus on device sizes but ensure content is nicely laid out on any pixel width.
    – obelia
    Feb 6, 2013 at 22:51
  • These concerns are more about polish than layout. An iPhone5 is very small and should be laid out accordingly, but has very high resolution so should potentially use higher resolution images. As an implementation detail, I believe an iPhone5 will normally claim 320x480 (instead of the true resolution of 640x960), so your layouts probably won't break. However, your images may be more pixelated than necessary if you don't compensate by using higher resolution images (e.g., a 200px wide image in a 100px wide space).
    – Brian
    Feb 6, 2013 at 22:57

Your Answer

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

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