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
Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly. To achieve a round avatar with a 2px beige border, I applied the following CSS to an avatar loading within a div class called avatar-frame. .avatar-frame{border: 2px solid #c7b89e;} .avatar-frame,.avatar-frame img{ width: 50px; height: 50px; -webkit-border-radius: 30px; /* Saf3+, Chrome */ border-radius: 30px; /* Opera… Read More
I use the column-count & column-gap property on the search page of this site to break my Tags list into 4 columns. Because the content is dynamic, I couldn’t just hard code each column, and I didn’t want to waste kilobytes on running a WordPress plugin to achieve an effect that was possible with a single line of CSS. Currently, only firefox and webkit browsers supports this feature and they all seem to do it differently. I’ve noticed that Mobile Safari, Safari and Firefox… Read More
I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser. Only when I got to native UI elements like search boxes & text fields did I notice an inconsistency. A pre-set styling was being applied in the way of an inner shadow to text input fields and a gradient overlay to search / submit buttons, which also got rounded corners. After… Read More
Since downloading Safari 5, I’ve been incorporating some new extensions into the ol’ workflow. While I typically use CSSEdit to pick apart code in-depth, Jeremy Hubert’s Live CSS Editing Extension allows Safari users to make quick, experimental edits on the fly. Download the extension, fire it up and you’ll be able to turn the background of my site pink!
“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
