Ecommerce trends, online retail news and opinion, user experience design : Our Blog : Alexander Interactive » Tom Rosario

HTML High-5

Tom Rosario — Thu, 02 Jun 2011 17:58:49 +0000

Everyone is jumping on the HTML5 bandwagon, and we at Ai are no exception! For a while I’ve been a little reluctant to introduce the new revision for our projects mainly due to the lack of solutions that would target cross-browser compatibility out of the box. As an ecommerce shop, browser compatibility means more users, means more revenue, means happy client.

For the past couple years I’ve been monitoring the development of HTML5 Boilerplate, a project created by Paul Irish and Divya Manian, aimed to seamlessly integrate HTML5 and modern CSS3 features into your site across all browsers (even back to IE6). The current 1.0 build was recently released with a bunch of goodies such as HTML and JS minification, image compression, cache management, updated CSS reset, custom build script, the option to choose modernizr or html5shiv, and so much more.

To learn more about the project visit html5boilerplate.com.

Fenda Equipment (12″ #FFFFFF Label Mix)

Tom Rosario — Thu, 05 Mar 2009 10:02:27 +0000

If you ever wanted to find me in the office just ask for the guy with the big headphones, bobbin’ head, and deep bass lines thumpin’ at a soulful, funky 4/4.

Music has always played a vital and spiritual role in my life, and to be able to have those sounds glisten in my ears while I apply my craft at my desk is purely harmonious.

Since I can’t be at the clubs everyday, I bring the dance floor here. My mixer (keyboard) and turntable (mouse) help in producing some of the most illest, dirtiest 12 inch white label html mixes and css dubs. I’ll even drop some vocals from our javascript guru’s too.

I couldn’t do any of this without the right equipment.

Headsets:
- Sony MDR-V700DJ Studio Monitor Series
- Sony MDR-EX85LP Buds when I’m on the go
Microsoft Natural Ergomic 4000 Mixer
Microsoft Laser 4000 Tabletop
Dual 20″ Samsung SyncMaster 204BW Multimedia Players
Notepad++ Media Controller
Photoshop CS3 EFX-1000
Custom Mods/Add-ons
- Web Developer
- Firebug
- HTML Validator
- Tails Export
- Operator
- WAVE
- Yellowpipe
- YSlow
- Pixel Perfect
- Screengrab

Dissecting the Green Key Marquee

Tom Rosario — Tue, 24 Feb 2009 09:56:43 +0000

The recent redesign of professional recruiter and temporary staffing firm features an interactive marquee that combines a slideshow, areas of expertise menu kick-out, and zoomable touts highlighting the site’s three key areas: available positions, resume submission and employers portal. This is a dissection of the component’s front-end HTML and CSS architecture, giving a more in-depth look at what’s actually happening under the hood.

The Marquee Frame

The marquee’s frame consists of the following divs:

#marquee – main parent container
#marquee_head – transparent png set as the background for the top curve
#marquee_foot – transparent png set as the background for the bottom curve
#marquee_content – content with a repeating vertical shadow background image
#marquee_overflow – wrapping container with overflow set to hidden to clip excess content from appears outisde the curves and sides

Each of the background images have a white outset to allow for the clipping to display correctly.

Zoomable Touts

Keepin’ it cross-browser

The challenge here was keeping the tout’s markup within the actual marquee parent container to maintain a nice markup flow. Since IE disallows childen to stack over its parent elements who have an overflow set to hidden, this presented a problem for the hover states on each tout. As seen in the image, the touts overlay the actual marquee frame when hovered over with a cursor.

The solution?

Gotta swallow the geek pride on this one. We have to break the markup’s natural flow a bit and place the hover states, #marquee_touts_active, outside the #marquee div. Fortunately the placement is immediately after the #marquee div so the markup’s “roadmap” is still intact.

HTML





Beginning of Marquee



























End of Marquee

CSS:


/* #marquee
---------------------------------------------------------------*/
#marquee {
margin:0 0 0 -10px;
width:961px;
}
#marquee #marquee_head {
background: url(/img/bg/bg_marquee_head.png)
no-repeat scroll 0 0;
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(
src='/img/bg/bg_marquee_head.png',
sizingMethod='image'
);
_background: none;
height:43px;
position:relative;
text-indent:-1000em;
width:961px;
z-index:2;
}
#marquee #marquee_foot {
background: url(/img/bg/bg_marquee_foot.png) no-repeat;
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(
src='/img/bg/bg_marquee_foot.png',
sizingMethod='image'
);
_background: none;
height: 60px;
width: 961px;
position: relative;
z-index: 5;
text-indent: -1000em;
}
#marquee #marquee_content {
background: url(/img/bg/bg_marquee_content.png)
repeat-y scroll 0 0;
height:391px;
position:relative;
}
#marquee #marquee_content #marquee_overflow {
height:446px;
margin:-25px 0 0 10px;
overflow:hidden;
position:absolute;
width:940px;
}
/* #marquee_touts
---------------------------------------------------------------*/
#marquee_touts {
position: absolute;
top: 450px;
z-index: 1;
background: #236336;
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
#marquee_touts .tout {
float: left;
width: 311px;
padding: 23px 0 45px 0;
border-right: 1px solid #77917e;
cursor: default;
height: 50px;
}
/* #marquee_touts_active
---------------------------------------------------------------*/
#marquee_touts_active {
position: absolute;
z-index: 100;
margin: -165px 0 0 0;
}
#marquee_touts_active .tout {
height: 153px;
position: absolute;
}
#marquee_touts_active .tout .tout_content {
height: 153px;
}
/* extra div for ie hasLayout */
#marquee_touts_active .tout .tout_content {
padding: 30px 0 0 0;
background-position: left top;
background-repeat: no-repeat;
}
/* #menu_areas
---------------------------------------------------------------*/
#menu_areas {
position: absolute;
z-index: 2;
top: 235px;
left: 34px;
padding: 33px 0 0 0;
width: 578px;
}
#menu_areas.active {
background: url(/img/bg/bg_menu_areas_head.png)
no-repeat left top;
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(
src='/img/bg/bg_menu_areas_head.png',
sizingMethod='crop'
);
_background: none;
}
#menu_areas.active .menu_content { display: block; }

Validify, Semantify, Accessify

Tom Rosario — Thu, 19 Feb 2009 16:04:48 +0000

Tom is Ai’s front-end tech lead.

The following is a developmental check-list I religiously adhere to and find extremely essential in ensuring semantic-rich, accessible and valid (x)HTML.

Da Basics

Specify a DOCTYPE and namespace
Specify the document’s language
Write your markup before writing any CSS to ensure your HTML is semantic and well-formed
Document your HTML with start and end comments for clear separation of layout blocks within your markup
Make sure the page validates (x)HTML
1. 1.0 Strict for all new development
2. Transitional for legacy applications using HTML flavors from the past
Make sure the page title is set
Include all necessary meta tags
Use block and inline elements appropriately
X-browser/X-Platform the page
Separate blocks of content with a div
KEEP ALL ATTRIBUTES AND THEIR VALUES LOWERCASE…KICKIN’ IT OLD SKOOL IS COOL, BUT NOT THIS WAY

Presentation and Content — Keep ‘em Separate

Make sure your markup is semantic in that proper elements are used in which their purpose was intended
1. Layout => div
2. Headings => h1 through h6
3. Paragraphs => p
4. List of items => ul, ol
5. Content emphasis => em, strong
6. Tabular/grid data => table
The presentation of content should be consistently applied regardless of CSS

Name Your Children With Some Structure

Name your ID’s and classes based upon the structure of its content, not presentation
1. content_head
2. content_main
3. sidebar
4. navigation_main
5. navigation_secondary
6. logo
7. header
8. footer
This will prevent renaming if the content’s look and feel changes

Headings Schmedings

One h1 per page
Maintain the hierarchy, h1 -> h2 -> h3 … h6 regardless of how cosmetically they may appear in design

Pretty Pictures

Every image must contain a non-empty alt tag
Dimensions on every image
Keep images used for photographical purposes inline, not as background images

I Call ‘em Links, Anchors are for Boats

Include title attributes on important links and/or graphical links containing no text in the image itself that describes the destination of the link
Make sure there is always text present within the anchor even if it is a graphic
The text should be informative, ie – use ‘close’ rather than just ‘x’ for a close button

Fontography

Try to avoid all caps within markup and allow CSS or emphasizing elements to properly transform text so you have the option of reverting if needed
Don’t abuse the br tag, using multiple consecutively isn’t necessary, just begin a new block level element

Set the Table, Anthony, and Don’t Forget the…

caption element to let users know what your table is about (look at it as short headline)
summary attribute to further describe your table’s contents in more detail
colgroup‘s for multi-column tables
th‘s for column headings
thead for table heading content, tfoot for table’s footer content and tbody for the main body of the table’s grid content
tfoot comes before the tbody in the markup…don’t ask me why
And for pete’s sake, don’t use tables for layout, that’s so 1999

Forms (Don’t Have Anything Cute for this One, Sorry)

Don’t forget the action and method attributes (leave em blank if you don’t know, leave that mush to the back-end dude)
Have a legend to set the title of the form
Use fieldset‘s to group related fields
Use div‘s for further content separation within fieldset‘s
tabindex on each input for easy keyboard accessibility
The corresponding text for each input should be a label with the for attribute set to the input‘s ID
maxchar set on inputs where necessary to assist with validation