devicemanager
Registered
I am going to revamping my website, but not quite sure what scrren size it should be optimized for. Is there a way that it could adjust itself to fit every screen size.
Web Design
- Thread starter devicemanager
- Start date
RE: Web Design
EVERY screen size???
No.
600x800 and 1024x768???
Yes.
Some people use a detection script, and have two versions of their site. Most people design for 600x800 or 1024x768. I see a lot more sites using 1024x768.
The problem with trying to get your site to look good at both resolutions lies within the use of tables. If you are throwing graphics in a table and want them to appear without any space between them, need to keep them from moving when the browser is resized, or need to align text, you need to use a fixed table width. If you use percentages, the percentage changes when the browser window is resized, and with varying screen res.
Without tables, your design is limited since you cannot wrap text around an image with simple HTML. You can use layers, but that's even more complicated.
You can use a combination of percentages, fixed widths, and nested tables to get the site to look great at both 600x800 and 1024x768.
Kale
EVERY screen size???
No.
600x800 and 1024x768???
Yes.
Some people use a detection script, and have two versions of their site. Most people design for 600x800 or 1024x768. I see a lot more sites using 1024x768.
The problem with trying to get your site to look good at both resolutions lies within the use of tables. If you are throwing graphics in a table and want them to appear without any space between them, need to keep them from moving when the browser is resized, or need to align text, you need to use a fixed table width. If you use percentages, the percentage changes when the browser window is resized, and with varying screen res.
Without tables, your design is limited since you cannot wrap text around an image with simple HTML. You can use layers, but that's even more complicated.
You can use a combination of percentages, fixed widths, and nested tables to get the site to look great at both 600x800 and 1024x768.
Kale
devicemanager
Registered
RE: Web Design
I am kind of a novice so bare with me please. When I use the tables, it leaves white spaces all around the outside and where the joining tables meet, but I think I did not start off with a background color, I have to check. But when I use the layers I can make them fit from corner to corner. But, are you suggesting that I make one site for each resolution? How does that work.
I am kind of a novice so bare with me please. When I use the tables, it leaves white spaces all around the outside and where the joining tables meet, but I think I did not start off with a background color, I have to check. But when I use the layers I can make them fit from corner to corner. But, are you suggesting that I make one site for each resolution? How does that work.
RE: Web Design
For what you are doing, I would suggest making it at either 600x800 OR 1024x768, whichever you are mroe comfortable with, but not both. If you want more people to see it without having to scroll, 600x800 is the way to go.
And yes, you can have two versions and redirect to the proper page depending on screen res. Or you can code it so it changs the css file associated with the website. There are lots of options.
I suggest you do some reading about HTML tables. They are confusing at first, but having a good understanding of them is essential to good web design IMHO.
You can try using layers if that works for you in your WYSIWYG editor, but different browsers are gonna treat them differently which can screw up the design. Sometimes it's minimal, other times it's big difference.
Kale
For what you are doing, I would suggest making it at either 600x800 OR 1024x768, whichever you are mroe comfortable with, but not both. If you want more people to see it without having to scroll, 600x800 is the way to go.
And yes, you can have two versions and redirect to the proper page depending on screen res. Or you can code it so it changs the css file associated with the website. There are lots of options.
I suggest you do some reading about HTML tables. They are confusing at first, but having a good understanding of them is essential to good web design IMHO.
You can try using layers if that works for you in your WYSIWYG editor, but different browsers are gonna treat them differently which can screw up the design. Sometimes it's minimal, other times it's big difference.
Kale
devicemanager
Registered
RE: Web Design
Click on the link under my sig, tell me what you think... It is going to get a little more detial for the home page, but that will come as I get more exerienced.
Click on the link under my sig, tell me what you think... It is going to get a little more detial for the home page, but that will come as I get more exerienced.
RE: Web Design
Your pics are taking a LONG time to load, and I'm doing 3.5MB/sec, so it's not my end. I think it is a bottle neck on your end somewhere. They are a decent size (100K), but should load much faster.
I would lose the Flash until you have a reason to actually use it and stick with a simple rollover, or nix the rollover altogether.
The alignment looks fine on most major Windows browsers, but the older ones will screw it up when resized. I wouldn't recommend using layers the way you are doing on that page, I would do something like this instead:
<table width = "730">
<tr>
<td width = "730" align = "center" colspan = "2">
Welcome to www.devicemanager.net
</td>
<tr>
<td width = "100">
<a href = "link#1">Link 1</a>
<a href = "link#2">Link 2</a>
<a href = "link#3">Link 3</a>
<a href = "link#4">Link 4</a>
<a href = "link#5">Link 5</a>
</td>
<td width = "630">
This is the wall behind the bar. I am getting ready to put flourescent lighting up behind that header.
There is going to be a huge mirror on the will to cast light from the flourescents forward.
In this will at the bottom left will be a cutout for a fridge and a trash can.
</td>
</tr>
</table>
TR = Table Row
TD = Table Data
Notice how I had to span two colums in order to get the "Welcome to www.devicemanager.net" message to position correctly. (colspan = "2")
With the newer browsers, you are probably safe using layers, but using a table like the above is the "SIMPLE" way..LOL! A lot of people are using Iframes now too, but I try to keep it as simple as possible (i.e. tables). Quite honestly, if you design for IE 5+ and 600x800 res you're probably reaching over 90% of the people on the web.
It is majorly frustrating to position elements in a table if you don't have someone showing you WHY something is screwed up. Believe me, I know.
Kale
Your pics are taking a LONG time to load, and I'm doing 3.5MB/sec, so it's not my end. I think it is a bottle neck on your end somewhere. They are a decent size (100K), but should load much faster.
I would lose the Flash until you have a reason to actually use it and stick with a simple rollover, or nix the rollover altogether.
The alignment looks fine on most major Windows browsers, but the older ones will screw it up when resized. I wouldn't recommend using layers the way you are doing on that page, I would do something like this instead:
<table width = "730">
<tr>
<td width = "730" align = "center" colspan = "2">
Welcome to www.devicemanager.net
</td>
<tr>
<td width = "100">
<a href = "link#1">Link 1</a>
<a href = "link#2">Link 2</a>
<a href = "link#3">Link 3</a>
<a href = "link#4">Link 4</a>
<a href = "link#5">Link 5</a>
</td>
<td width = "630">
This is the wall behind the bar. I am getting ready to put flourescent lighting up behind that header.
There is going to be a huge mirror on the will to cast light from the flourescents forward.
In this will at the bottom left will be a cutout for a fridge and a trash can.
</td>
</tr>
</table>
TR = Table Row
TD = Table Data
Notice how I had to span two colums in order to get the "Welcome to www.devicemanager.net" message to position correctly. (colspan = "2")
With the newer browsers, you are probably safe using layers, but using a table like the above is the "SIMPLE" way..LOL! A lot of people are using Iframes now too, but I try to keep it as simple as possible (i.e. tables). Quite honestly, if you design for IE 5+ and 600x800 res you're probably reaching over 90% of the people on the web.
It is majorly frustrating to position elements in a table if you don't have someone showing you WHY something is screwed up. Believe me, I know.
Kale
devicemanager
Registered
RE: Web Design
Thanks man! I will take a look at that code tomorrow - I am hosting the site on my PC for now. I have to find a new home for it soon. I have 3.2 down and 256 up.
Thanks again!
Thanks man! I will take a look at that code tomorrow - I am hosting the site on my PC for now. I have to find a new home for it soon. I have 3.2 down and 256 up.
Thanks again!
RE: Web Design
I've had lots of issues with tables because the td widths didn't add up. Whether it a fixed pixel width or percentage, they need to add up to whatever is specified by the table tag. If you use cellspacing, that needs to be included in the td width. It'll frustrate the hell out of you if they don't add up!!!
Kale
I've had lots of issues with tables because the td widths didn't add up. Whether it a fixed pixel width or percentage, they need to add up to whatever is specified by the table tag. If you use cellspacing, that needs to be included in the td width. It'll frustrate the hell out of you if they don't add up!!!
Kale
devicemanager
Registered
RE: Web Design
That's pretty cool - How do you get a table to be inserted to the left of another table. I was only able to get it to go underneath the last table. That is the only reason why I went with the layers. When would one use the layers? Why do you think I should not use the flash buttons? I like them...
That's pretty cool - How do you get a table to be inserted to the left of another table. I was only able to get it to go underneath the last table. That is the only reason why I went with the layers. When would one use the layers? Why do you think I should not use the flash buttons? I like them...
RE: Web Design
I don't think you should use Flash becuase IMHO it is not necessary. It's just one more thing the user has to have installed. If you like them keep em.
Getting a table to the left of another table is a bit tricky. You either need to create a single table with the correct TDs and TRs, or you simply nest a new table inside an existing table cell (td).
Something like this:
<table>
<tr>
<td>
Some content
</td>
<td>
<table>
<tr>
<td>
Some more content
</td>
</tr>
</table>
</td>
</tr>
</table>
Kale
I don't think you should use Flash becuase IMHO it is not necessary. It's just one more thing the user has to have installed. If you like them keep em.
Getting a table to the left of another table is a bit tricky. You either need to create a single table with the correct TDs and TRs, or you simply nest a new table inside an existing table cell (td).
Something like this:
<table>
<tr>
<td>
Some content
</td>
<td>
<table>
<tr>
<td>
Some more content
</td>
</tr>
</table>
</td>
</tr>
</table>
Kale