Educate Your Clients

Clients sometimes approach Web design projects with specific ideas in mind. Many of them have read an article here or there or spoken with a self-proclaimed expert who told them that one rule or another of Web design was unbreakable. And so your client comes to you insisting that everything be kept “above the fold” or that you should do something that just doesn’t make sense to professional designers any more (and perhaps never did).

Enter Wee Nudge. It’s a collection of helpful articles, broken down by topic, that give you the information you need to convince clients that their way isn’t necessarily the only way to do things. Articles are from leading sources in the Web design and graphic design industries, including A List Apart, AIGA and more. (cc)
Read More By:


HTML5 Diagnostics With CSS

Whether you are working with a third party CSS code, or explore weird CSS quirks in your own code, often you have to dedicated some time for lengthy debugging sessions. But there is a little helper for you: Holmes makes it easy to find errant mark-up.

Essentially, the tool a diagnostic CSS style sheet that highlights possibly invalid or erroneous mark-up. Just add a single class, and it will create a red border around errors, a yellow border around warnings and a gray border around deprecated styles. In addition to the downloadable CSS style sheet, there’s also a Holmes bookmarklet that lets you apply holmes.css to any page in your browser. (cc)

Read More By:

20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates

I hope you have heard a little about CSS3 and HTML5. And I’m sure you’ve used at least one of the cool features they offer. But now it is time to use them at their full (or almost full) power.

You may be asking yourself “It is time to change? Should I forget everything I know and dive into this new world?”. Well dear padawan, you don’t need to do so. We have a lot of tools that make our transition to new and better technologies safer (ultimately we can’t just crash our customer’s website, we have bills to pay :D).

Frameworks are helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point.

This time we will talk a little about frameworks and other tools, like generators and templates.

So, let’s rock.

20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates

Continue reading

How to use Multiple backgrounds and Animation with CSS3

Multiple backgrounds with CSS3 and a little of animation

In CSS3 appear new possibility to use multiple backgrounds for the objects, in our new article I will demonstrate how to do it. And, I going to add a bit of JS code for simple animation (to make it not so boring). Commonly, it is very easy to apply multiple backgrounds – we just need to list them (separated by commas) in the object properties.

Here are samples and downloadable package:

Live Demo
download in package

Read more by:

The Future of Interaction?

Recently I’ve been having a number of conversations about the future of interfaces and how the way we interact with computers and information will likely change in the near future. These conversations are mostly in reference to Kinect.

We’ve come a long way from the days of the DOS prompt, although I do miss that blinking underscore C:\_ – it was like the pulse of the machine, the computer’s heartbeat, listening, waiting for instructions, trying to entice instructions out of us.

Continue reading

Jeffery Zeldman: HTML5 vs. HTML

THANKS TO THE WORK of the WHAT WG, the orations of Steve, the acclaim of developers, and a dash of tasteful pamphleteering, the W3C finally has a hit technology on its hands. Indeed, it has a cluster of hot technologies, the latest incarnation of what we’ve been calling “web standards” since we began fighting for them in 1998, when browser support for HTML, CSS, and JavaScript was inconsistent, incomplete, and incompatible, and the kingmakers of the day couldn’t have cared less. Moreover, after 13 years, the W3C has finally learned that it’s okay to market to your constituents—okay to actively encourage standards adoption.

Continue reading

Using CSS3: Older Browsers And Common Considerations

Source by:

With the arrival of IE9, Microsoft has signalled its intent to work more with standards-based technologies. With IE still the single most popular browser and in many ways the browser for the uninitiated, this is hopefully the long awaited start of us Web craftsmen embracing the idea of using CSS3 as freely as we do CSS 2.1. However, with IE9 not being supported on versions of Windows before Vista and a lot of businesses still running XP and reluctant (or unable) to upgrade, it might take a while until a vast majority of our users will see the new technologies put to practice.

While plenty of people out there are using CSS3, many aren’t so keen or don’t know where to start. This article will first look at the ideas behind CSS3, and then consider some good working practices for older browsers and some new common issues.

A Helpful Analogy

The best analogy to explain CSS3 that I’ve heard relates to the world of film. Filmmakers can’t guarantee what platform their viewers will see their films on. Some will watch them at the cinema, some will watch them at home, and some will watch them on portable devices. Even among these few viewing options, there is still a massive potential for differences: IMAX, DVD, Blu-ray, surround sound — somebody may even opt for VHS!

So, does that mean you shouldn’t take advantage of all the great stuff that Blu-ray allows with sound and video just because someone somewhere will not watch the film on a Blu-ray player? Of course not. You make the experience as good as you can make it, and then people will get an experience that is suitable to what they’re viewing the movie on.

A lot about CSS3 can be compared to 3-D technology. They are both leading-edge technologies that add a lot to the experience. But making a film without using 3-D technology is still perfectly acceptable, and sometimes even necessary. Likewise, you don’t need to splash CSS3 gradients everywhere and use every font face you can find. But if some really do improve the website, then why not?

However, simply equating CSS3 to 3-D misses the point. In many cases, CSS3 simply allows us to do the things that we’ve been doing for years, but without all the hassle.

Continue reading

Apps vs. the Web

by Craig Hockenberry

Pull the iPhone out of your pocket and look at the home screen. Likely, you’re seeing some well known brands on the web: Facebook, Flickr, and Google to name just a few. You’ll also see companies like Amazon, Target, and Walmart which sell a lot of products via the web.

Like you, these sites and companies know how to build an effective website using the latest and greatest web technologies. The iPhone’s Safari browser also supports HTML5 markup with CSS3 styling and is powered by a fast JavaScript engine. So why is there a proliferation of apps instead of web pages that can do the same thing?

Longtime A List Apart readers may remember the Put Your Content in My Pocket articles I wrote soon after the iPhone launched. Recently, I published a book that explains how to create products for the iPhone App Store. With this article, I’d like to share my experiences with both mobile web and software development to guide your future developments on the iPhone platform.

Apple ❤ standards

From Apple’s point of view, iPhone OS and web technologies share equal footing. When you visit their developer site, the Safari Dev Center is prominently displayed. The iPhone gets all the press, but when you click on Safari Dev Center, there’s a ton of great information that explains how to use HTML, CSS, and JavaScript on an iPhone.

When you look back on your first experiences with the iPhone, one app stands above the others: The Safari web browser. Suddenly you were free from a mobile internet full of crappy CSS support or dumbed down presentation-like WAP. The iPhone’s real browser and the fact that it was in your pocket changed how you used the web.

Apple continues to invest heavily in the development of the WebKit browser engine used in Safari on the iPhone, Mac, and Windows. The result is a browser that excels in HTML5 and CSS3 support.

Continue reading