Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Lucas Santos
19,315 PointsResponsive design only on mobile devices not on desktop?
Hey I have always been curious I see a lot of websites where it's responsive but not when I view it on desktop. If I were to view it on my desktop and shrink the screen it would not act responsive and all the elements would stay where they are. But if I load it on a mobile device the website has a mobile version of the website. I was wondering how this is possible because most responsive websites that I see if I shrink the window even on desktops the elements on the page will act responsive and fit the screen for mobile. A good example would be http://www.nba.com/
4 Answers
Cosmin Cioaclă
21,339 PointsThat is not a responsive website. There are two different sites there, one that you get when you visit it from your desktop, and another one that you get when you visit from your mobile device (hosted on a subdomain - mi. in this case).
Kevin Korte
28,149 PointsFacebook and Twitter both do this too. They test for a "user agent string" to decided what url to send you to. I'd avoid doing this, unless you have a fairly complex website.
In doing so, you have two different code bases to maintain, edit, or update. There are also SEO considerations when doing this.
Lucas Santos
19,315 PointsI see and how do they test for "user agent string"? PHP?
Kevin Korte
28,149 PointsNever done it, but a quick search revealed this possible option: http://www.russellbeattie.com/blog/mobile-browser-detection-in-php
Lucas Santos
19,315 Points(I posted this comment already but I don't know how to tag you in it) Then I don't understand why they would go through the trouble of making 2 different websites when they can just make one responsive, less work and less people they would have to pay.
Kevin Korte
28,149 PointsAt some point, responsive design breaks down and a mobile site becomes a better solution. For most website, this won't be the case. For larger sites like Facebook, it is.
Facebook has a lot going on in their desktop version. They have ads that rotate in and out, a live update feed on the right, messenger, and the like. All of these things are making ajax calls. Ajax calls are server requests. On mobile devices, they server requests take up a users often limited bandwidth. Mobile devices also tend to have far slower data speeds, which can make the site feel almost unresponsive or frozen since an ajax request could take so long.
All that could be done is hide these features with CSS on mobile devices, but the ajax call, and bandwidth usage would still happen. A second mobile site allows them to exclude these features for a much better experience on mobile browsers.
Lucas Santos
19,315 PointsI see so basically would be a waste of time unless you drive heavy traffic to your site such as facebook, youtube, twitter ect.
Lucas Santos
19,315 PointsI see so basically would be a waste of time unless you drive heavy traffic to your site such as facebook, youtube, twitter ect.
Lucas Santos
19,315 PointsLucas Santos
19,315 PointsThen I don't understand why they would go through the trouble of making 2 different websites when they can just make one responsive, less work and less people they would have to pay.
Cosmin Cioaclă
21,339 PointsCosmin Cioaclă
21,339 PointsBefore the rise of the smartphone usage, a fixed width site was the norm. If you wanted a site usable on mobile, you had to build another site. After smartphones with proper browsers popped up, the need for a unified platform was born and that's how we got to responsive design. At this point, if you only had a desktop version of your site, you had two options: build another responsive site, or build a temporary mobile version until you could build another responsive site (the reason being lack of resources usually).