BakerTweet

BakerTweet.com. They made a device, pictured right, that bakeries can use to tweet about what they just made. There is a mess-proof box with a dial that the baker can turn to select what they made, and then, like magic, it's twittered. Those who follow the baker's tweets can get the tweets sent to their cell phone, in order to get the freshest, most delicious baked goods as soon as possible, and fresh from the oven.

Technology + pastries = nom nom nom.

Audience Considerations

The audience for Kyle's site will mostly be friends and family, and maybe some professors, potential employers, and potential customers. Given that, I think the navigation topics of bio, contact, photos, resume, and sketches are appropriate. I will have a link to the honors option site, which is a portfolio for his kidswear collection. Because the audience members will be interested in different topics (the employer might want to look at his resume, sketches, and contact info, but the friend might want to read everything), I think it's best for this site that I make the navigation based on content, as opposed to based on user relationship. If the family member doesn't click on "employers", I don't want them to miss Kyle's resume.

If I had to design for audiences, though, I would put his resume, design philosophy, bio, and contact information under a navigation topic like "employers" or "Kyle data" or something. I would put photos and sketches under a heading like "eye candy", and put his design philosophy and a link to his kidswear collection portfolio site under a heading like "customers" or something.

The website audience can be divided into many categories:

• Friends // Family // Employers // Customers
• Those who care about Kyle // Those who mostly care about Kyle's work
• Potential bosses // potential clients // people Kyle doesn't need to impress
• Moms who might buy kidswear from Kyle // people who will buy nothing // potential employers // professors

Honors Option Colors

These are the colors that I want to use for the navigation of my honors option portfolio site for Kyle:

You can also download the hex and RGB values or see the ColourLovers page.

For the header, I want to use these colors on white:



Here's the colors all together:



Check out the ColourLovers page or download the hex and RGB values.

id vs. class

Use id selectors for divisions over classes if you only need to use it once within a file.

Your CSS for an id selector named "container" might look like this:

#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

The HTML to display that ID-ed division is this:

<div id="container">Contained content</div>

Your CSS for a class would look like this:

.tealtext{
color: #008080;
font-weight: bold;
}

And you invoke that text with this HTML:
<span class="tealtext">This text is teal.<span>

CSS Basics

In my quest to begin (and eventually complete) Module 4, I came across CSSBasics.com. It's basically 18 chapters (read: web pages) that discuss CSS basics, starting with internal versus external stylesheets or inline styles, and ending with position and pseudo elements, and a .PDF link to print. I definitely want to read all of that when I have time... or when I find out I need the information when I'm three hours away from the Module 4 deadline. ;)

HTML Punctuation Code

I know there's a more descriptive term for what I'm talking about. (What is it?)

More specific HTML punctuation code:

&#8216; = ‘ = opening single quote
&#8217; = ’ = closing single quote (or an apostrophe)

&#8220; = “ = opening double quote
&#8221; = ” = closing double quote

&#8242; = ′ = single prime (not in HTML 4.01)
&#8243; = ″ = double prime (not in HTML 4.01)

&#8211; = – = en dash (shorter)
&#8212; = — = em dash (longer)

&#8230; = … = ellipsis

-Source: AListApart.com

Facebook Faux Pas

Way to go, Facebook! Apparently 560,000 of your 2.1 million monthly active users don't like your new site design (Source: Washington Post article). Even the Facebook employees hate the redesign, and it seems as if Mark Zuckerberg (owner of Facebook) doesn't care, and is ignoring the pleas for a new redesign. He has even tried to buy Twitter for $500 million in cash and stock. Having failed that, it seems as if he tried to make Facebook into the "new" Twitter. Wow. Listen to your users, Mark; make the site what they want it to be, otherwise they'll leave.

Way to fail, Mark. Way to fail.

Typography Tools!

I found some cool typography-helping sites. Dig it:

Typetester.org -This site lets you format three columns of text - all with adjustable size, leading, tracking, color, background color, alignment, word space, and font. Then, the site prints out, in the columns, lorem ipsum text in your selected typeface with different formatting: bold, italics, uppercase, small caps, regular, and combinations of the above.


CSSTypeSet.com - you can use buttons to change the typography, and the text is displayed with your selected formatting on the right, and the CSS code is displayed in the text box on the right. I like it to see letter-spacing, word-spacing, and line-height properties, and see the exact values; it's hard to guess those numbers.

Design Police & Drop Caps

So this Design Police site is hilarious. It has printable stickers/piece of paper that you can cut out and tape on a printed document that are basically editing remarks. Only some are funny like, "Severe Lack of Creativity" or "Awful Library Stock Photo". There are 5 pages, check it out.

Drop caps are where it's at, also. I just wanted to leave the code in my blog so I'd remember how to do it. :)

Edit: that drop cap technique definitely does not work in blogger.

Horizontal Centering With CSS

I was doing some research about how to center page elements (both vertically and horizontally), and thought I'd share my findings here. I couldn't find anything about centering elements vertically, but there are actually two ways to go about centering elements horizontally using CSS, and only one is IE5 compatible.

Centering: Negative Margin
First, position the element's left edge at the horizontal center of the page using "position:absolute; left:50%;". Then, set the box's left margin is to the opposite of half the element's width using "margin-left:-266px;". Like this:

body {margin:0px; padding:0px;}

#Content {
position:absolute;
left:50%;
margin-left:-266px;
}

Centering: Auto-width margins
The other way is to center the element by setting left & right margin widths to "auto". This CSS is not supported in IE5, however. To remedy this, [kind of], we can use the "text-align" attribute. IE5 incorrectly applies the CSS "text-align" attribute to block-level elements. Declaring "text-align:center" for the containing block-level element (often the BODY element) horizontally centers the box in IE5. There is a side effect of this workaround: the CSS "text-align" attribute centers the inline content. when centering in this way, you should explicitly set the "text-align" attribute for the centered box, counteracting the effects of this crappy way to center things. Honestly, just use the other way. Code as follows:

body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
}

Honors Option Nav CSS

I can't decide whether I want to to vertical or horizontal navigation for my honors option site. The challenge is to only use one graphic, the header (which will have a transparent or white background... which would load faster, Joy?) for the navigation. I'm planning on using lots of CSS. :)

Whether I choose horizontal or vertical navigation, I want to use classes like this:

a.red:link {color: #009900;}
a.red:visited {color: #999999;}
a.red:hover {color: #333333;}
a.red:focus {color: #333333;}
a.red:active {color: #009900;}

And the code for the first nav option would look like this:

<a class="red" href="bio.html">Bio</a>

Now I need to learn how to make all of the boxes the same with. I know Entropy4Atrophy had a post about horizontal and vertical navigation. Now I just have to read it (again) and understand it.

Back from break

During our last class, we made three pages, all with identical HTML code and content, that used three different style sheets, which made each page look very different.

Over break, I drove my house-mate Kyle, for whom I'm creating two sites for my final project and honors option, and myself back to East Lansing, and we discussed his sites more. I'm excited to make an awesome-looking portfolio site with bio, resume, and design philosophy pages that use different, yet equally extensive and awesome, style sheets.

Get paid, son

This page from TemplateTuning.com gives prices for them to design different elements for a client's website or page. Photoshop image slicing is $80 for a home page, creating a corporate identity is $200, adding new page elements is $15 per element, adding rollover effects is $20 for all buttons, but drop down menus cost $100 to design.

Go forth and make bank!

Loves it

Sites whose design I love:

CentralScrutinizer.it — Love the typography, fonts, main navigation, right column "accessory" elements, embedded videos and music players, and the blog title header font colors that change from post to post.

Boompa.ca — Love the stacked water color pages look. I think they did it with CSS modifications to the HTML body tag, and then they added nested divs with different backgrounds for each column and elements. Check out their style sheet. I don't know how they did the effect where when the user puts their mouse over "Search", the search bar drops below it, and when the user mouses over "Find News by Artist" more sub-nav drops down from there, and disappears when the user removes their mouse. I would really like to figure out how to do that. Especially since it's all text, which means I could use that kind of effect for my honors option site.

The Mystery of 2010 — Love the navigation! Their style sheet shows that they placed their elements using ids and absolute pixel positions. Is that practice compatible with all browsers? Also, the moving background, though super cool, is kind of distracting. But I still love it.

Image Slicing

I've been wondering for a while exactly how I was going to implement my proposed design for my final project, and now I know: CSS, image slicing, and rollover images. Yes!! :)

I found and watched this tutorial on WebDesign.org that is 15 minutes long (kind of long, I agree) that shows how to use Photoshop and Dreamweaver to make image slices and Photoshop will write the appropriate code for you either in HTML tables (boo!) or CSS (yay!). And I have both programs on my laptop and in 317 Bessey. Yessss. :) So I will likely use that technique for the kidswear portfolio, my final project.

I'm so excited now! :)