Marquee element
An example of an HTML marquee displaying the text "Wikipedia" Usability problems[edit] Marquee can be distracting.[1] The human eye is attracted to movement,[2] and marquee text is constantly moving. As with the blink element, because the marquee tagged images or text are not always completely visible, it can make printing such webpages to a paper hard-copy an impossible and inefficient task where the specific printed pages where the messages on screen scroll or blink have to be printed multiple times to capture all the pieces of text that could be displayed at any one given moment in time. Because marquee text moves, links within it are more difficult to click than those in static text, depending on the speed and length of the scrolling. Users only get one chance every time it scrolls past. Attributes[edit] Unlike its blinking counterpart, the marquee element has several attributes that can be used to control and adjust the appearance of the marquee. Align Behavior Bgcolor Direction Width Loop
Responsive & Adaptive Web Design
If you work in or with the web and make even a modicum of effort to remain buzzword compliant, you're probably uber-familiar with the term "responsive web design." Perhaps you've also heard of "adaptive web design" and "progressive enhancement"? If you're like me, you may have found yourself wondering what exactly these words mean, what the differences are, and why everyone seems so giddy to use them in a sentence. Humble Beginnings Let's start by acknowledging that the web, by its very nature, began as a rather "responsive" thing. Designers Are Control Freaks As the web evolved into something that more and more businesses were using, more and more designers could get paid to work on making websites instead of brochures, annual reports, business cards and the like (not that there's anything wrong with those). Tiny Screens & Slow Internet to the Rescue! And then there were iPads A responsive response Fluid GridsFlexible ImagesMedia Queries An adaptive response But, isn't it all so responsive?
html5shiv - HTML5 IE enabling script
Dual licensed under the MIT or GPL Version 2 licenses Full original, uncompressed source available here: Source code adds new HTML5 elements (which is simple code), but also supports printing HTML5 elements and includes the default styles for HTML5 elements, like block on article and section. Getting it to work in the browser was easy, @jon_neal and afarkas made IE actually print HTML5 elements - these guys are to take all the credit. Please take a moment to thank them! To use this script, download the html5shiv and roll it in to your own code (ideally minified). Common question: what's the difference between the html5shim and the html5shiv?
Future of Web Design Conference 2011 – Day 2 Review
Posted on 15'11 Nov Posted on November 15, 2011 along with 7 JUST™ Creative Comments The 2011 Future of Web Design Conference was recently held in NYC and I was fortunate enough to attend the two days of talks. Below is the summary of Day 2. The Day 1 FOWD summary can be found here. As a disclaimer, these notes were quickly jotted down & summarised and may not be understood out of context but I’ve done what I could from my notes. Below are the summarised keynotes which you can click to jump to. Pith, Passion & Productivity – Cameron Moll How can you make a name for yourself? “If you don’t write, you don’t know how you think.” – Jeffrey Zeldman“The details are not details, they make the product.” – Charles EamesWords with pith, convey knowledge & personality.Good writing not only comes from grammar & sentence structure, but practice.Start writing, don’t just convey information but write with authenticity, passion & pith. Recommended reading: Editing tips for designers Who’s A-Game Pithy? 1.
Designing CSS Layouts With Flexbox Is As Easy As Pie
Advertisement This article is an updated excerpt of the chapter “Restyle, Recode, Reimagine With CSS3″ from our Smashing Book #3, written by Lea Verou and David Storey. — Ed. Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of the first CSS modules designed for actual layout (floats were really meant mostly for things such as wrapping text around images), it makes a lot of tasks much easier, or even possible at all. Flexbox has lived a storied existence. There are, however, some caveats. When you specify that an element will use the flexbox model, its children are laid out along either the horizontal or vertical axis, depending on the direction specified. Example: Horizontal And Vertical Centering (Or The Holy Grail Of Web Design) <! Nothing special here, not even a wrapper div. I’ve included all of the different prefixed versions in the CSS above, from the very oldest, which is still needed, to the modern and hopefully final syntax. Enabling Flexbox (al)
iA Writer
scottjehl/picturefill
Media Queries
Aspects & Reference (speaker website)
Box Sizing
The "box model" in CSS works like this: width + padding + border = actual visible/rendered width of box height + padding + border = actual visible/rendered height of box It's a little weird, but you get used to it. In IE 6 and earlier, when in "quirks mode," the box model was treated differently. width = actual visible/rendered width of box height = actual visible/rendered height of box The border and padding values moved inward, cutting into the width/height of the box rather than expanding it. It was weird quirk to have to deal with, although the fix was usually as easy as setting a proper DOCTYPE and getting out of quirks mode. The mind bending continues with the modern implementation. If you wanted to ensure the box kissed the edges of the parent, but still use a 100% width declaration, you'd have to set the child divs width to 476px. This <div> pseudo markup only takes us so far, because the answer of course is to not use a 100% width declaration. I would love a different box model!
