0

I am in the process of building a website for a local small business. The website is for a removals and house clearance company, and will consist of several pages: a simple case of a home page, an “about us” page, FAQs, and a contact form. The aim of the website is simply to provide a web presence, and to advertise and promote the company to attract some extra custom.

In other words, this website will be basic “brochureware” and is in no way intended to be state-of-the-art. However, I am conscious of the fact that in any case, these days websites need to be responsive due to the increasingly large number of mobile users. Although I have a very good knowledge of designing websites to work across various types of desktop web browsers, I have to admit that my knowledge of mobile phones is non-existent.

To ensure that this website is in some way responsive, ideally I would like to create three main CSS files:

  • a stylesheet for basic mobiles
  • a stylesheet for for smartphones
  • a stylesheet for for traditional desktop browsers

(I suppose you could basically call it “small”, “medium” and “large” version of the website.)

To be more specific, the question I would like answered is: Could anyone please recommend the most common CSS Media Queries to act as a catch-all for the most common types of devices (as of 2016)?

All I can seem to find when doing a Google search so far for this question are gigantic lists of CSS Media Queries that can only be described as monolithic! Is there any simpler way to make a basic website, without having to resort to ridiculous numbers of stylesheets and script files?! I would be grateful for any advice on this matter. Thanks in advance.

Jordan Clark
  • 750
  • 5
  • 18
  • Have you thought about building on something like [Bootstrap](http://getbootstrap.com/)? – rrrr-o Aug 16 '16 at 13:26
  • 1
    possible duplicate: [Common breakpoints for media queries on a responsive site](http://stackoverflow.com/q/8564752/3597276) – Michael Benjamin Aug 16 '16 at 13:33
  • 2
    You should not base this on what resolutions “common” devices _currently_ have, but rather on how much space your _content needs_. _“ideally I would like to create three main CSS files”_ – no, ideally you do this using _one_ stylesheet, that contains the general formatting rules for the page elements, and then uses media queries to overwrite that general formatting where necessary. Whether you go _mobile-first_ or the other way around, is up to you. – CBroe Aug 16 '16 at 13:44
  • @CBroe [Google seems to disagree](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/how-to-choose-breakpoints?hl=en) about the single stylesheet being ideal, though. – BCDeWitt Aug 16 '16 at 18:56
  • 1
    @BDawg: Google has funny views on lots of stuff, and not all of them are actually good :) Anyway, embedding different stylesheets with `media` directly on the link element has it’s drawbacks, too. – CBroe Aug 17 '16 at 07:41
  • 1
    @CBroe Fair enough. I wasn't trying for an appeal to authority, but it definitely looks like it. Anyway, mind talking about the viability of Google's approach a little more? I think it's still relevant to the op's question. I can foresee potential for all of the stylesheets to be loaded on out-dated browsers. I suppose that could be a concern if supporting older systems is a requirement for your project. Am I missing anything else? – BCDeWitt Aug 17 '16 at 15:29
  • 1
    @BDawg: If the browser loads all stylesheets, it’s no good – but if it loads only the “relevant” ones, that can also have its drawbacks. View a page on your mobile, then change screen orientation – that is likely to make it “fall into” a different media query, so the browser starts loading the according stylesheet _now_ – and depending on stylesheet size, connection etc. that might cause a noticeable “lag.” – CBroe Aug 18 '16 at 07:06
  • 1
    I think we can agree that there is no one-size-fits-all solution – it will always depend on project specifics. Often you will have similar element styling on desktop and mobile, and the main thing that needs adapting to screen size is the grid – in such cases, I prefer _one sheet to style them all._ If the styles differ in large parts though, the approach using different stylesheets may have its advantages too. – CBroe Aug 18 '16 at 07:07
  • Just wanted to note here that I tested multiple stylesheets with media attributes in a virtual machine on IE8 and it only loaded the default stylesheet. So, it looks like my out-dated browser concern may not be a problem after all. – BCDeWitt Aug 18 '16 at 19:05
  • 1
    @CBroe Actually, I found this [on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax): "Style sheets with media queries attached to their tags will still download even if their media queries would return false (they will not apply, however)" – BCDeWitt Aug 18 '16 at 20:19
  • 1
    Turns out, after a little more research, I found out that the non-matching media queries mark stylesheets to be non-render-blocking but, again, they still download on initial load. ([See tl;dr section here](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=en)) – BCDeWitt Aug 18 '16 at 20:37

1 Answers1

2

In retrospect, I admit that this question I asked is broad as well as a bit vague. This is partly due to me not keeping up-to-date with the latest trends in front-end design, as well as a misunderstanding and misconceptions of the art and science around responsive web design.

However, I argue that this question should remain (if not on Stack Overflow, at least on somewhere more relevant on the Stack Exchange network), as the comments I have received have helped me a lot to better understand the fundamentals of how to actually implement a responsive design, and could also be beneficial to others in a similar situation.

Although there is no black-and-white answer to my question, thanks to those who have commented, I think that the best guidelines for responsive web design in general, are to:

  • focus on the project specifics
  • design with the content itself in mind

(Both points suggested in the comments by CBroe.)

I have also found the following articles helpful:

I also think that these articles from A List Apart, although published in 2000 and 2010 respectively, are excellent resources – both help you to understand the fundamental philosophy behind responsive web design:

Community
  • 1
  • 1
Jordan Clark
  • 750
  • 5
  • 18