Posts Tagged ‘Markup’

wait_thumb

Don’t Make Me Wait

Page speed and load times are the foundation for a positive user experience on the web. Let’s face it, if your page fails to load in time, all the effort put towards information architecture, content strategy and interaction design will be for naught. During my formative front-end coding days, I did a fair bit of assuming that as Internet connections transitioned from dial-up to DSL I’d be able to make compromises.  Piling sprite-less PNGs upon redundant CSS upon tons of HTTP requests became commonplace,… Read More

nonhover_thumb

Non Hover

“Elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo-class :hover may not always behave as expected on a touch-screen device such as iPad or iPhone.” A few days after Steve Jobs announced the release of the iPad, I read that sentence in Apple’s Reference Library: Preparing Your Web Content for iPad, and started to realize the drastic implications the evolution of multi-touch would have on interaction design. Anything we design for the web that requires a hover state has an uncertain… Read More

TDC in CSS3

Earlier this year I was fortunate enough to become acquainted with Brian Hoff through DesignSwap and Dribbble. After being really impressed with his redesign shots for The Design Cubicle , I was thrilled when Paravel got the call from Brian asking us to jump on board to provide the HTML & CSS. Working with Brian has been a privilege and a joy. So much so, that I couldn’t help but spend some free time taking his beautiful masthead design and translating it into CSS…. Read More

CSS3 Background-Clip & @Font-Face

With no clear purpose or plan, I’ve resolved to experiment with CSS3 on a regular basis. Some of these note-posts may be more useful and practical than others, but the only way to know for sure is to learn by doing. That being said, here is another experiment with background-clip: text and @font-face via Typekit. When I finished Volume 2 in my Quoting Lebowski series the first thing that came to mind was that I bet I could CSS this. Here is the webkit… Read More

CSS3 Background-Clip: Text

I had a lot of fun dabbling in CSS3 on a recent post, but had to hold back a bit to keep things looking presentable in most browsers. To carry out the DIN typeface I chose into the header, I used a transparent png with the letters knocked out to achieve that subtle yellow to blue fade animation. After seeing a shot of my code on Dribbble, Chandler Van De Water challenged me to create the effect with selectable text. Happy to oblige, I… Read More

positionabsolute_thumb

Position Absolute

In web design there are very few absolutes. There are multiple ways to markup pages, limitless directions a design can take and no single right or wrong way to run a business. The knowledge and skills we posses today will be outdated tomorrow and if there’s one universal truth, I’d say it’s that to be a web designer is to accept change. We’ve got to be problem solvers, critical thinkers and open to being influenced by the ever-evolving industry around us. Similar to absolutely… Read More