![Resolution comparison](https://fournir.imgix.net/projects/resolution_comparison.jpg?auto=format%2Ccompress&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=188&w=300&s=272000ad5804e3fd4cba42caef0f548b 300w, https://fournir.imgix.net/projects/resolution_comparison.jpg?auto=format%2Ccompress&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=375&w=600&s=ab098aecd0e67c258bd5a9d370fadb76 600w, https://fournir.imgix.net/projects/resolution_comparison.jpg?auto=format%2Ccompress&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=563&w=900&s=7e112fbf6a64b9dabe29d619729aa680 900w, https://fournir.imgix.net/projects/resolution_comparison.jpg?auto=format%2Ccompress&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=750&w=1200&s=e03b8904c4a5e91acef9142b87c56f83 1200w, https://fournir.imgix.net/projects/resolution_comparison.jpg?auto=format%2Ccompress&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=938&w=1500&s=cbd8fa9a2c627fdba81d51b2fbb90783 1500w, https://fournir.imgix.net/projects/resolution_comparison.jpg?auto=format%2Ccompress&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=1125&w=1800&s=b1e7994830d441bb606307dfc977a7a3 1800w, https://fournir.imgix.net/projects/resolution_comparison.jpg?auto=format%2Ccompress&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=1313&w=2100&s=fb15880a77ae2e577fbdf8ed70149911 2100w, https://fournir.imgix.net/projects/resolution_comparison.jpg?auto=format%2Ccompress&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=1500&w=2400&s=c2526a3a180920c714cbfbdf45e4508f 2400w, https://fournir.imgix.net/projects/resolution_comparison.jpg?auto=format%2Ccompress&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=1688&w=2700&s=02edf574de49f392b9ed3e7de6839e9f 2700w)
Resolution and Screen Sizes
With such a wide array of possible screen sizes and resolutions on the market today, it's easy to see why there's plenty of confusion in regards to design approach. The illustration above is merely a small sampling of the possibilities (at the time of this article).
Mobile First
A mobile first design approach puts the experience of mobile devices as a priority over other experiences like desktops and tablets. This decision is typically, but not always, made on the basis of data that suggests mobile users are the most frequent visitors and the most engaged with the content you are serving.
Responsive Design
A responsive design approach is one where features and experiences are considered in a more holistic manner for users of various screen sizes and devices. In some cases, features that are included for the desktop browser are either paired down or completely eliminated from the mobile experience. Most often, however, the design approach considers content and experiences and how they would work for all. Considerations are then given for how these pieces of content function on a variety of devices.
Design in Browser
We must mention that there is quite a bit of discourse on a design in browser approach. This is usually accomplished with creating new content on the basis of a suite of existing styles and layouts to work with directly, or by using applications that style elements within the context of a WYSIWYG (what you see is what you get) editor or browser based application. In fact, over the past few years there have been a host of new content editors of this type.
Our Position
We see the generalized approaches above as one and the same. We place emphasis on content. We believe that the users and personas should drive the experience, not the devices. When developing websites or other web applications and experiences, we focus on features and content parity within the context of the people using them, with accessibility to these features and content in mind.
Resource
A full list of comparable screen sizes can be found at dpi.lv
Tags
Accessibility
Web Design
Responsive Design