This is my mobile website for SoBos. It was challenging consider how much information is suppose to be in such a small screen. I think most viewers that are using the mobile site for SoBos are members, therefore the Log In form is highlighted in its homepage. Then I divided the functions into two categories, the FIND menu and the others.
for the landing page of Recipes, I have a search bar where other most popular recipes are displayed underneath it.
I was going to redesign AMC theatres for the midterm project, but right before I started, the company just realized that their website is needed to reconstruct. amctheatres.com/ is now under construction.
Therefore, I ended up with holidayinn.com. The company has recently redo its corporate identity, included its website. I personally hate the new logo, the green is just too organic.
I respect and agree with the new website’s direction. They change the navigation a bit where they combined Reservation and Group and Meeting. So i did the same and in addition I move Customer Service to the main navigation. I change the color themes from their green and blue to green and champagne, so it doesn’t look too organic.
The other challenge is the forms. I don’t have any code background so it is hard to change the looks of the drop down icon, etc..
Hopefully my design is more elegant and hotel-like.
Here are my three layouts for this week’s assignment. This is a very useful technique, hopefully in the near future I am able to custom the style more.I don’t know how to upload the html pages I created, therefore these are only the screenshots I took. These pictures appear to be different size because I needed to zoom out each one in a different scale to get the whole layout, but they are actually the same size.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>2-column web page</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”en-us” />
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1>This is the header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
</div>
<div id=”navigation”>
<h1>This is the navigation </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
</p>
</div>
<div id=”content”>
<h1>This is the content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.nim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.nim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
</div>
<div id=”footer”>
<h1>This is the footer</h1>
</div>
</div>
</body>
</html>
____________________________________________________________
body { font-size: 62.5%;
}
#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
background:url(“images/yuyuyu_03.gif”) repeat-y;
}
#header {
height: 150px;
background-color: #666;
z-index: 9;
}
#navigation {
width: 260px;
float:left;
background-color: #6D5F6D;
}
#content {
width: 730px;
float:left;
top:0px;
background-color: #E1E55A;
}
#footer {
clear:both;
background-color: #666;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
font-size:1.6em;
font-weight:bold;
letter-spacing:1px;
padding-left: 20px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
line-height:1.7em;
padding-left: 20px;
}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>3-column web page</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”en-us” />
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1>Menu</h1>
<h1>Price</h1>
<h1>Service</h1>
<h1>Promotion</h1>
<h1>Event</h1>
<h1>Business Hour</h1>
<h1>Locations</h1>
<br/>
<br/>
<br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
</div>
<div id=”threecolwrap”>
<!–encloses the three columns–>
<div id=”twocolwrap”>
<!– encloses the left and center columns–>
<div id=”navigation”>
<h3>2009 August </h3>
<h3>2008 March</h3>
<h3>2007 April</h3>
<h3>2006 </h3>
<h3>2005 </h3>
<h3>2004 </h3>
<h3>2003 </h3>
<h3>2002 </h3>
<h3>2001 </h3>
<h3>1999 </h3>
</div>
<div id=”content”>
<h1>This is the content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
</div>
</div>
<!–end of twocolwrap–>
<div id=”right_side”>
<h2> Westwood </h2>
<h2> Venice </h2>
<h2> Santa Monica </h2>
</div>
</div>
<!–end of threecolwrap div–>
<div id=”footer”>
<h1>This is the footer</h1>
</div>
</div>
</body>
</html>
_________________________________________________________
body {
font-size: 62.5%;
margin-top:25px;
}
* {margin:0; padding:0;} /* this tag is added globally*/
#wrapper {
min-width:670px; max-width:990px;
margin-left:auto;
margin-right:auto;
}
#header {
width:auto;
height: 300px;
background-color: #6d5f6d;
padding-top:30px;
padding-right:20px;
padding-left:15px;
}
#threecolwrap {
float:left;
width:100%;
background-color: #e1e55a;
}
#twocolwrap {
float:left;
width:100%;
display:inline; /* stops IE doubling margin on float*/
margin-right:-170px; /* neg margin move */
}
#navigation {
width:300px;
float:left;
background-color: #e1e55a;
padding-top:20px;
display:inline; /* stops IE doubling margin on float*/
}
#content {
width:auto;
top:0px;
margin-left:300px;
margin-right:170px;
padding-top:20px;
padding-right:20px;
padding-left:10px;
padding-bottom:20px;
height:1%;
background-color: #099;
}
#right_side{
float:left;
width:170px;
display:inline; /* stops IE doubling margin on float*/
background-color: #e1e55a;
padding-top:20px;
}
#footer {
clear:both;
width:100%;
background-color: #666;
}
h1 {
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:1.6em;
font-weight:bold;
letter-spacing:1px;
padding-left: 20px;
text-decoration: underline;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:1.6em;
font-weight:regular;
letter-spacing:5px;
padding-left: 20px;
padding-right: 20px;
text-decoration: underline;
text-align:right;
color: #666;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:1.6em;
font-weight:regular;
letter-spacing:5px;
padding-left: 20px;
padding-right: 20px;
text-decoration: underline;
text-align:left;
color: #666;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
line-height:1.7em;
padding-left: 20px;
color: #FFF;
}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>3-column web page</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”en-us” />
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1>Menu</h1>
<h1>Price</h1>
<h1>Service</h1>
<h1>Promotion</h1>
<h1>Event</h1>
<h1>Business Hour</h1>
<h1>Locations</h1>
<br/>
<br/>
<br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
</div>
<div id=”threecolwrap”>
<!–encloses the three columns–>
<div id=”twocolwrap”>
<!– encloses the left and center columns–>
<div id=”navigation”>
<h3>2009 August </h3>
<h3>2008 March</h3>
<h3>2007 April</h3>
<h3>2006 </h3>
<h3>2005 </h3>
<h3>2004 </h3>
<h3>2003 </h3>
<h3>2002 </h3>
<h3>2001 </h3>
<h3>1999 </h3>
<h3>2009 </h3>
<h3>2008 </h3>
<h3>2007 </h3>
<h3>2006 </h3>
<h3>2005 </h3>
<h3>2004 </h3>
<h3>2003 </h3>
<h3>2002 </h3>
<h3>2001 </h3>
<h3>1999 </h3>
<h3>2009 </h3>
<h3>2008 </h3>
<h3>2007 </h3>
<h3>2006 </h3>
<h3>2005 </h3>
<h3>2004 </h3>
<h3>2003 </h3>
<h3>2002 </h3>
<h3>2001 </h3>
<h3>1999 </h3>
<h3>2009 </h3>
<h3>2008 </h3>
<h3>2007 </h3>
<h3>2006 </h3>
<h3>2005 </h3>
<h3>2004 </h3>
<h3>2003 </h3>
<h3>2002 </h3>
<h3>2001 </h3>
<h3>1999 </h3>
</div>
<div id=”content”>
<h1>This is the content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.Starting the creative process, Defining Smart Design, Reviewing Site Goals, Developing Concepts, Design for your audience, Presenting Design and Gathering Feedback, Confirming Flow and Functionality, Testing Functionality, Designers as Problem Solvers, Creating Graphic Templates, Creating a Design Style Guide (pages 118- 140) from Web ReDesign 2.0
Starting the creative process, Defining Smart Design, Reviewing Site Goals, Developing Concepts, Design for your audience, Presenting Design and Gathering Feedback, Confirming Flow and Functionality, Testing Functionality, Designers as Problem Solvers, Creating Graphic Templates, Creating a Design Style Guide (pages 118- 140) from Web ReDesign 2.0
</p>
</div>
</div>
<!–end of twocolwrap–>
<div id=”right_side”>
<h2> Westwood </h2>
<h2> Venice </h2>
<h2> Santa Monica </h2>
</div>
</div>
<!–end of threecolwrap div–>
<div id=”footer”>
<h1>This is the footer</h1>
</div>
</div>
</body>
</html>
____________________________________________________________
body {
font-size: 62.5%;
margin-top:25px;
}
* {margin:0; padding:0;} /* this tag is added globally*/
#wrapper {
min-width:670px; max-width:990px;
margin-left:auto;
margin-right:auto;
background-color: #099;
}
#header {
width:auto;
height: 300px;
background-color: #6d5f6d;
padding-top:30px;
padding-right:20px;
padding-left:15px;
}
#threecolwrap {
float:left;
width:100%;
background:url(“images/right7.png”) repeat-y right;
}
#twocolwrap {
float:left;
width:100%;
background:url(“images/left.png”) repeat-y left ;
display:inline; /* stops IE doubling margin on float*/
margin-right:-170px; /* neg margin move */
}
#navigation {
width:300px;
float:left;
background-color: #6995B7;
padding-top:20px;
display:inline; /* stops IE doubling margin on float*/
}
#content {
width:auto;
top:0px;
margin-left:300px;
margin-right:170px;
padding-top:20px;
padding-right:20px;
padding-left:10px;
padding-bottom:20px;
height:1%;
background-color: #099;
}
#right_side{
float:left;
width:170px;
display:inline; /* stops IE doubling margin on float*/
background-color: #e1e55a;
padding-top:20px;
}
#footer {
clear:both;
width:100%;
background-color: #666;
}
h1 {
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:1.6em;
font-weight:bold;
letter-spacing:1px;
padding-left: 20px;
text-decoration: underline;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:1.6em;
font-weight:regular;
letter-spacing:5px;
padding-left: 20px;
padding-right: 20px;
text-decoration: underline;
text-align:right;
color: #666;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:1.6em;
font-weight:regular;
letter-spacing:5px;
padding-left: 20px;
padding-right: 20px;
text-decoration: underline;
text-align:left;
color: #666;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
line-height:1.7em;
padding-left: 20px;
color: #FFF;
}
