Impressed by the CSS animations on the Apple 4S sales page? I am. John B. Hall makes it clear by showing a miniaturized version where we can see all the off-screen elements.…
|October 25, 2011|
The content of HTML5 for Web Designers, the first A Book Apart book by Jeremy Keith, is online. Under the hood, the title bar at the top of the page is actually the
|October 24, 2011|
There is an awful lot we don’t know about a user visiting our website. For example, almost everything. And we know less and less every day as the web gets bigger and its users more diverse. Let’s accommodate those unknowns.
|October 23, 2011||47 comments|
I’m really lazy about using
|October 19, 2011||72 comments|
|October 17, 2011||201 comments|
A bunch of crazy awesome affects you can apply via CSS through the
|October 14, 2011|
|October 14, 2011|
What do you think is reasonable page size to try and stay under for a modern web design?
|October 13, 2011||62 comments|
Let’s say you’ve designed a web page and it makes use of a full page background image. You really like the way the site looks with this background image. It looks amazing. But the image is 350k. You’ve …
|October 13, 2011||32 comments|
THE PEOPLE HAVE SPOKEN. The pipe character “|” is by far the most popular page title separator with 47% of the vote and being up against 15 other choices. Example:
Article | Category | Site Title
The dash and en-dash …
|October 12, 2011||10 comments|
SublimeVideo is a nice HTML5 video polyfill service, but it hasn’t allow for fluid width video. Until now.
|October 11, 2011||16 comments|
I’m just back from London where I spoke at the Future of Web Apps. My talk was titled, rather generically, Writing Better HTML & CSS. Slides pale in comparison to real talks, but I still like posting them in case …
|October 10, 2011||38 comments|
If there’s one thing I love most about what I do it’s building out the challenges that a designer throws my way. There’s almost always a way to reproduce a design in code, and I love figuring out how to …
|October 6, 2011||43 comments|
Animations are inherently visual. But can we give a similar experience to everyone by getting a bit more semantic?
|October 4, 2011||35 comments|
Listen to the engineers behind Amazon’s new “Silk” web browser talk about how it uses the cloud to take the load off mobile devices.
Sounds like it does all the asset-requesting for you from the cloud, optimizes it, then sends …
|September 28, 2011|
Jonathan Snook has released an “evolving guide to CSS architecture for sites small and large.” My favorite is the “Depth of Applicability” section:
Each rule set that we add to our style sheet creates an ever increasing connection between the …
|September 28, 2011|
Linking to specific tabs is often done with hash links. I think doing it with a URL parameter can accomplish the same goal without some of the problems that hash links can cause.
|September 26, 2011||26 comments|
Jane Wells of Automattic lays out four reasons why someone may not use forums for a question they have. Then she disputes all four of them while sharing an example of where a forum post get a lot more done …
|September 26, 2011|
…the IE10 HTML5 experience is one of the best we’ve seen on any platform to date.
I’ve heard from a number of folks that IE 10 will be the most advanced browser to date (support the most standards …
|September 23, 2011|
|September 22, 2011||20 comments|
Let’s say you were tasked with creating a UI in which users can rate three candy bars from their most to least favorite. A grid of radio buttons isn’t a terrible way to go about this.…
A (small) grid of
|September 20, 2011||27 comments|
Just for silly kicks, let’s keep on with the page title polls, this time with perhaps the most trivial of all choices. The poll is embedded on the site in the sidebar. Let everyone know what your favorite page title …
|September 19, 2011||123 comments|
This was an interesting poll because there is no clear consensus on “the best way” for sites to handle page titles. It varies quite a bit even among similar websites. To keep things more focused, I put forth a very …
|September 19, 2011||10 comments|
High quality video training marketplace PeepCode has a series of screencasts called Play by Play where they record masters of their trade doing their thing.
In this one, we get to watch a user experience designer think through a design …
|September 18, 2011|
I opened up the same 6 tabs in current versions of all the desktop browsers, then took screenshots of the UI of just the tabs themselves. These are from a Mac running OS X Lion.
|September 17, 2011||35 comments|
In the last year or so, there’s been enough sites that do fancy things when you scroll down that it’s kind of a trend. I thought I’d blog it, you know, for the sake of history.
By “fancy things” I …
|September 14, 2011||93 comments|
|September 13, 2011||32 comments|
|September 11, 2011||57 comments|
The PSD for the CSSOff is going to drop on October 20, 2011. You’ll have exactly 2 weeks (until November 3) to code up and submit your final conversion. Follow the title link to the official page where you can …
|September 7, 2011|
I know what you were just thinking. You were thinking, man, I love CSS-Tricks so much but nothing in my wardrobe helps me publicly display that. Right‽ Fret not. Now you can get your hands on one of these bad …
|September 7, 2011||60 comments|
Super lightweight jQuery plugin to make all videos fluid width, while maintaining their original aspect ratio. Explanation, video, and discussion on Dave’s site.…
|September 6, 2011|
When I first learned that browsers read CSS selectors from right to left it felt kinda weird and confusing. Boris Zbarsky explains why it’s done that way in a way that makes perfect sense. Part of the reason:
…most of …
|September 5, 2011|
Lea Verou makes a “typing” animation with the CSS3 sub-property
|September 5, 2011|
A technique for a rounded tabs where the top corners are rounded, but also the bottom corners are rounded where they attach to the content area. “Round out” or “flared” borders, if you will.
|September 4, 2011||53 comments|
Project from Matt Wilcox for serving the right images to the right devices (i.e. small images to small browser windows, large images to large browser windows). Small browser windows, regardless of bandwidth considerations, shouldn’t get a giant image scaled down …
|August 31, 2011|
A rich HTML popup content area that works when you click a link/button (rather than hover like tooltips work). This uses a bunch of CSS3 and the functionality is also handled purely with CSS, although we discuss that at the end.
|August 31, 2011||49 comments|
My AnythingZoomer jQuery demo has been plugin-ized by Mottie (who also maintains the AnythingSlider). It has some new features and is easier to work with by nature of being a plugin. …
|August 30, 2011|
Listen to Louis Simoneau and I yak about CSS. …
|August 27, 2011|
Christian Heilmann had an interesting CSS predicament the other day. The idea was to make header tags rotated 90-degrees and align along the left of a blog of content rather than at the top.
So, like this.
|August 26, 2011||54 comments|
|August 25, 2011||47 comments|
Question from a reader on when using the anchor tag is the right choice and when it’s possibly OK to use another element for behavioral stuff.
|August 24, 2011||44 comments|
Functional tabbed area with just CSS. The backstory, where we are now, and the awesome theoretical future.
|August 23, 2011||49 comments|
HTML/CSS framework from Twitter (Mark Otto and Jacob Thornton). Pretty comprehensive: nice clean design and typography, grid system (fluid or fixed), form elements, buttons/navigation, alerts, tooltips, LESS support… I think a web app startup could do a lot worse than …
|August 22, 2011|
Incredibly well done set of introduction to web design tutorial videos by Jessica Hische & Russ Maschmeyer. Kinda like my The VERY Basics video, but far more professional. Will be recommending this to every single person asking me how …
|August 22, 2011|
Pretty sweet slide deck framework that works in the browser by Caleb Troughton.
This is damn impressive too. …
|August 22, 2011|
There’s a new area of the site: Deals for Designers with discounts on products and services from quality companies.
|August 22, 2011||13 comments|
By the inimitable simurai.
Another use case for the don’t-exist-yet but-will-soon “conical” gradients.…
|August 21, 2011|
Just for kicks I wanted to see if I could make a row of images animate across a page and repeat indefinitely. Turns out it’s really not that hard. The way I did it was to make one big long …
|August 21, 2011||39 comments|
People post a good bit of HTML in the comments of articles on this site. They are trying to demonstrate something, ask for troubleshooting help, show alternate techniques, etc. This is excellent. I want to encourage this as much as …
|August 19, 2011||37 comments|
Showing additional info (“popup”) when hovering over an element is a pretty easy thing to do. But there is a ton of subtle ways to improve that interaction. This articles goes over a really excellent technique for this covered by Doug Neiner at the Front End Design Conference 2011.
|August 17, 2011||26 comments|