December 5, 2013

Responsive Design Device Dimensions (in pixels)

google trends growth graph of responsive web design trendingSince Ethan Marcotte coined the term and described the concept of responsive web design in 2011, the trend has really taken off (see graph pictured right).

In case you don’t know, responsive design is a technique in which CSS @media queries are used to re-arrange page elements based on the width of the device/viewport. When visiting a responsive site using a browser, you can often simply resize the window’s width and observe how page elements shift positions to accommodate various screen sizes.

Each major shift of the elements on a page is known as a break and typically has a separate @media query associated with it. You can create as many or as few breaks as you like, but most designers have begun to adopt four (or sometimes five) different screen sizes. See the list below for details on the specific responsive design device dimensions and media queries commonly used. These do tend to vary from designer to designer, but I’ve observed that the set below tend to result in a great user experience!

  • 1200px and aboveLarge desktop
  • 980px to 1199pxSmall desktop
  • 768 to 979pxTablet
  • 480 to 767pxSmall tablet or landscape smart phone
  • 479px and belowSmart phone

See the code below for the appropriate @media queries to target these widths.

@media (min-width: 1200px) {
	// large desktop

@media (min-width: 980px) and (max-width: 1199px) {
	// small Desktop

@media (min-width: 768px) and (max-width: 979px) {
	// tablet

@media (min-width: 480px) and (max-width: 767px) {
	// small tablet or landscape orientation smart phone

@media (max-width: 479px) {
	// mobile device

Filed under:  User Experience Web Development  ||  Tagged under:

Orun Bhuiyan

As SEOcial's marketing technologist, Orun loves to discuss his hard-won knowledge on topics like SEO, programming and design. He's an enthusiast in emerging technologies, including big data and the semantic web.
Leave a comment
comments powered by Disqus

Base Terminology

SEO is the process of affecting the visibility of a website or a web page in a search engine's un-paid ("organic") search results.
The semantic web refers to the next stage of the world wide web and aims to ascribe semantic meaning to all web content through a collection of systems of classification. This means that, in the future, machines will be able to better understand the content we produce, resulting in better search results, new applications and an Internet that is fundamentally different from the one we use today!
What if each of the objects around you had a unique identifier that can be connected to the Internet? The goal of the Internet of things is to equip all objects in the world with tags that allow them to be digitally organized or manipulated. The implications? Less theft, less waste and the ability to control your surroundings in a manner never before possible.
Conversion optimization is the practice of modifying the parameters of a lead-generating system to stimulate a higher success rate as defined by goals. Most conversion optimization is structured to create an increase in ROI (return on investment). We frequently use multivariate and A/B split testing when optimizing conversion, wherein we test two or more systems at the same time, analyze their performance and deduce precisely what action items will bring us closest to the set goals in the least amount of time.
Market diagnostics or analytics is the process of collecting and analyzing business data — especially consumer data. This allows us to assess and improve the effectiveness of a marketing campaign.
In many applications today, there is such a phenomenal quantity of data available that it's difficult to collect and process with traditional database tools. The field of collecting, manipulating and drawing conclusions from massive quantities of data from a particular source is known as big data.
What started as a CMS (content management system) that was only meant to create and edit blog content has grown at a tremendous rate to become the most ubiquitous system for developing websites on the internet. WordPress accounts for an incredible 15% of all sites on the web.

RT @PicardTips: Picard engineering tip: Use the metric system.

6 months ago

RT @PicardTips: Picard management tip: Suppress your inner alarm. Be the calmest person in the room.

1 year ago

RT @dakami: i'm not saying everything you need to know about hacking, machine learning, and hacking machine learning is in this photo https…

1 year ago

Request Our Portfolio

  1. Which option best describes you? *

  2. Are you a key decision maker in the business you represent? *