Log in

View Full Version : photoshop splice layout problem.


drosster
11-04-2011, 03:58 PM
Hello. I'm running into a bit of trouble with my photoshop layout in dreamweaver. the idea was to have my layout along with the splice images resize and adjust itself when the resolution changes, for example if my default layout is 1024*768, I would like the site to look the same when resolution drops down to 320*240 (mobile view) but no success. it just shows a piece of the site at low resolution. can some one give a helping hand please:confused:
deathbycheese
11-04-2011, 09:41 PM
Have you tried specifying widths, etc in percentage rather than fixed sizes?
auntnini
11-04-2011, 10:59 PM
I get upset when students are told to SLICE an Illustrator or Photoshop image to create a Web page layout. What you end up with is a <TABLE>, and we all know <TABLE> layouts are bad. What is worse, you end up with a table that has content in the <TR> <TD>cells</TD> </TR>, and students do not learn anything about formatting <TABLE>. For instance, a <TABLE> could be styled with % percentage widths instead of fixed pixel measurements.

You might want to look at http://www.maxdesign.com.au/articles/css-layouts/ http://www.net-kit.com/html5-css3-layout-tutorials-and-templates/ http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries http://www.css3.info/preview/media-queries/

I haven't gotten into styling for mobile-devices and CSS3 Media Queries. I think the "resolution" of the devices is higher than standard computer screens, while the width/height "size" is smaller.

Variable % percentage measurements I've been playing with can be seen at http://www.gerigeans.com or http://auntnini.webs.com.



#wrap { width: 85%; max-width:1000px; min-width: 50px; position: relative; background: transparent; /*background-color: rgba(255, 255,255, 0.25);*/ z-index:300; }
.textbox { width: 85%; max-width: 700px; min-width: 100px; height: auto;}
#space { position: relative; width: 95%; max-width: 700px; min-width: 20px; height: auto; margin: 20px auto; background: transparent }
#space img { width: 95%; max-width:400px; min-width: 10px; height: auto; margin: 5px auto 10px auto; }
drosster
11-05-2011, 04:38 AM
yes the layout is %. Your right Auntnini, I took the lazy way out and learn to create my layout in photoshop and now it's catching up to me. Where would I put the set of code you posted?
auntnini
11-06-2011, 08:21 PM
The CSS style rules could in external .css file linked to
<link rel="stylesheet" type="text/css" href="cssJS/home.css" media="all">
or could be in HTML tag
<style type+"text/css" media="all">embedded </style> in <HEAD>.

For now, http://www.gerigeans.com is in "limbo" so colors and such are wishy-washy, but you can easily view source code and external CSS file. The embedded CSS overrides the linked file to"temporarily" accommodate repositioned image in

#navbarContainer img { width: 95%; max-width: 633px; min-width: 25px; height: auto; }

As mentioned, I have not turned my attention to creating styles for mobile devices, but CSS3 Media Queries seem to be the way to go -- http://webdesignerwall.com/tutorials/css3-media-queries
http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

You might also want to look up "fluid" CSS layouts.
hawaiiwebdesign
11-06-2011, 09:35 PM
Scaling down a 1024x768 to a hand-held will most likely not work if your website uses any amount of text. You can't just scale down and assume it will still be usable.

You need to use CSS media queries to account for the different resolutions. Check out the 1140 grid system
auntnini
11-08-2011, 12:01 AM
For me, "resolution" conjures up PPI (pixels per inch) or DPI (half-tone print screen dots per inch), and "screen size" as total width/height in inches or pixels. But searching for "mobile devices' resolution" usually delivers "screen size" -- such as http://cartoonized.net/cellphone-screen-resolution.php.

For discussion about "pixel density" (ppi) and mobile design approaches, see http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes (posted 2 years ago).

Now it seems we also have to think "DP" ["The Android operating system is based on abstract 'dp' (density-independent pixel) units which are completely relative based on a 160 ppi screen density. "]