When I first started designing and building websites, the standard was to design for 800×600. For those not familiar with this convention, it meant to expect the screen resolution of your users to be 800 pixels wide by 600 pixels tall. This worked for a while and all was fine, but then as display technology advanced, what looked good at 800×600 now looked tiny on a larger display. So the rule became “design for 1024×768”, then “design for 1280×1024”, and an obvious problem emerged. People weren’t wrong for designing specifically for these sizes; the numbers backed them up. Up until even 2008, about 56% of internet users were viewing their websites at 1024×768 or lower. It made sense to invest your time in designing for what the major population of the web would see. The problem with this philosophy was, of course, that would not be the major population for long and within a short time you would be designing your site yet again to be tailored to the masses.
Currently, screen resolution statistics are all over the place, but here is a bit of a break down so you can get an understanding of what is happening:
- 800×600 – 1%
- 1024×768 – 13%
- 1280×1024 – 18.7%
- 1280×800 – 11.5%
- 1920×1080 – 8.1%
- 1440×900 – 8.1%
Statistics from W3Schools.
The problem has become that there is no standard screen resolution to design for, and to add to the problem the increased use of mobile and tablet devices has completely changed the way some people use the Web.
To address these problems, Adaptive and Responsive design came to the rescue. Adaptive design is a technique of creating different layouts, or styles, for each of the resolutions you expect your users to have. An Adaptive Design might include a layout for 1920×1080, 1024×768 , and 320×480 (iPhone screen). While this solves the problem of displaying the same content to 3 users sets, it still subjects those that are running at different resolutions to a poor viewing experience. Responsive Design looked to help solve that problem even more effectively, by adjusting elements on the screen to be responsive to the screen it’s being viewed on. A similar problem arises with responsive design though that many of those who implement it still use screen resolutions as a basis for when their design should shift. They are putting the wagon in front of the horse.
When designing for each resolution, the different screen widths are commonly referred to as “break points.” The problem much of the time is these are not the places where the design actually “breaks,” or stops effectively working within that given space. This is what I like to refer to as “Breaking Bad,” using screen resolutions as a guide to adjusting your design as opposed to really analyzing your layout and seeing where it needs to be changed. Many times these widths won’t directly coincide with a current popular browser width. It is important to realize that this is a good thing, though. Much like back in 2002 when designers were told “800×600” or “1024×768”, using these numbers as key breaking points roots your design in to current display technology.
It’s hard to predict how a person in 5 years is going to be using the Web and in what situation. Designing a site now requires you to not think so much about the specific widths and heights, but more about the situational applications of your site. A visitor viewing it on a smartphone has different intentions then a tablet user, and a desktop user, and so forth. With more and more internet-ready devices becoming available, it’s going to become “how does my site function on a TV, on an LCD on a refrigerator, on a full touchscreen table top?”
Plan your site to work at every resolution, not by creating 100 different implementations, but by properly identifying where the break points are in your layout and building a way for page elements to adjust accordingly. Avoid “breaking bad” and watch your site adapt to whatever new resolution lies just around the next bend.
This afternoon I-SITE welcomed a group to tour our office and get a chance to see what we build and design. We were one stop on the Old City Tech Tour that Mayor Nutter helped to lead after announcing a $3.5 million investment from the City of Philadelphia and the Philadelphia Industrial Development Corporation, called Startup PHL.
