CODEWITHSUNDEEP
cssmobileresponsive-designmedia-queries
Jordan Clark
Jordan Clark

Reputation: 772

What are the best CSS Media Queries to act as a catch-all for the most common types of devices?

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:

(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.

Upvotes: 0

Views: 613

Answers (1)

Jordan Clark
Jordan Clark

Reputation: 772

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:

Upvotes: 2

Related Questions