Someone emailed me:
What approach to building a site should I take?
- Build a single responsive website
- Build a site on a single domain, but detect mobile, and render a separate mobile site
- Build a separate mobile site on a subdomain
It’s funny how quickly huge industry-defining conversations fade from view. This was probably the biggest question in web design and development this past decade, and we came up with an answer: It’s #1, you should build a responsive website. Any other answer and you’re building multiple websites and the pain from that comes from essentially doubling the workload, splitting teams, communication problems across those teams, inconsistencies across the sites, and an iceberg of other pain points this industry has struggled with for ages.
But, the web is a big place.
This emailer specifically mentioned imdb.com as their example. IMDB is an absolutely massive site with a large team (they are owned by Amazon) and lots of money flying around. If the IMDB team decides they would be better off building multiple websites, well that’s their business. They’ve got the resources to do whatever the heck they want.
I for one have gone for the second option.why. You cannot fit a square peg in a round hole. Yes it is pain but is better than seeing a site with awful layout that the client cannot read on a small screen without scrolling left and right. You have lost the effect of continuity so the whole page is useless
Do you even know what a responsive website is? Those have no horizontal scrollbars… unless the dev did a poor job :)
I would advise looking into how some responsive component libraries work. https://getbootstrap.com/docs/4.4/layout/overview/
Responsive websites absolutely can and should work perfectly on mobile and desktop, and the majority of companies, blogs, personal sites etc do work just fine across many devices with a single codebase. Even the issue of content moving position on mobile can be resolved in modern css (flex order comes to mind). Never underestimate the power of media queries and developer discretion. Occasional compromises on design or build are better than locking yourself into a painful process which you later regret. As always in web, if you can improve, then do.
Sounds like someone doesn’t know what a responsive website is.
Keep in mind that there’s a difference between responsive and adaptive.
I have no details on your specific requirements so it’s possible that you’re the odd case confirming the rule.
In general, though, it’s not likely that a webpage will be worse if built responsively. It’s a matter of the team’s competence.
Responsive and lean websites are definitely the way to go, but I’m curious how other devs view Google AMP. Is it sometimes worth creating a fully responsive site AND an AMP version?
To me it depends on the needs of your website. AMP doesn’t allow you to use JavaScript massively due to the limit of JS size it allows you. This can be good for performance reasons but maybe you are forced to loose some key functionalities not implemented / supported by AMP. Also, I think advertisement is not performing as good in terms of money under AMP.
On the other hand, how much is Google to push for AMP in a SEO perspective will be key so… depending on your resources to maintain both I would go for both until it’s more clear the future.
In philosophical terms – AMP is bad. It uses non-standard markup and is controlled by a single for-profit entity. It’s the antithesis of the open web.
In technical terms – AMP is bad. It’s trivially possible to create faster websites without the third-party resource dependencies.
In commercial terms – AMP is good. Google favours AMP websites for rankings/features.
Ok to first option but important to consider on serving the minimum necessary code depending on the device to be more performant. (Good coverage on your JavaScript and CSS, minimum HTML markup, etc.)
I bet the vast majority of web developers would pick the responsive website as first option but I feel we can leave something behind with this approach.
Maybe in most of the cases the difference between the two is just a matter of proper sizing and arrangement of elements: in this case a responsive website is a quite elegant solution.
Otherwise I’d say it depends. I can’t imagine right off the bat what kind of website do need a mobile website which is very different from the desktop one but that could easily exist.
Unless you really need the mobile version, one version should cover responsiveness on any device. Someone above rushed to point to Bootstrap, which in another nonsense. Your website is your website, no version-number attached, no framework, no fancy labels. It’s built for you, for what you need.
Thank you Chris Coyier. Really, his emailer saved my time and I was thinking like him/her as well as worried about the heavy load to do but Coyier’s answer came to be my right choice. I say so because I was learning Bootstrap 4, I searched a lit bit then found your interesting article and also other useful information about responsive web designing. I say with aloud voice “TO DESIGN A RESPONSIVE MOBILE FIRST NEEDS AS GREAT EFFORTS AS DESIGNING TWO WEB SITES PLUS SOME TRICKS YOU SHOULD KNOW”. Guys it not easy to catch up with the modern responsive web development without challenges.
I only build responsive sites, mostly due to cost constraints. But it has become more clear to me as we’ve advanced past this discussion that a pure responsive aproach is essentially the least of all worlds, the lowest common denominator that kind of just works on everything. There is no doubt that the more time you spend optimizing different viewports the better those viewports are going to be/feel/use.
I think the ideal is multiple responsive sites where you spend more time catering to the unique needs and limitations of the different viewports and devices (specifically input methods). However, from a realistic, practical and cost effective view the only real answer is one responsive site, especially as we get better and better css layout.
Ideally you should have single thin responsive website but in ecommerce / imdb that simply doesn’t work. The markup, styles and scripts are too different.
Basically if you have blog or website with low visitors go responsive,
if your website is ecommerce or smth like imdb with lots of users you should have 2 versions.
Today’s technology allows for 100% responsive websites, if you know what you are doing! Absolutely no need for 2 sites!
Eddy
Definitely just one site. I think you see a separation on some big companies because their website and platform were already too big during the transition of desktop to mobile so they probably had to keep hacking away to serve mobile without a complete overhaul of their platform like Amazon.
Why #2 or #3 are sometime better ? Amount of data sent and personal preference of your users.
Having a loooonnng scrolling page is already a pain on a computer, and even more on a smartphone.
Downloading a bunch of datas we don’t need on a smartphone uses our limited data connection. You can show complex pages on a computer, not on a smartphone. So, you have to choose what to send to each one.
And using “display:none” is a no-go because datas are sent anyway.