Author Archive

June 2nd, 2011
by

HTML High-5

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.

HTML5 Boilerplate - A rock-solid default template for HTML5 awesome

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.

No Comments »
Technology
March 5th, 2009
by

Fenda Equipment (12″ #FFFFFF Label Mix)

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.

dj.gif

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
No Comments »
Ai
February 24th, 2009
by

Dissecting the Green Key Marquee

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

gk_zoom.jpg

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.

Transparency

No png’s necessary. The tout’s transparency setting is fully CSS-controlled. To cover all bases a few separate browser-specific CSS statements are necessary (see below).

Areas of Expertise Menu

gk_menu.2jpg

This menu is an overlay kick-out that appears when you hover over its call to action underneath the marquee’s main blurb that lists areas of expertise which are specific to the current division you are viewing.

See for Yourself

Below are stripped down versions of the actual HTML and CSS. You can view the marquee live in action at any of Green Key’s divisional sites such as Accounting & Finance.

HTML


<!-- #marquee-->
<div id="marquee">
<!-- #marquee_head -->
<div id="marquee_head">Beginning of Marquee</div>
<!-- /#marquee_head -->
<!-- #marquee_content -->
<div id="marquee_content">
<!-- #marquee_overflow -->
<div id="marquee_overflow">
<!--.slide -->
<div class="slide">
<!-- slide content -->
</div>
<!-- /.slide -->
<!-- #marquee_touts -->
<div class="clear" id="marquee_touts">
<div class="tout">
<!-- tout content -->
</div>
</div>
<!-- /#marquee_touts -->
<!-- #menu_areas -->
<div id="menu_areas">
<!-- areas of expertise content -->
</div>
<!-- /#menu_areas -->
</div>
<!-- /#marquee_overflow -->
</div>
<!-- /#marquee_content -->
<!-- #marquee_foot -->
<div id="marquee_foot">End of Marquee</div>
<!-- /#marquee_foot -->
</div>
<!-- /#marquee -->
<!-- #marquee_touts_active-->
<div class="clear" id="marquee_touts_active">
<div class="tout"><!-- tout content --></div>
</div>
<!-- /#marquee_touts_active -->

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; }
No Comments »
Technology
February 19th, 2009
by

Validify, Semantify, Accessify

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.

Cool Dood Holding Checklist

Da Basics

  1. Specify a DOCTYPE and namespace
  2. Specify the document’s language
  3. Write your markup before writing any CSS to ensure your HTML is semantic and well-formed
  4. Document your HTML with start and end comments for clear separation of layout blocks within your markup
  5. 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
  6. Make sure the page title is set
  7. Include all necessary meta tags
  8. Use block and inline elements appropriately
  9. X-browser/X-Platform the page
  10. Separate blocks of content with a div
  11. KEEP ALL ATTRIBUTES AND THEIR VALUES LOWERCASE…KICKIN’ IT OLD SKOOL IS COOL, BUT NOT THIS WAY

Presentation and Content — Keep ‘em Separate

  1. 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
  2. The presentation of content should be consistently applied regardless of CSS

Name Your Children With Some Structure

  1. 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
  2. This will prevent renaming if the content’s look and feel changes

Headings Schmedings

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

Pretty Pictures

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

I Call ‘em Links, Anchors are for Boats

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

Fontography

  1. 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
  2. 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…

  1. caption element to let users know what your table is about (look at it as short headline)
  2. summary attribute to further describe your table’s contents in more detail
  3. colgroup‘s for multi-column tables
  4. th‘s for column headings
  5. thead for table heading content, tfoot for table’s footer content and tbody for the main body of the table’s grid content
  6. tfoot comes before the tbody in the markup…don’t ask me why
  7. 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)

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