Web Page Design for all Screen Resolution.

J

jeret

New Member
Hi i have a web page designed and uploaded at livuniq.com, my design is completely graphics which is done in Photoshop and than in Dreamweaver.

i did my design on a 1280x1024 resolution and my monitor screen is 19'' inch. the web page displays nice and evenly at this settings but in other screen resolution for ex: 1440x900 it appears stretched. i think this is alright because i can't cater for all screen types out there.

what i need to know now is how do i add/make links on my link images?
i tried using the Map Tool to select the area an add the link, but the problem with this is when i view my webpage other than my screen type the link has moved to a different area of my webpage.

I hope someone can help me, and give me some insight on this. thank you.
:confused:
 
Phreaddee

Phreaddee

Super Moderator
Staff member
image maps are an outdated way of doing things.
1280 is still i'd suggest too big a min-size.
I also think you could make 95% of it NOT images. just use smart css.
again making a website wholly graphic is a technique from years gone past.

once you've got your head around that you'll be fine.
 
J

jumpingspider

New Member
Phreaddee said:
image maps are an outdated way of doing things.
1280 is still i'd suggest too big a min-size.
I also think you could make 95% of it NOT images. just use smart css.
again making a website wholly graphic is a technique from years gone past.

once you've got your head around that you'll be fine.
Click to expand...


This would help much on your problem! Good Luck!
 
C

constanthosting

New Member
It may be easier to get a simple css layout and then cut up and apply your images to the layout.

When I started out I located free themes that I liked the layout of then changed the images and text to my liking.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
Well my personal favourite, say for instance a 3 col layout is...
Min960 _ max1440 flexible.
All three columns are centred once they reach their max width within another three columns
Which stretches to 1920. It is then centred for any resolution higher than that.
For smaller sizes (like mobile) use media queries.
So my min/max fits 15" 4:3 up to 19" 16:9 the centred columns fits snugly on a 22" imac, and larger resos get that too, just centred.
The min also suits ipads, and iphones android et al are hit with the media queries...
I wont tell you how to code that but it works a charm.
 
n1c0_ds

n1c0_ds

New Member
xaos24 said:
For me my suggestion is don't use px as your unit of measurement in css, just use %.
Click to expand...

BAD IDEA. Nowadays, we have 1920px-wide monitors as well as 400px-wide smartphones, and everything inbetween.

If you go on Wikipedia with a 1080p monitor, you'll have to zoom in or resize your window to have readable line widths.

Instead, use media queries to build responsive designs (google that, it's what everyone is talking about).
 
You must log in or register to reply here.
Top