{"id":118,"date":"2007-09-26T01:35:40","date_gmt":"2007-09-26T08:35:40","guid":{"rendered":"http:\/\/css-tricks.com\/real-world-web-design-needs-to-be-800-x-600\/"},"modified":"2007-12-04T10:08:07","modified_gmt":"2007-12-04T17:08:07","slug":"real-world-web-design-needs-to-be-800-x-600","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/real-world-web-design-needs-to-be-800-x-600\/","title":{"rendered":"“Real World” Web Design Still Needs to Accomodate 800×600"},"content":{"rendered":"
Check out the statistics for the screen resolutions of all you hip kids who read CSS-Tricks:<\/p>\n
<\/p>\n
On this site, 800×600 doesn’t even make the top ten<\/strong>. Knowing that, I designed this site to make use of that extra pixel space. Right now it’s at 980 pixels. At first I went a full 1024, but that was causing horizontal scrolling problems because it wasn’t taking into account the 13-15 pixels that get taken by the vertical scroll bar. Doh!<\/p>\n CSS-Tricks isn’t exactly a “real world” website though. It is targeted at an audience that is a bit more tech savvy. In all likelihood, the tech savvy have bigger monitors. Fortunately, I don’t need to guess. My Google Analytics tell me exactly what screen resolutions you are using. CSS-Tricks isn’t the only site I track, either. I have about 25 sites that I track ranging from the other Creative Suite Help network sites to some eCommerce sites that I track from clients.<\/p>\n One of these eCommerce sites is a site that sells baseball field equipment. The target audience is maintenance personnel from city parks, schools, and stadiums. No offense to them whatsoever, but these people are not tech savvy. They are using the the CRT monitor that has been on their desk from the early 1990’s. More power to them, I say. I am here to accommodate. Guess what resolutions many of those old monitors are? 800×600 baby. Check out the stats from that site:<\/p>\n <\/p>\n On this site 800×600 comes in a healthy third place. If I were to make a design for this site that was 980 pixels wide, it would lead to a very frustrating experience for visitors having to horizontally scroll around as well as vertically scroll. Especially since on this particular site, the “cart” is on the right hand side! That would be annoying indeed. This site needs to be as easy as possible for users to navigate. After all, I am trying to get them to actually spend money here. People don’t spend money on frustrating websites, they will find an easier one. The internet is a big place and it is extremely easy to lose customers for dumb little reasons.<\/p>\n The bottom line: know your audience.<\/strong><\/p>\n In my opinion there are really only three options:<\/p>\n CSS is all about accessibility. Wouldn’t it be a shame to go to all the trouble of making a really nice an accessible website and then have it be too big to fit on a visitors monitor?<\/p>\n","protected":false},"excerpt":{"rendered":" Check out the statistics for the screen resolutions of all you hip kids who read CSS-Tricks: On this site, 800×600 doesn’t even make the top ten. Knowing that, I designed this site to make use of that extra pixel space. Right now it’s at 980 pixels. At first I went a full 1024, but that […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":138,"url":"https:\/\/css-tricks.com\/the-perfect-fluid-width-layout\/","url_meta":{"origin":118,"position":0},"title":"The Perfect Fluid Width Layout","date":"October 11, 2007","format":false,"excerpt":"I've been thinking a lot about screen resolution lately and how the use of fluid width websites is the best way to accommodate all visitors screen resolutions. The alternative, static width websites, have to make a choice. You can optimize for 800px width, the lowest common denominator, and give up\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312208,"url":"https:\/\/css-tricks.com\/behind-the-source-cassie-evans\/","url_meta":{"origin":118,"position":1},"title":"Behind the Source: Cassie Evans","date":"June 2, 2020","format":false,"excerpt":"I feel like the tech industry takes itself far too seriously sometimes. I get frustrated by all the posturing and gatekeeping - \u201cYou\u2019re not a real developer unless you use x framework\u201d, \u201cCSS isn\u2019t a real programming language\u201d.I think this kind of rhetoric often puts new developers off, and the\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/green-circles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":181527,"url":"https:\/\/css-tricks.com\/new-poll-one-specific-skill-set-jealous\/","url_meta":{"origin":118,"position":2},"title":"New Poll: What one specific skill set are you most jealous of?","date":"September 3, 2014","format":false,"excerpt":"Rather than ask you what you are already good at, I thought it would be interesting to ask you what do you wish you were good at. I just picked ten skill sets that all have to do with the web\/tech world: Management Marketing Knowing \/ Practicing the Law Back\u2026","rel":"","context":"In "Poll"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":185054,"url":"https:\/\/css-tricks.com\/responsive-images-youre-just-changing-resolutions-use-srcset\/","url_meta":{"origin":118,"position":3},"title":"Responsive Images: If you’re just changing resolutions, use srcset.","date":"September 30, 2014","format":false,"excerpt":"If you're implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the srcset attribute on the . Gaze upon this easy syntax: It's not just the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":318160,"url":"https:\/\/css-tricks.com\/svg-title-vs-html-title-attribute\/","url_meta":{"origin":118,"position":4},"title":"SVG Title vs. HTML Title Attribute","date":"July 30, 2020","format":false,"excerpt":"You know the title attribute? I can do this: \n