In comparison, the argument about designing for particular screen resolutions has
been quite tame these past few years. When designers say that a site is
designed, or optimized, for a particular screen resolution, they’re
actually talking about the resolution of the viewer’s monitor. In the
past, the screen resolution debate was focused on whether our designs
should still accommodate monitor resolutions of 800×600 without
displaying a horizontal scrollbar.
According to W3Schools’ screen resolution statistics, in January 2010, 1% of web users had their screens set to 800×600 pixels (down from 4% in 2009), 20% had their resolutions set at 1024×768 pixels (down from 36%), and a whopping 76% of visitors had a resolution higher than 1024×768. The figure below illustrates these trends.
These days, it’s a given assumption that desktop browsers display at least 1024×768. Even the majority of netbook computers have a 1024×600 or higher resolution. For that reason, 960px has become the de facto width for most web design projects. With W3Schools reporting the growth of users with resolutions greater than 1024, you’d think we’d be looking to push the standard width past 960, but there are a couple of reasons why this probably won’t happen. First, most users with larger monitors still keep their browser window set less than 1024 pixel-wide, so they can see other applications they have running. The other reason is line length. If a line of text is too long, it becomes less readable. Therefore, a wider default layout width would really only allow us to add more columns.
Although
desktop browser statistics like those provided by W3Schools justify our
use of 960 pixel layouts, they ignore a major segment of the web
browsing population: mobile users. Again citing Ethan Marcotte’s “Responsive Web Design” A List Apart
article, mobile browsing is expected to outpace desktop-based access
within three to five years. As mobile screen resolutions increase and
mobile browsers catch up to their desktop cousins, it’s safe to say that
your website design will be readable in modern mobile devices. You
should still include popular mobile devices in your browser testing,
though; if we’re struggling to make the sites we design look right in
IE7, shouldn’t we be checking them on mobile browsers as well?
Taking the increase in mobile usage a bit more seriously, a greater amount of websites are providing mobile-optimized versions of their sites; this, of course, means that more and more clients will be demanding mobile-optimized sites as well. This used to be a complicated task, dealing with mobile-specific languages like WML and awful, inept browsers like Blackberry’s old RIM OS.
Fortunately,
designing a mobile-optimized site today is mostly about revamping
your layout to work on mobile screens while possibly leveraging some of
the bonus features of the OS to make it shine. Covering the technical
details of designing a mobile-optimized site is outside the scope of
this book, but the layout principles and design theory discussed in the
rest of the chapter still apply. At the end of the day, no matter what
you’re designing, the needs of your client and their target audience
should be the driving force behind your decisions.
According to W3Schools’ screen resolution statistics, in January 2010, 1% of web users had their screens set to 800×600 pixels (down from 4% in 2009), 20% had their resolutions set at 1024×768 pixels (down from 36%), and a whopping 76% of visitors had a resolution higher than 1024×768. The figure below illustrates these trends.
These days, it’s a given assumption that desktop browsers display at least 1024×768. Even the majority of netbook computers have a 1024×600 or higher resolution. For that reason, 960px has become the de facto width for most web design projects. With W3Schools reporting the growth of users with resolutions greater than 1024, you’d think we’d be looking to push the standard width past 960, but there are a couple of reasons why this probably won’t happen. First, most users with larger monitors still keep their browser window set less than 1024 pixel-wide, so they can see other applications they have running. The other reason is line length. If a line of text is too long, it becomes less readable. Therefore, a wider default layout width would really only allow us to add more columns.
W3Schools’ screen resolution statistics
Taking the increase in mobile usage a bit more seriously, a greater amount of websites are providing mobile-optimized versions of their sites; this, of course, means that more and more clients will be demanding mobile-optimized sites as well. This used to be a complicated task, dealing with mobile-specific languages like WML and awful, inept browsers like Blackberry’s old RIM OS.
Blip.tv on iOS (as seen on http://cssiphone.com)
No comments:
Post a Comment