Supersize that Background, Please!
With an advertising world keen to use every inch of a medium for brand or product experience, it is becoming increasingly popular to design websites with full-browser backgrounds. Using CSS, this can be achieved quite easily. Just drop a huge background image in a page with one line of code (Line wraps marked » —Ed.): body { background: #000 url(myBackground_1280x960.jpg) » center center fixed no-
Taking Advantage of HTML5 and CSS3 with Modernizr
Ten years ago, only the most cutting-edge web designers used CSS for layouts and styling. Browser support for CSS layouts was slim and buggy, so these people advocated for web standards adherence, while creating hacks that made CSS layouts work in all browsers. One hack that became widely used was browser sniffing: Detecting which browser and version the user had by looking at the navigator.userAg
Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II
The latter approach can be an effective way to provide a background image for a web page, but can be challenging to use. For instance, I’ve learned that a graphic with a width five times the height makes a bottom border image that looks good regardless of the browser size. I also set the SVG element to be fixed, positionally, so that it’s always displayed. A background image that fits the entire w
Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I
SVG in the wild#section2 Several people use SVG for site design—mostly for topic icons. For instance, Sam Ruby, current HTML5 Working Group co-chair, uses SVG to annotate his weblog posts with topic icons. Erik Dahlstrom, from Opera, does the same, as does Jeff Schiller at Codedread. Jeff goes beyond icons, and incorporates SVG into his fisheye menu bar, as well as his website outliner graphic. Th
Introduction to RDFa
The web is designed to be consumed by humans, and much of the rich, useful information our websites contain, is inaccessible to machines. People can cope with all sorts of variations in layout, spelling, capitalization, color, position, and so on, and still absorb the intended meaning from the page. Machines, on the other hand, need some help. A new kind of web—a semantic web—would be made up of i
Semantics in HTML 5
I’m going to make a bold prediction. Long after you and I are gone, HTML will still be around. Not just in billions of archived pages from our era, but as a living, breathing entity. Too much effort, energy, and investment has gone into developing the web’s tools, protocols, and platforms for it to be abandoned lightly, if indeed at all. Let’s stop to consider our responsibility. By an accident of
Return of the Mobile Stylesheet
The past couple of years have seen numerous new web-capable mobile devices arise, including Apple’s iPhone and its Safari browser, the creation of Google’s Android platform and Webkit-based browser, the rise of so called “full web” browsers (Nokia’s S60, Opera Mobile and Opera Mini, among others), the early development of Firefox’s mobile version, and more. These mobile browsers improve users’ exp
Progressive Enhancement with CSS
Style sheet organization#section2 A lot of web designers and developers don’t think much about how they incorporate stylesheets into their documents, but there is a real art to it. With the right methods, you can immediately gain many of the benefits of progressive enhancement. Use multiple style sheets#section3 There are many benefits to getting a little separation in your styles. Obviously, styl
CSS Sprites2 – It’s JavaScript Time
A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that
Accessible Data Visualization with Web Standards
We’ve been talking about Web 2.0 for so long now it’s already passé to argue about what it means and what it doesn’t. But one thing’s for sure, there’s a lot of data out there on the web these days. And as web designers, we’re designing a lot of data-driven sites. There are plenty of options out there for data visualization, too. Google’s recently-announced Charts API is a great example, but there
Keeping Your Elements’ Kids in Line with Offspring
CSS selectors are handy things. They make coding CSS easier, sure, but they can also help keep your markup clean. For example, here’s a chunk of code that doesn’t use selectors well: <ul class="products"> <li class="product">Item 1</li> <li class="product">Item 2</li> <li class="product">Item 3</li> </ul> This textbook class-itis leads to messy CSS: ul.products { /* Properties here */ } li.product
A Preview of HTML 5
To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics. Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. Many key players are p
How to Size Text in CSS
There’s been a welcome resurgence of interest in web typography over the past year or so, with many articles and conference talks offering techniques and theory. Frequently asserted is the notion that good typography requires accurate control of font size and line-height. But this is the web: it’s a special medium where the reader can have as much control as the designer—the implication being that
Graceful E-Mail Obfuscation
In “Win the SPAM Arms Race” (A List Apart, May 2002), Dan Benjamin talked about the importance of hiding e-mail addresses on our websites from vicious, e-mail address harvesting bots—or spam bots, as they are more often called. Dan pioneered a JavaScript-based solution for bypassing the indexing mechanisms that spam bots use. Here’s a quote from the article: Posting a naked e-mail link anywhere on
If I Told You You Had a Beautiful Figure…
Let’s face it, images are a pain in the ass. Okay, well, maybe the images themselves aren’t the problem, but laying out images consistently within a design is difficult; especially when you hand the keys over to someone else to fill in the content. Sure, you can write a mountain of documentation that clearly informs your clients of the image widths your carefully constructed grid layout will accep
Conflicting Absolute Positions
On two separate occasions this month, I’ve been required to produce a layout in which a fixed-width scrolling side “pane” and flexible scrolling main “pane” must resize to fill all available space in a browser window. As a CSS purist, I’ve always tried to avoid such dynamic layouts, but sometimes they’re required. When they are, I like to have a good old grumble about the fact that I’ve resorted t
The Web Design Survey, 2007
A note from the editors: The ALA web design survey of 2007 is now closed. Thanks to all who took time to answer the 36 questions it posed. Our findings have been published. Enjoy. Designers, developers, project managers. Writers and editors. Information architects and usability specialists. People who make websites have been at it for more than a dozen years, yet almost nothing is known, statistic
Setting Type on the Web to a Baseline Grid
We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid. But we’re scrappy folks, web design
Multi-Column Layouts Climb Out of the Box
We all know the problems that arise when we try to build multi-column layouts in which the columns are of equal height. It has been well documented elsewhere, so I won’t go into the details here. A project I recently worked on required an elastic layout with two columns of equal height, each with a different background color. As usual, there was no way to tell which column would be taller. I immed
Flash Embedding Cage Match
It should be a simple question, but is likely to evoke a lot of different opinions and arguments, as each of the many available embedding techniques have their own pros and cons. In this article, I will look into the complexities and subtleties of embedding Flash content and examine the most popular embedding methods to see how good they really are. The key ingredients of a great Flash embedding m
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
