sobos mobile device
It is difficult to design engaging content with the size and graphic limitations. The iphone interface made this somewhat easier, but don’t know if it would stand up to a cross-device audit. The simplicity of the mobile devices we viewed in lecture to the fictional mobile proposals being brainstormed for the sobos site. Without the technical filter of what is possible or what capability I would have to include, this submission is just fantasy.
Given these limitations, I focused on representing all of our mobile highlights from our sitemap plan.
I tried to incorporate simple elements like color scheme, logo and design cues where possible.
This exercise made me wonder if I’m missing some mobile opportunities? ie: an exercise/feeding widget that can be logged to a pet’s account from anywhere? The label compare that can be accessed while shopping?
Here is a sketch of the mobile Home screen, a Recipe screen, a Pet Blogging screen, and a Find Doggie Park screen:
HTML/CSS Handcoding Exercises
Please see my comments to discuss the various challenges/discoveries on this exercise as they have been coded inside each web page. See the screen shots that accompany each code to read the comments.
I used the same style.css for the 2col and 3col fixed pages (1 graphic spanning horizontally):
CSS STYLES:
body {
font-size: 62.5%;
margin-top:25px;
}
* {margin:0; padding:0;} /* this tag is added globally*/
#wrapper {
margin-left:auto;
margin-right:auto;
width: 990px;
}
#header {
min-width:760px; max-width:990px;
height: 150px;
background-color: #996600;
color: #FFF;
}
#threecolwrap {
float:left;
min-width:760px; max-width:990px;
width:100%;
background:url(“images/3colBkgrdFixed.jpg”) repeat-y;
display:inline; /* stops IE doubling margin on float*/
margin-right:-170px; /* neg margin move */
}
#twocolwrap {
min-width:760px; max-width:990px;
float:left;
display:inline; /* stops IE doubling margin on float*/
margin-right:-170px; /* neg margin move */
background:url(“images/2colBkgrd.jpg”) repeat-y;
}
#navigation {
width:150px;
float:left;
background-color: #663333;
display:inline; /* stops IE doubling margin on float*/
color: #FFF
}
#content {
width:auto;
top:0px;
margin-left:170px;
margin-right:170px;
height:1%;
background-color: #FFFFCC;
}
#right_side{
float:left;
width:170px;
display:inline; /* stops IE doubling margin on float*/
background-color: #999966;
text-align: right;
}
#footer {
clear:both;
width:990px;
height: 40px;
background-color: #666;
text-align:center;
font-size: 8px;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
font-size:1.6em;
font-weight:bold;
letter-spacing:1px;
padding: 10px 20px 0px 20px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
line-height:1.7em;
padding: 20px 20px 10px 40px;
}
ul {
padding-left: 40px;
line-height: 40px;
}
<!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=”twocolwrap”>
<div id=”header”>
<h1>2col Fixed Header</h1>
<p> Exercise uses one graphic with 2 color bars positioned in the proper pixel position. Doesn’t allow any of the widths to change.
<br>See color note in the content section.
</p>
</div>
<div id=”navigation”>
<h1>This is the navigation </h1>
<ul>
<li>CHECK</li>
<li>OUT</li>
<li>MY</li>
<li>NOTES</li>
</ul>
</div>
<div id=”content”>
<h1>CONTENT: notes on this 2col assignment</h1>
<p>As in the other exercises, the color change is detectible where the div meets the .jpg background. I used the same hexidecimal number in the PS doc as was used in the HTML? It really sort of blows the illusion:(
</p>
<p>Not sure if this is possible, but I am trying to use one style sheet for both fixed exercises: But because the CONTENT style is shared between the 2 & 3 column pages, I don’t know how to resolve the width so it can work for both? 170px margin holds a nice place for the 3 column version’s right margin, but content falls short compared to the width of the header in this 2 column version? Do I need to create a separate style for 2 column content and 3 column content and give them different widths, or is there a way to achieve this with other margins to push the wide content around?
</p>
<p>Is keeping the #wrapper div necessary in a stylesheet if there is also going to be seperate version wrappers as we have here to contain the different background images? Or perhaps this is an example of an inner div as the book suggests? I am still confused on that detail.</p>
<p>Even though I have auto margin sets on the wrapper div, the page still huggs the left side? I’ve tried it in all of them, but it won’t budge?</p>
<p>Reserved P for any final thoughts or responses.
</p>
</div>
<div id=”footer”>
<p>© 2009 Bornais not so great at Stylin’ with CSS</p>
</div>
</div>
</body>
</html>
<!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 Fixed 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>3col Fixed Header</h1>
<p> Exercise uses one graphic with 3 color bars positioned in the proper pixel position. Doesn’t allow any of the widths to change.
<br>See color note in the content section.
</p>
</div>
<div id=”threecolwrap”>
<!–encloses the three columns–>
<div id=”navigation”>
<h1>This is the navigation </h1>
<ul>
<li>CHECK</li>
<li>OUT</li>
<li>MY</li>
<li>NOTES</li>
</ul>
</div>
<div id=”content”>
<h1>CONTENT: notes on this 3col Fixed assignment</h1>
<p>As in the 2 column exercise, the color change is detectible where the div meets the .jpg background. I used the same hexidecimal number in the PS doc as was used in the HTML?</p>
<p>
This exercise uses a main wrapper background image as one fixed strip. I get serious Float Drop when I resize (reduce) the browser window. I think that is what “display:inline; /* stops IE doubling margin on float” is for, but would like further explaination to understand this comment.</p>
<p>Is keeping the #wrapper div necessary in a stylesheet if there is also going to be seperate version wrappers as we have here to contain the different background images? Or perhaps this is an example of an inner div as the book suggests? I am still confused on that detail.</p>
<p>Even though I have auto margin sets on the wrapper div, the page still huggs the left side? I’ve tried it in all of them, but it won’t budge?</p>
<p>Obviously, this footer has a mind of it’s own…it’s in the wrapper, but the “clear” seems to be allowing it outside. However, when I remove the clear, it hugs the bottom of the header?
</p>
</div>
</div>
<!–end of twocolwrap–>
<div id=”right_side”>
<h1>This is the failed right side</h1>
</div>
</div>
<!–end of threecolwrap div–>
<div id=”footer”>
<p>© 2009 Bornais not so great at Stylin’ with CSS</p>
</div>
</div>
</body>
</html>
Then this is the 3 col Liquid attempt. css follows.
CSS STYLE:
body {
font-size: 62.5%;
margin-top:25px;
}
* {margin:0; padding:0;} /* this tag is added globally*/
#wrapper {
margin-left:auto;
margin-right:auto;
width: 990px;
background-color: #FFFFCC;
}
#header {
min-width:760px; max-width:990px;
height: 150px;
background-color: #996600;
color: #FFF;
}
#threecolwrap {
float:left;
min-width:760px; max-width:990px;
width:100%;
background:url(“images/RightColBkgrd.jpg”) repeat-y right;
display:inline; /* stops IE doubling margin on float*/
margin-right:-170px; /* neg margin move */
}
#twocolwrap {
min-width:760px; max-width:990px;
float:left;
display:inline; /* stops IE doubling margin on float*/
margin-right:-170px; /* neg margin move */
background:url(“images/LeftColBkgrd.jpg”) repeat-y left;
}
#navigation {
width:150px;
float:left;
background-color: #663333;
display:inline; /* stops IE doubling margin on float*/
color: #FFF
}
#content {
width:auto;
top:0px;
margin-left:150px;
margin-right:170px;
height:1%;
background-color: #FFFFCC;
}
#right_side{
float:right;
width:170px;
display:inline; /* stops IE doubling margin on float*/
background-color: #999966;
text-align: right;
}
#footer {
clear:both;
width:100%;
height: 40px;
background-color: #666;
text-align:center;
font-size: 8px;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
font-size:1.6em;
font-weight:bold;
letter-spacing:1px;
padding: 10px 20px 0px 20px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
line-height:1.7em;
padding: 20px 20px 10px 40px;
}
ul {
padding-left: 40px;
line-height: 40px;
}
<!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 Liquid page</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”en-us” />
<link href=”3colLiqStyles.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1>3col not-so-Liquid Header</h1>
<p> Exercise uses two separate graphics positioned left for Nav col and Right for right column.
<br>However, the width styles don’t exactly allow it to act liquid as was the assignment.
</p>
</div>
<div id=”twocolwrap”>
<!–encloses the two columns–>
<div id=”threecolwrap”>
<!–encloses the three columns–>
<div id=”navigation”>
<h1>This is the navigation </h1>
<ul>
<li>CHECK</li>
<li>OUT</li>
<li>MY</li>
<li>NOTES</li>
</ul>
</div>
<div id=”content”>
<h1>CONTENT: notes on this 3col Liquid assignment</h1>
<p>Again in the othr fixed exercises, the color change is detectible where the div meets the .jpg background.</p>
<p>The artwork is positioned right, but the div itself is styled to float left? I am embarassed to admit that I am still confused on the float concept.</p>
<p>
OK. So here is an example of the columns being longer than the content. I added content color to main wrapper which caused color to appear into the surrounding body background color?</p>
</div>
</div>
<!–end of twocolwrap–>
<div id=”right_side”>
<h1>This is the right side</h1>
<p>
I couldn’t figure out how to make the auto margins work, page hugged the left side of the browser window until I gave the wrapper a width value of 990px.</p>
</div>
</div>
<!–end of threecolwrap div–>
<div id=”footer”>
<p>© 2009 Bornais not so great at Stylin’ with CSS</p>
</div>
</div> <!–end of wrapper div–>
</body>
</html>
MoMA redesign / Personas
As a public museum, the website needs to provide accessibility for all visitors. Because it is a modern art museum, it needs to have a high level of design and multi-media.
Hopefully I have developed a design than can accommodate both. (Jamie, I especially hope this is what you had in mind for the description that led to this redesign. I admit, that this will reveal much of my web-design naivete. Please comment if it is lacking or needs to be redirected in any way).
PERSONAS A breakdown on how this homepage site serves the 3 personas that were assigned:
-GEORGE doesn’t have a high level of technical aptitude, but needs to have access to lots of culturally rich information. The splash page would be eliminated, or at least given a SKIP option, to get low-band users to information faster. The lower section of the homepage will populate with information, laid out in a clear, clean structured manner. This area is designed to provide a comfortable section that he can focus on with a content style he’s used to. Though George wouldn’t make use of the mobile technology offered, developing an email notification would be a good way to deliver him updates.
-THERESAs main interest is in events and programs she and her family to participate in. She will benefit most from programs that are a part of the MoMAWired section, which will link her to Facebook, Twitter, Flickr, RSS notifications and link her to registration for all current events. With her household income, membership will offer her an even higher level of access using this social networking medium. As an Ad Sales professional, she has been exposed to and expects to use these tools.
-HEATHER is design and web savy. She has a strong typography sense, (my limits on the web’s font challenges will reveal themselves in this section). The constraints of web friendly fonts restrict Heather’s design. Therefore , my approach delivers and manages information using a strong MoMA branding (lowercase “o”s) with primary color themes. As always, text is arranged to be legible as well as artistic. Her favorite sites follow a blog form. She too would benefit by following the museum through new media & mobile methods.
FIRST&FOREMOST: navigation had to be shifted to the top. It was impossible to find at bottom buried under the footnotes.
MAIN: An exhibit within the museum’s collection, Color Chart, is the basis for the redesign. I chose an image and theme that has a relationship with the museum itself, yet could serve as a graphic signature to house a high volume of information.
The grid within the main photograph is utilized as a low–tech way to interact with navigation but still feel customized. Rollovers of nav bar items change the listings within the grid. (featured in this example is “BELoNG”). When user hovers over each of those, a drop down in that same color reveals more. (featured here, “membership”) Each with links to relative pages.
Other references of MoMA art for inspiraton within the site might involve an events CALENDAR designed with Ellsworth Kelly in mind:
or organizing informationin colored bands that take on a Jim Lambie feel:
MoMA BRANDING/LOGO: I decided to keep the current vertical position along the right side, but instead of using the graphic, a photo of the building as it actually exists in its environment. If allowed the bandwidth, a flash element of “video” that simulates timelapse or a voyeuristic webcam would treat the signage as a feature in the collection, which the architecture of this building actually is.
CURRENT FEATURES (lower right): This vertical format was also used for the items in the color bars below right. These previously occurred randomly over the entire homepage in a flash presentation. Now it will be contained as a slideshow that auto runs, yet user can click on any bar for instant info rather than waiting for the flash to roll around again. The color bars slide along with the media and will help to organize the feature that is currently “playing”.
I designed this site at 1040 purely because there is so much importance imagery plays with Modern Art. The width of this site could be reduced to 975 if it would make a difference in loading speed (?), but would sacrifice much when it comes to art iconography, and I thought the option of using the color vector graphics to organize content could help make the site easy to navigate, while keeping loading speeds manageable.
The top section of the home page is an area that will have to skew toward the hi-tech persona. Competitively, all modern museums have to provide visual stimulation using Flash animation and featuring premium exhibition iconography.(Is it customary to provide a low-band option for dial up users?)
The lower portion, can be laid out in more of a news information or blog-roll format. With easy to find, easy to link for more in depth coverage.
