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;
}

Reset Reloaded

1. html, body, div, span, applet, object, iframe,
2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. del, dfn, em, font, img, ins, kbd, q, s, samp,
5. small, strike, strong, sub, sup, tt, var,
6. dl, dt, dd, ol, ul, li,
7. fieldset, form, label, legend,
8. table, caption, tbody, tfoot, thead, tr, th, td {
9. margin: 0;
10. padding: 0;
11. border: 0;
12. outline: 0;
13. font-weight: inherit;
14. font-style: inherit;
15. font-size: 100%;
16. font-family: inherit;
17. vertical-align: baseline;
18. }
19. /* remember to define focus styles! */
20. :focus {
21. outline: 0;
22. }
23. body {
24. line-height: 1;
25. color: black;
26. background: white;
27. }
28. ol, ul {
29. list-style: none;
30. }
31. /* tables still need 'cellspacing="0"' in the markup */
32. table {
33. border-collapse: separate;
34. border-spacing: 0;
35. }
36. caption, th, td {
37. text-align: left;
38. font-weight: normal;
39. }
40. blockquote:before, blockquote:after,
41. q:before, q:after {
42. content: "";
43. }
44. blockquote, q {
45. quotes: "" "";
46. }

Black berry_Microsite upload

9200 ----Two Version Below (dark & light)

9200 version

Advance------Two Version Below (light & dark)

BOLD

9500

Design and Layout for the Web_Metro

Design and Layout for the Web_Canadian Tire

Techniques

oLayout and planning

oIdentifying key elements

oPlanning for technologies

oInteractivity and navigation

oDeveloping a wire frame