Feb 16, 2008 10:06 pm css-discuss.incutio.com/?page=UsingPercent
anyone wanna answer a web design question?
Posted on Feb 16, 2008 07:30 pm
fortymile
Member Since: Jan 18, 2003
if you design a site at a bad screen resolution (too big for many monitors)and now deem it necessary to resize it, how is that done? suppose that two of the images on the site are 'title bar' sorts of jpegs, which stretch all the way across a bigger monitor at 1024 res. their width is of course set to be that length, cuz they're pictures that have that length: they were designed for a big resolution site so they were 'built long.' so that probably means you need to redo those photos in photoshop (so that any text within the graphics doesn't get mangled when you try to just simply resize the image)?
it seems like you would need to basically redo the website from scratch, yes? mainly because of the pictures?
i also hear about how CSS can let you work in a percentage-based thing so that the site resizes as the browser window is minimized and maximized. it looks like HRC does that, and when i do it i'm wondering how it works, not in terms of the code necessarily, but how the image of, say, the title bar doesn't get 'squashed' in the process and become unreadable. does this mean that if i find some way to convert html to css, i can keep this designed-for-high-resolution-monitor website design and just implement this percentage-based auto-resize thing?
if that's all one would need to do, then i have to ask if xhtml 1.0 transitional is the same as CSS. i'm prolly gonna get a book on site design today. but in the meantime, what would you do if you had a site that was originally designed at a too-big resolution and just wanted to get it working fast?
[ Back to Top ]
Feb 16, 2008 10:24 pm Yeah, do all that if you wanna do it the hard way...typically (HRC not included) I don't let any site go out that doesn't go down to at least 760 pixels or so gracefully. if images have to be bigger than that, show thumbnails that open a bigger version in a new window or layer.
Feb 17, 2008 01:03 am thiss sounds promising: "One suggestion which works well is to scale your images to the largest size you can imagine anyone viewing, and then let browsers scale them down, rather than up."
cause that's what happened. images were created for a 1024x768 site, they stretch all the way horizonatally across the page, and this seems to be saying that the scale-down would work. i'd have to test it, though. my images have text in them.
anyone know if there's a way to convert html to css automatically? or anyone know a good walkthrough on how to get started with this? i didn't make it to the bookstore today. not sure how to begin.
Feb 17, 2008 01:04 am also i still am not quite sure if this css percentage means that the site would adapt simply to lower screen resolutions as well, or not. cuz that's really the main issue.
Feb 17, 2008 01:06 am HTML and CSS work together, it's not one or the other. Scaling down can result in bad appearance, which is why I prefer thumbnails, because I do not like relying on client side code...with as paranoid as people are sometimes they disable their client side stuff at time, support for the more advanced "trickery" is sketchy at times between the major, and minor browsers...
As far as resolutions go, well, the screen will only display the number of colors they are set to do, not much you can do about that.
Feb 17, 2008 01:15 am I guess the main reason I am looking at it from a more simplistic way is because, when you start digging in to the really advanced CSS, JavaScript, DOM Objects and such things it starts getting trickier.
With some sites, at some times, it worth the effort, with some sites it's not. I mean, look at HRC, it's, on the whole, a very simplistic design because doing much more wouldn't help the purpose of the site, and would also increase the pain-in-the-*** factor to me, so why bother.
However, when it matters, it's worth it. Look at the star rating for the songs...that's actually a very cool AJAX powered little script, but there it's necessary...
Just using HRC as an example of saying to weigh your options and figure out the cost/benefit of the effort put in.
Feb 17, 2008 01:20 am Most of the sites I visit look great at 1280 X 1024.
Feb 17, 2008 05:23 am i don't understand what you're saying, db. the site i'm working on is extraordinarily simple. i just want it to display on peoples' monitors without the horizontal scroll bar, which makes people mad. that's the whole issue here.
i don't know what you mean by thumbnails. the only graphics are a vertical navigation bar on the left composed of buttons (that looks fine) and a top 'banner bar' somewhat like the black bar at the top of HRC here. the top bar in my site is deeper vertically 9extends down the page further), but it stretches from the left to the right of the screen, to the edge, like HRC's. my issue is that when you set your monitor to a lower screen resolution, or if you have a smaller monitor (i guess), the graphic does not fit on the screen. it gets cut off, and the horizontal scroll bar appears. i want to avoid that.
i know very little about web design. but it's something i do want to get into via little steps. the first site i built had one simple graphic at the top, was aligned left, and had simple links down the left side instead of buttons. this time i made a title bar at the top which is graphically cooler, but which is essentially just a chopped up single image, the pieces of which are then placed in cells. for example, the nav buttons (on the left, going up and down the left margin) slightly protrude up over the top banner image, but just slightly. that necessitated that i split the top banner image into two. the top part of the image, and then an 8th or 16th inch horizonatal sliver that extends from the edge of the topmost button over to the right of the screen. the effect is of one image, but there's button functionality overlaid ever so slightly over it on the left side. just for the top button.
but that's all the site is, besides my main text. each page (there are seven) is identical to the others, with the exception of the text content. i just want that title bar to extend to the right edge of everyone's screen, no matter what their screen resolution or monitor size, etc. cuz it sucks to load the site up on a computer with a small monitor or with a very low max resolution setting and to then see the title bar 'cut off.' it obliterates half of the site's name, and that left-right scrollbar appears.
it's been really hard to find info on what to do about this, because it's hard to know what keywords to use when searching google. i haven't had any luck with it. so this thread is not necessarily a cry for help, it's more like a request for some very general advice and for what to think about specifically.
this is for me, not a client. i know i want to host the button images and the title bar graphics on the host itself. plus the seven .html pages. i just want to figure out how to get it displaying nominally without doing a whole bunch of extra work.
sorry for all this; i just feel like maybe i didn't explain it clearly enough.
Feb 17, 2008 05:36 am The fact you do know little about it is why I am suggesting the easy methods.
The text will flow at any reso...the tap banner you can really only have about 750 pixels of "image" and then use a "background image" or "background color" as the floating element that flows to width.
The top of HRC only has the logo image, it's pretty small, but it lives in an HTML table that is set to span 100% width, and the table cell has a background color property of #000000 (black) so it looks kinda like one big image spanning the length, but it's not.
By "thumbnail" I mean like I do the photo gallery here...it shows a small version (thumbnail) and clicking it opens the full size version...which I'd make a max of 750 or so pixels if I were you.
Feb 17, 2008 08:11 am I think the problem is probably the title image is essentially the width of the screen. HRC's is only 180px and then relys on the client to correctly display the text... however if you're using a crazy font you can't do that... it's easier to just use a scaling image...
Feb 17, 2008 08:38 am Yeah, could be, then it's simply a matter of weighing form vs function...
I am not a fan of scaling personally...I'd sooner make a sacrifice on the header font or whatever.
Feb 17, 2008 05:34 pm oh wow, cool, i understand your last post, db. that makes a lot of sense. i don't know if i can do that sort of thing though, because the background color of my title bar has a left to right gradient fade which is key to the site's look. maybe i could look at the color at the right edge of the image, get the html number code from it, and use that as a background color. so that when the new 750 px image is viewed on bigger monitors, everything to the right of it will simply fill in with the lighter color that the fade fades to. of course, i'd have to see how that looks, because it would throw off the fractionality of the gradient (it would no longer be about a 2/3 dark to 1/3 light fade, but would look more like 50/50 on big monitors).
so what would happen if i re-did the site from square one and set that image's maximum width to 750 and then did a 100% percentage thing? it would be stretched to fit bigger monitors, right? but also, on the left of the image, i have a sentence of white text which is part of the image (added into the image and made a part of it in a photo editing program) and i'm concerned the text will stretch and get weird and wide because it's part of the image itself.
Feb 17, 2008 05:42 pm Yeah, gradients and header designs need to be originally designed with this in mind...most of my web sites do have better designs than HRC, using such visual effects, I just do what you mentioned, make sure the visual design is completed by 750 pixels so I can fill the rest with a single color, or, make it a repeatable design, such as maybe a vertical or horizontal lines or something...
I wouldn't stretch the image, just align the image to the left and stretch the table cell with a background image or color.
Of, if you can, make the header image a background image...make it that 1024 image, as long as no text is in the last couple hundred pixels it'll just disapear in the table cell, not creating the scroll bar.
Feb 17, 2008 06:24 pm this is great info...
couple more questions...
1. you say to go 750, which comes in 18 pixels under the mark of 768. so would the best target to try to hit when starting a site from scratch therefore be 1016 x 750?
2. i'm hearing all this advice but still can't think of a way to do it all because of the design of the title bar, which has different things going on on the left and on the right. if anyone wants to see what i mean, tinyurl.com/2pforu
3. you said that html and css work together. if so, would there be a way to simply take the code and learn a few appropriate percentage tags and drop them into the code, without redesigning the entire site? if so, i should be able to teach myself that if i do a little reading.
Feb 17, 2008 07:47 pm 750, in my references is width, 768 in your reference is height.
I typically design hard-width sites (sites that do not float to window width) between 750-780...this allows for an 800x60 resolution allowing a few pixels for scrollbars and application window frame.
You didn't design the site with this in mind, so, there may not be a graceful way to do it in your situation. You may have to go back to the drawing board and redesign a little bit to make it possible.
As far as HTML, CSS, JavaScript and such...they are all client-side languages (run in the browser, not on the server) and are complimentary. HTML is basic structure and layout, CSS is styling and positioning the HTML elements (font colors, sizes, background colors, div positions, etc.)...JavaScript works as the great communicator between the two to make them more dynamic or interactive at times.
I won't dive in and explain the solution zek offered because it is not something I think should be done, and personally, have little faith in the solution. I have scaled images before, don't really like the results...unless you use vector, but thats another can o worms.
You have a reasonably easy solution by simply making the gradient stop a few pixels sooner. I'd uput the title in the top bar as well as the "mission statement" or whatever ya wanna call it...then shrink that bottom one, that header is way too tall in my opinion...in 800x600 it's not only width, but there is only three lines of visible content in the first fold...
IMHO.
Feb 17, 2008 08:19 pm i designed the header based on a free template. that is, i didn't use the template, but i copied the height of the header bar. my computer is set to 1280 by 800, and that's the look i want at that resolution, and this may be totally a stupid thing to say, but i basically have no sympathy for anyone who's surfing the net at 800 by 600. i don't need to draw hundreds of clients anyway, just a few dozen per month. in other words, if a few people are stuck at very low resolutions, then it just wasn't meant to be, is my thinking. so i'm thinking i should lean more toward designing it the way i want it to look for mid-to-high res viewers.
Feb 17, 2008 10:51 pm I know there are very few sites I visit that look crap on my displays with the rez at 1440 x 900. HRC looks killer on them. But it freaks me out at work when I open it at a lower rez now. or even on the wifes PC.
Feb 19, 2008 09:09 am I just realized this site has some horizontal scrolling issues in IE on the forum...I'll have to look in to that.
forty, email me if you get this, I may be able to help you in your quest for knowledge a little bit...
Feb 19, 2008 09:37 pm hey db, alert me here first if you do in fact respond to the email i just sent. i don't check that email regularly, but will remember if i see something here telling me to....
|
Related Forum Topics: |
If you would like to participate in the forum discussions, feel free to register for your free membership.