Class Notes

March 23

Week 10

Week 10 – Topics
CSS Box Model
CSS Box Model Exercise
What is a mobile web site?
What is social media?
Technical Experiment: HTML & CSS exercise: CSS Box Model.

For next week, read Best and Worst Of The Mobile Web.
Please review the reading & videos
Styling with CSS: Chapter 4: “Positioning Elements” (pg 100-133)
lynda.com video
Dreamweaver CS4 Essential Training with James Williamson (Be sure to login before linking to video)
10. Controlling Layout with CSS

CSS structuring basics
Structuring with DIV tags
The Box Model
Understanding floats
Clearing and containing floats
Using relative positioning
Using absolute positioning
Using fixed postioning

Midterm Critiques

After reviewing your final web and source files, below are my comments. For your final projects, be sure you have followed my instructions below:

Photoshop or Illustrator files

Set the color to RGB. Your files should not be CMYK.
Create one file with folder sets for the separate pages. One folder can contain all the common elements. This will make it easier if you need to revise your files.
Note, that the classroom computer may not have the font you’re using in your file therefore, in the class room, you will have difficulty editing the file without substituting the font.
Properly label your layers. Do not leave the layer names: layer 1, layer 2 etc. Be sure to keep your file very organized.
Remember the width of your website needs to be 990 pixels wide. This is based on the optimal size for the monitor resolution size 1024 x 768.
The font size for the main body text should be approximately 11-12 pixels. Font size for headings can be larger. The smallest font size rendered on screen is approximately 9 px and this is often used for footnote or copyright information.

Source file folder

For this class, be sure to include your Photoshop file in the source file folder when you upload your final project to the server.
Also include your site map as a PDF file.

HTML & CSS

Must use an external CSS file. Be sure to move any CSS styles in the head or your HTML file to the external CSS file.
Must have an index.html file as the home page. Do not name this file home.html or anything other than index.html.
Be sure to add a title on all your pages.
All images must be in your images folder.
There should not be a folder named “slices” in your final web folder. This needs to be kept in your source file folder.
No divs names such as apDiv1, apDiv2 etc. Use lowercase when naming your divs. Don’t use all caps. You may use camel case.

General Comments

You may use tables sparingly along with a CSS-based layout using divs but no entire TABLE STRUCTURES will be accepted for the final project. I will not accept projects where the HTML is saved from Photoshop or Illustrator using either tables or divs. I want to see the CSS-based layouts we’ve discussed and practiced in our exercises.
Please update your process blog. Writing about the design process for your midterm and final projects is part of your grade, so be sure to update your blog.

CSS box model

Figure: Detail of the Box Model

The term “box model” is often used by people when talking about CSS-based layouts and design. Not everyone understands what is meant by this though, and not everyone understands why it is so important.

Any HTML element can be considered a box, and so the box model applies to all HTML (and XHTML) elements.

The box model is the specification that defines how a box and its attributes relate to each other. In its simplest form, the box model tells browsers that a box defined as having width 100 pixels and height 50 pixels should be drawn 100 pixels wide and 50 pixels tall.

There is more you can add to a box, though, like padding, margins, borders, etc.

As you can see, a box is made up of four distinct parts. The outside one, the margin, is completely invisible. It has no background color, and will not obstruct elements behind it. The margin is outside the second part, which is the border. The border outlines the visible portion of the element. Inside the border is the third part of the box, the padding, and then inside that the content area of the box. The padding defines the space between the content area of the box and the border.

(Note that in the image above, the only border of the three drawn that would actually be visible is the solid line – the dashed lines are added to help demonstrate the box model).

When you define a width and a height for your box using CSS, you are defining not the entire area taken up by the content, padding, border and margin. You are actually just defining the content area itself – the bit right in the middle. The padding, border and margin must be added to that in order to calculate the total space occupied by the box. (From this point on, we will use width for demonstrations, but the same principles apply to both width and height).

box {
width: 200px;
border: 10px solid #99c;
padding: 20px;
margin: 20px;
}

The above CSS, applied to a box, would mean that that box occupied 300 pixels of space horizontally on the page. The content of the box would occupy 200 pixels of that (dashed line added to demonstrate the edge of the area occupied by the box). Note: just to be clear, the name of the div can be anything, not only “box.”

In the above image, you can see that the pale blue area is 240 pixels wide (200 pixels of content plus 20 pixels padding either side). The border is 10 pixels wide either side, making the total width including the border 260 pixels. The margin is 20 pixels either side, making the total width of the box 300 pixels.

In practice, this can cause some confusion. For example, if I have a 100 pixel wide space available, and want to fill it with a pale red box with a dark red border and a small amount of padding, it would be very easy to write the CSS like so:

box {
width: 100px;
border: 1px solid #900;
padding: 10px;
margin: 0;
background: #fee;
}

(A declaration of 0, as used for the margin above, does not require a unit to be added. Any value other than 0 does require a unit, e.g. px for pixels. Also, although “background” is defined as a shorthand property, it is more widely supported than the more correct “background-color”.)

However, that will not give us a 100 pixel wide box, as the width declaration defines the content area of the box. The content area of the box will be 100 pixels – the total width of the box as defined above will be 122 pixels:

In order to set the above box to only occupy 100 pixels horizontally, you would need to set the width of the content area to be 100 pixels minus the padding and minus the border, in this case 78 pixels, like so:

box {
width: 78px;
border: 1px solid #900;
padding: 10px;
margin: 0;
background: #fee;
}

To calculate the overall width of a box, including all padding, borders and margins, you would use the following formula:

total box width = content area width + left padding + right padding + left border + right border + left margin + right margin

^{Above material about The Box Model from Added Bytes website. Content on the site is licensed under a Creative Commons License.}

CSS Box Model Exercise

Using the CSS_BoxModel_exercise files, recreate the Cupcake Mama website using div tags as demonstrated in class. For your reference, here is a link to the Cupcake Mama web page. Please be sure to follow the steps below:

Set up the proper file structure by creating both a final web and source files folder. Be sure to move the images into the images folder.
Insert 5 divs: wrapper, header, photo, content and footer. Be sure that the wrapper div contains the 4 other divs.
If you want to see the divs you may add color by going to View > Visual Aids > CSS Layout Backgrounds.
When you insert the 5 divs, zero out the margins and padding in the “Box” category of the CSS rule interface.
Below are the properties we know from referencing the Photoshop file:
wrapper div width is 750 px
header div height is 150 px
photo div width is 390 px
content div width is 340 px
footer div height is 20 px
Dont’ forget your floats and clears!
photo div needs to float left, content div needs to float right, and the footer div needs to clear both.
Remember in order to center the entire site, you need to set the left and right margins of your wrapper div to “auto.”
When you insert the inner content, remember this: You should position inner divs absolute in relation to the “parent” div (the div they are inside of). The “parent” div must be defined as relative.
Insert a table into a div tag to insert the rollovers for your navigation.
Create CSS styles using the compound selector for the following: (be sure to include the h1 tag in your HTML code)
#photo img {
}
#content p {
}
#content h1 {
}
Post your exercise files to the class server in a folder called “lastname_boxmodel”

Best and Worst Of The Mobile Web

[W]hat sells the mobile Web is not how it is similar to the desktop Web, but how it differs. “The mobile Web is a phenomenal platform to build and exploit applications. But until even we, the industry who build them, stop thinking of it as primarily “the Internet on your phone,”both users and clients will see it as little more than a poor man’s browser…

_{Gaddo F. Benedetti, “Mobile First, Web Second,” http://dev.mobi/node/156.}

Read this for next week: Best and Worst Of The Mobile Web

The principles of great mobile websites:

You need to have one
Make sure it actually works
Solve a real problem
Maintain laser focus
Content is king…but in small bites
Simplify, but don’t over-simplify
Make your site findable
Make your site device-aware
Remember the user’s details
Break free from .com thinking
Put the mobile website first
Don’t be bound by templates
Test and learn

“ There are no real right or wrong answers to utilizing mobile. Testing and learning is key.”

Mobile Critiques

Twitter: http://m.twitter.com/twitter
BBC: http://www.bbc.co.uk/mobile/index.html
ESPN: http://ESPN.mobi
YouTube: http://m.YouTube.com
The Weather Channel: http://weather.mobi

Challenges associated with the mobile web

The mobile web has always been confusing and difficult for many people to get used to developing for, due mainly to lots of over-hyped jargon and terms that the average web developer has never seen or needed to deal with. Things like content carriers, WAP and the deck, many of which aren’t really relevant to the subject area any more. When we create traditional HTML websites, we simply upload them to our server space with our Web-hosting provider and that’s it. It didn’t matter if the customer was coming from America, Europe, Asia or elsewhere, or if they were on a dial-up modem at home or a super-fast fiber optic connection at a University; all the infrastructure between your Web site and the customer’s desktop computers worked the same way every time.

This is not true when we are talking about mobile devices accessing the Web. In the world of mobile carriers, different companies use different hardware for their cell towers, they compress the data differently or not at all, and factors like signal strength and availability can vary a lot. This is before we even get to the capabilities of the software on the device itself!

While that sounds daunting, you shouldn’t let it scare you. As a web developer or designer, all you need to understand to create your Web site in a mobile friendly way is that there are some considerations you need to take into account. These limitations include styling, scripting and thorough testing on a variety of devices. Your existing skill-set for creating traditional web sites is much the same as for mobile web sites. The rest of this article will summarize all of these points to help give you a feel for the topic and address all of the areas to consider. Future mobile articles will give these areas a deeper treatment.

Mobile limitations

While creating a site that will work on mobile devices largely involves sticking to the same web standards and best practices as you need to use for desktop browser-compatible sites, you still need to consider the limitations imposed by such compact devices. While the mobile infrastructure is getting better and more devices are equipped with WiFi, there are still some issues. Hopefully, over time, the following points will become obsolete, but for the near future these are still critical considerations today, and will remain so for some time. You must realize that the capabilities of mobile devices differ greatly and that the top of the range smartphones, such as the iPhone, HTC Touch Diamond and Samsung Omnia (and other S60 and Windows Mobile-based phones), constitute only a small percentage world-wide of the overall Web-enabled phone population.

Screen size/resolution

For those of you too young to remember, there was a time when you would visit a Web site and they would have a small disclaimer along the lines of Best viewed in Netscape Navigator at 640×480. You couldn’t guarantee the higher resolutions we take for granted today. On mobile devices, screen resolutions still vary greatly, and this doesn’t look as if it will change any time soon.

When constructing a mobile version of your Web site, how can you be sure that your design will work across the different screen resolutions and dimensions? The simplest strategy is to keep your layout as simple and fluid as possible. The ultimate ideal is to keep your page contents all in a single column stacked on top of each other, so no matter how wide or skinny the screen resolution is, the information simply wraps. You will need to test how well your design works with and without CSS and JavaScript.

Using CSS media queries, JavaScript or the viewport meta tag, it is possible to send some CSS targeted specifically to mobile devices without any server-side coding. You will learn more about these later on in this series of articles.

Input mechanisms

Mobile devices have very different methods of input than desktop machines. When you are at work, your desktop machine probably has a full QWERTY keyboard, a multi-button mouse, possibly a number pad, etc. On a mobile device, you might only have a number pad. You can’t guarantee a full QWERTY keyboard or a pointing device. This makes data entry, even cycling through links, a different experience than when at a stationary desk.
If you have built your Web site using progressive enhancement, then its functionality should not depend on any of these advanced input devices, but should be accessible to everyone using just about any form of input device.

Processing power and available memory

Mobile devices generally have less memory than their desktop brethren. This creates limitations in the amount of processing they can handle, which limits implementations of JavaScript, Flash and other technologies. These tend to drain batteries, create a slower user-experience and increase the bandwidth – this last point can increase the cost to the user of downloading your web content if they are paying by the kilobyte, which many are. As we’ll see later, these processor limitations account for the mobile web’s evolution along the XML path rather than the HTML/SGML path.

Available fonts and colours

On your desktop computer, you can happily install all sorts of fonts and families, from serif to san-serif, from symbols to wingdings, but on mobile devices, you are not so privileged. Some devices have as few as one standard fixed-width font, and perhaps a bold or italic variant. This makes corporate branding a nightmare. Not to mention all your nicely designed navigation items in variable width fonts looking bad!
Along with limited fonts, some devices have a limited colour palette, although this is less of an issue now – most new phones come with thousands of colours, and monochrome phones are rare now.

Web standards support

Not all phones are equipped with web browsers that share the capabilities of today’s modern desktop browsers. Some have full support for the common Web Standards like HTML, CSS and JavaScript. Some only support a certain subset of these standards or use different standards entirely (see the next section for a discussion of WML, cHTML and XHTML-MP). Some support HTML, but not CSS or JavaScript. Other mobile browsers such as Opera Mini use a proxy system in which a server farm retrieves the requested web page, optimizes and reduces it in file size, then sends it to the browser for display.

The strategy here is to test, test, test, and make sure your Web sites degrade gracefully on lower-capability browsers.

Note: that you can test web sites on Opera Mini using the Opera Mini Simulator if you haven’t got a phone handy.

^{Above material from Introduction to the mobile web, Dev.Opera 23 June 2009}

What is Social Media?

The best way to understand a new media is to compare it to what’s come before? So, what kind of media do you have lying around your house? Probably these:

Newspapers.
Magazines.
Television.
Radio.
Books.
CDs.
DVDs.
A box of photos.
Physical, paper mail and catalogs.
Yellow Pages.

What are some attributes of “social media” or “new media” that are different than any of the “old media” above?

The media above cannot be changed. A newspaper can’t magically change its stories, even if society decides something in them is incorrect. A blog can be updated for all readers nearly instantly.
You can interact with a blog. You can leave a comment. With the above you can’t interact at all.
You can get some sense of the popularity of content in real time. How many comments does each post get? How many links does each post get? I can see in WordPress how much traffic each item gets. You can visit Digg to see voting on a blog’s items. Or, TechMeme to see which blog items got most links in the past few hours. None of the media above do you have a clue about the granular popularity of any of the items until much later after best seller lists are published.
With the “new media” you can look archives and see all posts. Try doing that with a newspaper. Yeah, you can, if you pay the San Jose Mercury News a fee. But it’s not as easy as it is here.
On a blog you can mix media. A post could contain text, audio, video, or photos. Not so on newspaper or magazines.
On a blog you don’t need to convince a committee to publish. Not true with other media forms. Imagine you walked into CNN and said “hey, I have some cool video, can you publish it?”
The new media is infinite. The media above all has limitations in terms of either length (a TV station only has 24 hours in a day — over on YouTube, I guarantee they publish a lot more than 24 hours of video in a day) or in quantity (try to convince USA Today to publish a 40,000 word article, or, 500 articles on the same topic).
The new media is able to be syndicated and linkable and easily reused. you can link to your media here, for instance, a few seconds after you publish it. Try doing THAT with any of the above media. Not to mention, your words kick into an RSS feed which you can then republish using something like Google Reader, if you’d like, or you can copy a sentence out of a post, paste it into your own blog, and say something about what I just said.
The new media can be mashed up with data from other services. Many people are putting widgets on their blogs that display various things from places they don’t control. That’s impossible in the older media above.

By “social media” or “new media” we’re talking about Internet media that has the ability to interact with it in some way.

^{Above material from What is social media?., Scobleizer 16 February 2007}

Examples of social media software applications include:

Communication

Blogs: Blogger, LiveJournal, Open Diary, TypePad, WordPress, Vox, ExpressionEngine
Micro-blogging / Presence applications: Twitter, Plurk, Pownce, Jaiku
Social networking: Bebo, Facebook, LinkedIn, MySpace, Orkut, Skyrock, Hi5, Ning, Elgg
Social network aggregation: FriendFeed
Events: Upcoming, Eventful, Meetup.com

Collaboration

Wikis: Wikipedia, PBwiki, wetpaint
Social bookmarking (or Social tagging) (Golder & Huberman 2006): Delicious, StumbleUpon, Google Reader, CiteULike
Social news: Digg, Mixx, Reddit
Opinion sites: epinions, Yelp, City-data.com

Multimedia