Internet & Web Design Fundamentals / Monitor Resolution
Subtitles of the Movie
Have you heard of the term "monitor resolution" before? I don't know if you have or not but essentially what it is, is it's the number of pixels horizontally and vertically that can fit inside your computer monitor, so really it has nothing to do with the physical size of your monitor, whether you have a 15-inch monitor or a 21-inch monitor, or whatever it is that you have, really it's the pixel count inside that monitor that really matters. And over on the right-hand side here I've listed out three of the most common monitor resolutions. We have 800 by 600, we have 1024 by 768 and we have 1280 by 1024. Now, how it works here is the first value that I gave you there - the 800 or the 1024 or the 1280 - that's the horizontal measurement. The last value - the 600, the 768 or the 1024 - that's vertical. We don't really care if our websites scroll up and down, right. That's usually OK. But what we don't want typically is we don't want our website to scroll left and right. We don't want our websites to scroll horizontally. So what we need to do when we're building our layouts, whether we're building the layout from scratch, you know, hand coding everything, or whether we're building it in a program like Dreamweaver, or whether we're building it in Photoshop, we want to make sure that the width of our layout is going to fit inside one of these monitor resolutions. Now 800 by 600 is a much older resolution. A lot of government websites still use 800 by 600 as their standard, but really, 1024 by 768 is one that I would say you can certainly shoot for. That's the one that I design for, anyway and again, I don't care about the 768, it's the 1024. Now if I go into Photoshop and I build a layout that's exactly 1024 pixels in width and then I drop that layout into a Web Browser, then that layout is going to scroll horizontally, right, because a Web page also has, you know, things like page margins kind of built into them. Rather than going all the way up to 1024 I have a magic number for you that you may want to tattoo onto your forearm so you remember it: 990 pixels. So the layouts that I build, at least, are no wider than 990 pixels, by who the heck knows in terms of vertical distance, or the vertical length. Right, it might be a thousand pixels, it might be 1500 pixels in height, something like that, right, but 990 is that width measurement. And then, anything I design inside there I know it's going to fit inside the Web Browser for the viewer on the other end. Now what happens if someone come along running a higher resolution than 1024 by 768? Well, what'll happen is they'll just get dead space, either on the right-hand side of the website or on the right and left side of the website, depending on how you build it, right. If someone comes along running a lower resolution, like say the 800 by 600, then they're going to get that horizontal scrolling. I hope this clears a few things up for you.
Tutorial Information
| Course: | Adobe Photoshop CS4 for the Web |
| Author: | Geoff Blake |
| SKU: | 34089 |
| ISBN: | 1-936334-01-1 |
| Release Date: | 2010-02-25 |
| Duration: | 7 hrs / 105 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 