I think responsive design should be the next step after learning HTML and CSS. The future really is now – many sites are being visited by mobile devices.
1 Like
@UpstateLeafPeeper, I think you are equating “responsive” with “resizeable”. I think what Google is concerned about when they talk about a site being “responsive” is that it works well and quickly loads on mobile devices (where usually you cannot resize the page, anyway). This is different from making sure that a website behaves well when shrinking and expanding the web browser.
For example, if your website does not have different sized images for different screen sizes, it’s probably not very responsive (if you’ve ever hit a web page containing a huge image that takes too long to load, you’ve experienced that).
It’s possible for webservers like Nginx and Apache to detect the device accessing your site, and it may be that Amazon is doing this to deliver a different web page to different devices. I’m guessing that’s it, but I don’t know. I doubt it would be done in the web application code, although as @John_Betong pointed out, the code can be used to sniff the user agent. Maybe underneath it all, Apache and Nginx are doing user agent sniffing. This old article about user agent sniffing is worth a skim.
The Chrome “Toggle device toolbar” does a good job of displaying web pages correctly for different mobile devices. So does Firefox’s tool. I haven’t tried either one a lot, though. So, maybe when you saw something funky, it was just Firefox’s tool misbehaving.
I just looked at Amazon.com in Firefox’s “Responsive Design Mode”, and it worked fine for me. Here are some screenshots:
-
Firefox “Responsive Design Mode” view emulating an iPad:
-
Chrome “Device toolbar” view also emulating an iPad:
-
And here’s the actual screenshot of Amazon on an iPad:
It looks fine to me, and it functions well in the iPad.
Here’s a screenshot of Amazon.com using Chrome from my Galaxy S7:
When using Chrome on a real iPad and a real Galaxy S7, Amazon works as well as can be expected on these smaller devices. I think Google is correct in calling them “responsive” 
1 Like
In my mind, then, they aren’t truly responsive.
Okay.
Yes, I agree that most corporate websites have crap for code!!
I have never heard of that alternative definition and disagree with it.
A responsive website is one where the layout/text/images adapt to the user’s screen size and dimensions.
If things get chopped off, or distorted, or you have to scroll to the right to see everything, then the web page is NOT responsive!!!
(Load times don’t mean jack.)
I tried Amazon’s website in the Firefox respoonsive tool, and at first try it worked on a few iPhones, but then I tried on an iPad and the text got cut off.
The example you have above looks entirely like an image, so that is ironically easier to adapt to screen size. I was looking at this page and the text got mangled as I switched devices…
Responsive Web Design book on Amazon
That is not what “responsive” means.
Think about what that term means in plain English.
How well does a web page respond to a changing device size? Do the text and images flow smoothly and adjust (aka “respond”) or do they break?
You are talking about “performance” design - which is important, but it is an aside to responsive design.
Yes, because responsive design includes using different image sizes per device, that indirectly impacts load times, but you don’t do responsive design for performance - you do it so you don’t break things.
At any rate, I guess Amazon won’t be a first or second chocie on how a good responsive website should look, work and be coded…
I imagine that with a lot of larger sites, there’s so much code involved that it takes a real need for someone to sit down and re-code it completely. So while it is working, it’ll probably stay until it becomes more troublesome to look after than it would to replace it with something new. It may not be very nice, or conform to modern standards, but it’s the way they earn their money. Working > Nice.
3 Likes
I’m no expert, for sure! But for example this old Smashing Magazine article says " What Is Responsive Web Design? Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation."
So my thought is, if the screen size of the device requesting a page doesn’t warrant sending a huge image to a cell phone, then sending a smaller image to the user is being responsive to the user’s screen size. If you want to label that as a performance issue, then okay.
I agree that if content is missing or distorted, the page is not responsive (it is broken). However, Amazon’s horizontal scrollbar doesn’t bother me. It doesn’t appear unless I shrink my desktop browser quite a bit. There’s no horizontal scrollbar on an iPad or my Galaxy S7, so I don’t need to scroll left/right on those devices in order to navigate.
If you want more evidence, I took a recording while I scrolled through the Amazon page for Marcotte’s “Responsive Web Design” book, on my Samsung Galaxy S7. I can view the images easily. I can purchase the book, if I want. I can read the book description and reviews. Everything works fine for me on a device with a fairly small screen. So, I disagree with your conclusion. Amazon’s website is responsive.
The Chrome and Firefox tools seem to do a good first-pass job at simulating web page behavior on different devices, but there’s no substitute for the real thing.
Regarding the code at corporate websites: I’d be surprised if their code is not auto-generated; I’d expect large corporations to be using frameworks which generate the source delivered to your browser.
1 Like
Look carfully at the terminology used. Google says “Mobile Friendly” rather than “Responsive”.
That would be more of an umbrella term covering more than just coping with small screen sizes, but other issues relevant to mobile use. Page speed is certainly one of those factors, even if you don’t consider that to be related to “Responsive” it does relate to “Mobile Friendly”.
That is pretty much what I conclude. I’m sure they are still device/browser sniffing and dishing out different versions accordingly, as opposed to what I would call true responsiveness. It is kind of a flawed approach these days, where the line between mobile and desktop has become so blurred it isn’t anything like that black & white anymore.
I think this is probably actually because they were early adoptors of catering for the needs of mobile users. Back then, that was how it was done, people had yet to discover or master responsive design, and there was then a bigger distinction between mobile and desktop.
Then the sites have gotten so big and complex, a total redesign becomes too big a job and while the billions are still rolling in, why bother? Just look at Ebay code, still using table layouts. 
2 Likes
I hadn’t realised that was the case, but it does make things difficult for coders trying to spend the time learning how to do it with CSS, while their boss might be saying “just use tables, if it’s good enough for eBay, it’s good enough for us”.
1 Like
Point taken! Perhaps I’m conflating the two.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.