Skip to main content

Media Queries for Common Device Breakpoints

April 8, 20152 min read
The @ media query is 1/3 of the recipe for responsive design, which has been a large topic of discussion with the recent announcement that Google will be making this a ranking factor for mobile searches. It is the key ingredient that, in it’s simplest for allows for specified CSS to be applied depending on the device and whether it matches the media query criteria. The problem with having many media queries is that if you are building for a specific device, what happens when the newer version comes out and people upgrade? Well, then you need to rebuild the website’s CSS/style sheet and again, your in the exact same place you were in prior to the latest released device. To resolve this we use three standards in which you can take and use as a template… The most popular screen widths for a phone are between 0 and 767px, ipads and tablets come in after than starting at 768px and some tablets go all the way up to 979px, then you have a screen large enough for regular website formatting… this is where people tend to start their development and scale it down to fit phones and tablets… I don’t agree with this mentality, I’m in the boat where you develop for the majority of users for the website (you can get this information from popular tracking information like Google Analytics). Here is the information you’re probably actually looking for…just place this at the end of your existing CSS stylesheet and you’ll be able to start making your website responsive.
/* Begin Responsive Changes */
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
/* Place your styles for phones and small tablets here */

}
/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 979px) {
/* Place your styles for tablets and tiny laptops here */

}
/* the reason that this stops at 979px in width, is that at 980px your default styles w

Explore a website growth scenario

Change the assumptions to see how traffic and inquiries affect the estimated lifetime revenue of customers acquired in one month. The starting values are examples. This calculator does not measure lost revenue or predict what a redesign will achieve.

Use the same monthly period for visitors and leads.

Use distinct inquiries attributable to those visitors.

Your own estimate of the share that fits your business.

Use your observed rate or label it as an assumption.

Revenue across the customer relationship, before costs.

A scenario you choose, not a prediction from Stoute.

For example, adding 1 point changes a 2% conversion rate to 3%.

One month’s acquired customers

Customers under current assumptions
3.0
Customers in your scenario
3.0
Current cohort’s estimated lifetime revenue
$3,000
Scenario cohort’s estimated lifetime revenue
$3,000
Difference across those customers’ lifetimes
$0

Visitor-to-lead rate: 2.0% → 2.0%. Scenario conversion is limited to 0–100%. Fractional customers represent an average, not a literal customer count.

These amounts are gross lifetime revenue, not monthly cash flow, profit, or return on investment. The model holds qualification, close rate, and customer value constant. It excludes project costs, advertising, delivery costs, and payment timing.

Have a specific WordPress improvement in mind? Describe it in a written inquiry.