Graphic Sizing Issue

[Websquad]

In a few weeks 30 billboards will display a new URL in the local community (200,000 population). The URL will point to another site with all the real content, so this is just a splash page. The whole thing will be a graphic. Having said that, is there an optimum size I should use. Now that 17" CRT's are selling for $5/each on CraigsList, a lot of folks are getting 19" wide-screen LCD panels ... so, what should my target be. FYI, the splash page/graphic will have about 1/2 of the content in text, which will probably be 50-80 words (don't know yet).

[generalhavok]

Bob:

Unfortunately, there's no way to know ahead of time. Were this a print job, you'd know the exact dimension...because everyone sees pictures with their eyes.

When it comes to websites, there's no way to know. We have some guidelines, of course...an existing site can view certain statistics that give them screen size, which is very helpful. Geeks generally have bigger monitors than non-geeks, etc. When it comes to the general public, of course, you don't want to go TOO big...that creates the dreaded Horizontal Scrollbar. Consensus at the moment seems to be that we're still designing for a maximum 1024 x 768. That means that max-width should be 960ish.

Of course, you could design the whole thing in ems...that would make the entire thing width-independent. You can even size images in ems, and they'll scale. It takes some calculation, and you have to do it with each image, but it can be done. Here's an example: http://host.sonspring.com/em-image/. The images MUST be stored at a higher resolution than average, since they might be expanded...they must look good at least two notches larger than average.

Let us know what you decide!

[flutem3]

Hi, General,

I have a question about this issue as well. People are buying larger monitors, I am not, but at the same time they are also looking at websites, etc. on their cell phones and whatever other stuff is out there now.

I was at a Chinese restaurant yesterday. I could hear what sounded like a soap opera...in Chinese. I checked it out, and it was just that. And the people were watching it on a small laptop. The program originated in China. The world is more and more amazing all the time. :D The screen they were looking at was no more than 8 inches wide. How does our larger stuff fit on the smaller screens, or does it?

Carol

[generalhavok]

Carol: that's a great question! The answer is "depends".

Each device has software (a browser) that shows you the web page. Your computer has a browser, and your cell phone likely has a browser. They're each built to work differently...they're built to display web pages in that size...not just miniaturized, but also "stripped down" in many cases. They're device-specific solutions, trying to replicate as best they can the computer experience without losing readability. You can't control how people access your website...you can only control whether you're putting your best foot forward so they can all experience it as closely as intended.

Here's why I'm such a standardista: the way - for most people - to put their best foot forward for all of those different devices is to (gasp) write their websites with 100% standards-compliant code.

The better (more standards-compliant) your code is, the better able each device's browser will be to properly render your website. It's just that simple. Non-compliant code is harder to render properly than compliant code, so a cell phone's browser won't display a badly-coded site as well as a well-coded site.

Of course, many larger companies and very tech-savvy organizations have created cell-phone-specific websites. The issues behind those are as complex as any from the old 'browser wars' days, and there's no perfectly right answer as to how to do it...but we're getting there. For those who like to buy and read industry stuff, the August 2008 issue of Practical Web Design (from the makers of .NET magazine, a British publication) deals with the process of designing a subsite for mobile devices.

Most people will never have the need to make a mobile website...by the time it's time to do it, mobile browsers will probably be as standards-compliant as computer browsers are becoming. In the meantime, those who want their sites to work on computers, cell phones, screen readers, projectors, and every other device can do one simple thing to make sure they're doing what they can:

They can validate their code. (http://validator.w3.org/)

:cool:

[flutem3]

Hi, General,

Good to hear from you. I have another question. My monitor is 17" which I like very much. I don't know how wide monitors get, but why would a person need such a wide monitor? Even if a person builds a website with a "relative" as opposed to an "absolute" setting, doesn't the perspective of the website get out of whack when the monitor is so wide? They certainly don't make them that tall as well, do they? Might as use a big TV screen.

If that happens, I cannot imagine how dreadful some websites would look...some look dreadful anyway. But people try.

I thought I would let you all know that I told the people at the Task Force meeting that I am thinking of redoing the website. The information was met with a dead thud. No questions, no thoughts, no ideas, nothing...still. I have asked them to think about it, please. Such is life. Well, I am going to continue none-the-less. I still have no idea what I want to do except in a vague way.

I was trying to get the people from the meeting also to tell me how they think the church should be portrayed to the rest of the world. Silence. Maybe when they have had time to think about it, somebody will come up with a smashing idea. That would be nice!!!

I have been made the "Prayer Minister" for our Task Force. There is one problem with that. I have no idea what a "prayer minister" does. Then "it" is to spread from the Task Force to the service.

General, if you or anyone else has an idea of what a prayer minister does, please let me know because I said I would do it!!!

God bless one and all of us,

Carol

[generalhavok]

Hi, General,
Good to hear from you.
:)

My monitor is 17" which I like very much. I don't know how wide monitors get, but why would a person need such a wide monitor?
Don't forget that people use computers for more than surfing the web. If you've ever worked on a large Excel spreadsheet, you can probably see why a HUGE monitor would be good.

I have a 22" wide letterbox-style monitor, and so does Mrs. Havok. While we both like to work with everything "full screen", it's very helpful to have two good-sized windows open side-by-side. It's much tougher to do on a smaller monitor. I do graphics work, which is made easier by having a larger work area.

Some people, like my mother-in-law, have bad eyes. A larger monitor lets her see everything bigger without having to scroll side-to-side on the web, for example. Remember that screen resolution isn't the same as screen size...you can have a large monitor set to 800x600, and everything shows up ginormous.

Even if a person builds a website with a "relative" as opposed to an "absolute" setting, doesn't the perspective of the website get out of whack when the monitor is so wide? They certainly don't make them that tall as well, do they? Might as use a big TV screen.
That's one of the challenges of web design: you don't know the screen size your visitors use. Many of my own visitors have screens larger than my own...which is pretty large. People who make websites to fill the screen don't do themselves any favors. This website, for example, fills the screen. If you narrow the window, it gets narrower. That's generally a good idea...but the reverse sometimes causes a problem.

When your site becomes 22" wide, your paragraphs can turn into single lines of text. Readability experts say that 55-60 characters per line is optimal (depending on who you ask), and when your paragraph is 200 characters wide it doesn't get read as often, or as thoroughly. For that reason I don't recommend making websites that are set to 100% width.

When more browsers are CSS2 compliant, we can use max-width to determine the widest your site would display. Until it's that easy, we should probably all pick an explicit width (like 960px or 14em). Unless you're an uber-css geek, you're probably not willing to work hard enough to make an elastic site...straight-forward is probably best for most people.

I told the people at the Task Force meeting that I am thinking of redoing the website. The information was met with a dead thud.
LOL...of course. That's why you're doing it, and they're not! You're not alone, Carol.

I still have no idea what I want to do except in a vague way.
Can we work together on it? You can design it, and I'll write you a standards-compliant template from which you can make all of your pages...whaddya say?

I was trying to get the people from the meeting also to tell me how they think the church should be portrayed to the rest of the world. Silence.
Ditto. My church board apparently doesn't know what churches are for, as they looked like stunned llamas when I asked "what are we trying to accomplish as an organization?". Tough to make a really effective website when the church has no idea what its goals might be.

General, if you or anyone else has an idea of what a prayer minister does, please let me know because I said I would do it!!!
LOL. <singing>I'm just a girl who cain't say no...</singing> You might ask them for a job description. That might mean different things to different people, and you might hit my expectations square and totally miss theirs. I'd say that a Prayer Minister might be expected to lead prayer, mobilize other pray-ers, and manage prayer requests for the group/church. Of course, I could be totally wrong!

[JackWolfgang]

[quote]My monitor is 17" which I like very much. I don't know how wide monitors get, but why would a person need such a wide monitor?
Don't forget that people use computers for more than surfing the web. If you've ever worked on a large Excel spreadsheet, you can probably see why a HUGE monitor would be good.

I have a 22" wide letterbox-style monitor, and so does Mrs. Havok. While we both like to work with everything "full screen", it's very helpful to have two good-sized windows open side-by-side. It's much tougher to do on a smaller monitor. I do graphics work, which is made easier by having a larger work area.

I love my 22" widescreen for this very reason. Firefox and Notepad++ side by side; Filezilla and Windows Explorer side by side. It's a wonderful way to work.

[Websquad]

I agree with Jack. I have three desktop computers. The Mac has a 17" CRT monitor. My fairly new XP/Pro system has a pair of 19" LCD panels. And the Linux/Ubuntu system has a 22" HP widescreen monitor (snapped it up, used, from Circuit City for $140!). The XP machine is my main workstation, and I love my duals. (I think Jack as a dual setup at work, or he did sometime in the past).

Back to the sizing issue: the splash page will be a simple static jpeg file 900 px wide. I'll use some CSS to put a copy of the text in a layer below the jpeg; thus, folks with graphics turned off will still be able to read the copy. And I will be able to read it on my BlackBerry.

As indicated in the post that kicked off this thread, we want the graphics to tie into the billboard campaign.

When I get the graphics finalized, I'll post a URL and invite your praise or complaints %^)

bob
<><

[flutem3]

Don't forget that people use computers for more than surfing the web. If you've ever worked on a large Excel spreadsheet, you can probably see why a HUGE monitor would be good.

Hi,

I sometimes forget, and other people don't know, that all I know about a computer is what I know about my computer, and I don't know everything of which it is capable. I have heard of data bases, of course, but I have not actually seen what you do with a little or big monitor. I also have no idea how a person could bring up IE and FireFox at the same time.

Actually, I am saying that I am ignorant of a lot of what people use computers for; however, I know they can create accurate skulls if the police find part of one. And that cars, parts of cars, buildings, etc. are designed with CAD if I used the letters correctly. But I have only seen that stuff on TV.

Thank goodness for TV, or I would know very little about how this stuff works. And there are books, of course, but I have some difficulty with some of them.

I am even more thankful for a forum like this on which I can ask my questions. I am grateful!!

Carol

[Websquad]

Quick comment, Carol ... I often bring up IE6, Firefox, Opera, and Safari (for windows) at the same time, just to see if a new design is compatible with all (and frequently, they are not). I also have IE7 on my laptop, and use it for compatibility checking.

I normally use my HTML editor in my left monitor and FireFox in my right monitor to evaluate changes. And when cranking up something that is absolutely new, I use WeBuilder 2008, which allows me to have a code window in the left monitor and a display window in the right monitor ... a powerful tool for prototyping. When you make a change in the HTML or CSS, it is instantly rendered in the right monitor. Much cool! But, it ain't WYSIWYG, so if you are not a HTML/CSS grunt, it is of little use.

Gotta run ... workload is backing up!

bob
<><

[JackWolfgang]

(I think Jack as a dual setup at work, or he did sometime in the past).

Jack still has a dual 19-inch setup at work. I don't do much web work on it, but the benefits are similar to my 22 inch.

Development Environment (or Software to QA) on left screen.
Issue/Defect Tracking Software (or Firefox looking up something on Google) on right.

Filezilla on left screen.
Windows Explorer on right.

[Tomm]

Modern sites ignore the 800x600 users, and I think they are current to do so. So go for the 1024x768 market and make your image/page 960px wide max.

[generalhavok]

Modern sites ignore the 800x600 users, and I think they are current to do so. So go for the 1024x768 market and make your image/page 960px wide max.
Tomm:

I can't agree with your point of view at this time. So-called "modern sites" aren't necessarily well-designed...so doing what's popular isn't necessarily a wise decision. Here's a quote from a recent study on browser resolution:
Most users have 1024x768 or higher, but a large minority have 800x600. These numbers do not include those who browse using web appliances.

It is important to note that (a) the display resolution says little about the size of the browser window, and (b) users can normally resize the browser window. Consequently no particular browser window size should be assumed.
The only way to know for sure is to do your own research, on your own website. If the number of visitors to YOUR website using 800x600 is low enough for you, feel free to design for larger resolutions. Unfortunately, there are a lot of visitors with vision impairments...including the many millions of older folks (over 40 like me). If your site has many international visitors, they might be browsing at a lower resolution for technical reasons.

If your visitors are a young, hip crowd of tech-savvy geeks, you might be safe going even larger than 1024x768...but the only way to know for sure is to research your own site.

[JackWolfgang]

Most users have 1024x768 or higher, but a large minority have 800x600. These numbers do not include those who browse using web appliances.

It is important to note that (a) the display resolution says little about the size of the browser window, and (b) users can normally resize the browser window. Consequently no particular browser window size should be assumed.
The only way to know for sure is to do your own research, on your own website. If the number of visitors to YOUR website using 800x600 is low enough for you, feel free to design for larger resolutions. Unfortunately, there are a lot of visitors with vision impairments...including the many millions of older folks (over 40 like me). If your site has many international visitors, they might be browsing at a lower resolution for technical reasons.

If your visitors are a young, hip crowd of tech-savvy geeks, you might be safe going even larger than 1024x768...but the only way to know for sure is to research your own site.

Even though my home monitor runs at a 1680x1050 pixel resolution, I will often run Firefox in a half-screen (approx 840x1050px), especially if I am working on something where I am referencing the web site and working on a document in the other half of the screen. So going with 960px wide is going to cause clipping in that situation for me. I maybe inclined to close the website if you haven't bothered to make a liquid layout that adapts to my changing the browser window size.

[flutem3]

I maybe inclined to close the website if you haven't bothered to make a liquid layout that adapts to my changing the browser window size.

Hi, Jack,

If you do the above, then I would guess that you might miss out on a lot of excellent information. :)

Many people do not know how to make a layout that adapts to your browser size...or it could be that their software does not allow them to do so. Everything on our website is at an absolute setting. There is no provision in the software for a relative setting which I think you are talking about.

I must still be a novice in many things because the resolution on my monitor 800 x 600. I seem to see other websites fine without having to make any changes. Occasionally, I will have to horizontal scroll like crazy. Of course, I don't know whether that is because the other website editor has made their website relative. But I know that is not true for lots of church websites. Many of us don't have the expertise yet.

I love Saturdays in the fall...college football. My dad was a graduate from Ohio State. He would certainly be looking forward to the game tonight with USC...and I am too. :D

Carol

[JackWolfgang]

I maybe inclined to close the website if you haven't bothered to make a liquid layout that adapts to my changing the browser window size.

[COLOR=Black]If you do the above, then I would guess that you might miss out on a lot of excellent information. :)

Many people do not know how to make a layout that adapts to your browser size...or it could be that their software does not allow them to do so. Everything on our website is at an absolute setting. There is no provision in the software for a relative setting which I think you are talking about.

I must still be a novice in many things because the resolution on my monitor 800 x 600. I seem to see other websites fine without having to make any changes. Occasionally, I will have to horizontal scroll like crazy. Of course, I don't know whether that is because the other website editor has made their website relative. But I know that is not true for lots of church websites. Many of us don't have the expertise yet.

Carol--

That may have been a hyperbole on my part, and you make a good point. Those of us that know how to, should, and we should be teaching and training so that the body of Christ gains.

I love Saturdays in the fall...college football. My dad was a graduate from Ohio State. He would certainly be looking forward to the game tonight with USC...and I am too. :D

It's certainly been a nice college football weekend for me. The University of South Florida, my alma mater, won, and Florida State University, my wife's alma mater and located in our adopted hometown, won. Very nice.