Small Screen Design with Iphone

Overview

For this project you will be redesigning your mockup web sites for mobile or proposing a device application.

• We will be working with the iPhone screen size and interface.

Follow the link below to research the technical specifications of the iPhone. http://www.apple.com/iphone/specs.html

Small Screen Design with Iphone

Concepts #1

Design mock up #1

Ragged Floats

source from here

Why use this method?

• It does away with the need of slicing images.
• Easy to change parameters in case the text does not fit well.
• More compatible with 5.x browsers. Eric's method has a problem with IE5.0 placing the images above text and Opera 5.x placing text above the images. This technique shows up almost similar in most browsers including the latest ones.
• It degrades better than Eric's method(if you use divs, which I think are preferrable).

Assignments for Sony Ericsson

CASE WORK 1--Big Picture Concepts

--Initial Design

--Feed back &Updated

CASE WORK 2----Design Concept

----Initial Design

----Feed back &Updated

^^ Mock it Up from Chezvous

PRACTICE--- IKEA

wk06_Fixed layout & Fluid Layout

Three column fixed layout structure using CSS

Step 1: HTML file structure
Create a new page, then copy and past this code within the tag and save it as index_3colFixed.html

Step 2: CSS file
Now, create a new CSS file called main.css with the CSS below copied into it, and link it to the index_3colFixed.html file


/* ------------------------------
HTML Redefine Tags
------------------------------ */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}

input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}

a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}

/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container has an absolute width (780 pixel) */

#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:28px;}
#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;}

#main{width:auto; display:block; padding:10px 0;}
#column_left{width:460px; margin-right:20px; float:left;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}

/* ------------------------------
CUSTOM CLASSES
------------------------------ */

/* Add here your custom classes ... */

sources from http://john-crisp.com/dma500/phpBB3/viewtopic.php?f=13&t=745

Creating a 3 Col FLUID Layout & More

Attach CSS style sheet

.xouter3{
width:80%;
border:1px solid #000;
float:left;
margin:15px 0 15px 9%;
}
.xleftcol3{
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol3 {
overflow:hidden;
background:#eff2df;
}
* html .xmiddlecol3{float:left}
* html .xmiddlecol3 .xinner3{width:100%;}

.xrightcol3 {
float:right;
width: 33%;
background:#d2da9c;
position:relative;
}

sources from http://pmob.co.uk/pob/three-columns-fluid.htm

week06_Chezous Mock up

#POINTS

1.Reset color: press shift+F5 to change the foreground
2.Create a Rectangle and vector mask with black color filled in.( shape layer& 50%fill)
3.Open Signature image,select all,copy &past to the currently layer,change the mode to multiply

The Three Column layout

body {
margin:0;
padding: 0;
}
#header {
height: 20px;
background-color: #cecece;
border-bottom: 1px solid #969696;
}
#content {
position:relative;
width:auto;
top: 10px;
margin:0px 330px 0px 250px;
background-color: #ffffff;
padding:10px;
}
#side1 {
position:absolute;
width:200px;
top:30px;
left:10px;
padding:10px;
}
#side2 {
position:absolute;
width:280px;
top:30px;
right:10px;
padding:10px;
}