610 Design

CSS3 Media Queries

schoey — Thu, 19 Aug 2010 11:25:28 +0000

CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

CSS3 Media Queries (demo)

Check my demo and resize your browser window to see it in action.

Max Width

The following CSS will apply if the viewing area is smaller than 600px.

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

If you want to link to a separate stylesheet, put the following line of code in between the tag.

Min Width

The following CSS will apply if the viewing area is greater than 900px.

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Multiple Media Queries

You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Device Width

The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

For iPhone 4

The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier).

For iPad

You can also use media query to detect orientation (portrait or landscapse) on the iPad (credits: Cloud Four).

Media Queries for Internet Explorer

Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around. Below are some solutions:

CSS Tricks – using jQuery to detect browser size
The Man in Blue – using Javascript (this article is written 6 years ago)
jQuery Media Queries Plugin

Sample Sites

You need to view the following sites with a browser that supports media queries such as Firefox, Chrome, and Safari. Go to each site and see how the layout responds base on the size of your browser winow.

Hicksdesign

Large size: 3 columns sidebar
Smaller: 2 columns sidebar (the middle column drops to the left column)
Even smaller: 1 column sidebar (the right column shift up below the logo)
Smallest: no sidebar (logo & right column shift up and the other sidebar columns move below)

Colly

The layout switches between one column, 2 columns, and 4 columns depend on the viewing area of your browser.

A List Apart

Large size: navigation at the top, 1 row of pictures
Medium size: navigation on the left side, 3 columns of pictures
Small size: navigation at the top, no background image on logo, 3 columns of pictures

Tee Gallery

This one is very similar to previous example Colly, but the difference is the images of TeeGallery resize as the layout stretchs. The trick here is use relative percentage value instead of fixed pixel (ie. width=100%).

Conclusion

Keep in mind: having an optimized stylesheet for mobile devices doesn’t mean your site is optimized for mobile. To be truly optimized for mobile devices, your images and markups need to cut on the load size as well. Media queries are meant for design presentation, not optimization.

Source: Web Designer Wall

Useful CSS3 Tools

schoey — Tue, 10 Aug 2010 10:41:05 +0000

CSS3 continues to gain popularity as we’re seeing it used in more and more websites. However, there are still those out there that are holding out on learning it and using it. This is probably due to the fact that it’s not fully supported yet in all browsers. Nevertheless, if you’re one of those that haven’t started using CSS3 or you’re a CSS3 pro just looking to speed up your work flow, here are six CSS3 tools that you should find useful.

CSS3 Button Maker

The CSS3 Button Maker gives you a number of sliders and color pickers to style your own CSS3 button. Then you can grab the code to use in your own project.

CSS3 Generator

Select from a list of CSS3 properties, fill in a few parameters to fit your needs, and it spits out the generated code along with a live preview.

CSS3 Please!

CSS3 Please! is a CSS3 rule generator that acts as a sort of playground. It allows you make various CSS3 tweaks and see a live preview. Then you can copy and paste into your own file.

CSS3 Gradient Generator

The CSS3 Gradient Generator was created as a showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.

CSS3 Transforms

CSS3 Transforms gives you a set of sliders to experiment with various transforms such as position, rotation, skew and more. It also generates the corresponding code on the fly.

CSS3 Selectors Test

CSS3 Selectors Test automatically runs a large number of small tests which determines if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests.

Source: Web Design Ledger

IE-only Styles: Where Should They Be Placed?

schoey — Wed, 07 Jul 2010 10:30:34 +0000

Dealing with Internet Explorer is a fact of web design, and it isn’t going to go away anytime soon.

If not for some of the differences in the way IE6 and IE7 handle certain areas of CSS (whether it be margins bugs, float bugs, or other problems), CSS development would be so much easier.

Of course, as I’ve said in past articles on this website and others, I believe IE-only styles can be kept to a bare minimum, and in some cases you may not need any, but it’s unlikely that developers will end up so fortunate. So how do you divide your IE-only CSS styles? The options we have are as follows:

Option #1

A single IE-only stylesheet inside of a conditional comment; inside that file, different versions of IE are targeted with hacks.

Drawbacks to #1

Every version of IE will load the extra styles, even the unused ones
Potentially adds an extra HTTP request
Changing something in the main stylesheet may require that you hunt down IE-only styles in a separate file

Benefits to #1

IE styles are in one file, so they’re easy to maintain

Option #2

Multiple IE-only stylesheets inside conditionals, each targeting a different version of IE.

Drawbacks to #2

Changing something in the main stylesheet may require that you hunt down IE-only styles in as many as 2 or more extra files

Benefits to #2

No unnecessary HTTP requests
No unnecessary lines of code loaded in the main stylesheet

Option #3

A single stylesheet that targets all browser, but within that stylesheet, IE-only hacks are present.

Drawbacks to #3

Unnecessary lines of code are loaded for all browsers

Benefits to #3

No extra HTTP requests
No need to open multiple CSS files to adjust something that’s hacked for IE

Option #4

One or more JavaScript files inside of conditional comments that target different versions of IE, dynamically adding or removing styles and/or class names.

Drawbacks to #4

IE Browsers without scripting enabled will not see the corrected CSS
A slow loading script could cause the styles to be applied late, making the layout temporarily look awkward
Will be complicated to maintain, and could also require extra IE-only stylesheets, adding to the page bloat and slowness

Benefits to #4

Could work on buggy elements that won’t behave with pure CSS (I’ve seen this happen and have used this method when time/budget was limited and the CSS was too messy to deal with normally)

Option #5

Ignore IE.

Drawbacks to #5

Locking out a significant portion of your potential traffic/sales
Client screaming at you because the website looks like crap in IE

Benefits to #5

Only one hack-less stylesheet to maintain
Peace of mind (but short-lived because of the screaming client)

Conclusion

In most cases, you’ll be using option #2 (multiple conditionals that target different versions of IE). But don’t rule out using #3. In situations where you’ve only got 2 or 3 lines of CSS to target a single version of IE, I think the best option is to just put those extra styles in the main stylesheet and allow it to load for every browser.

Remember that for most client projects, Internet Explorer is the most used browser. If you’re adding multiple extra files for all those users, that’s more HTTP requests, and so you’re making the pages unnecessarily slow for most of your users. I think a few lines of CSS in the main stylesheet is much better than adding one or more extra HTTP requests.

Feel free to offer your thoughts if there are any benefits/drawbacks (or even methods) I haven’t mentioned.

Source: impressivewebs

Bits of JavaScript Every Designer Needs to Know

schoey — Thu, 10 Jun 2010 11:37:45 +0000

Although not programmers, every web designer needs to know at least a bit of JavaScript to do decently in one’s career. XHTML and CSS are great, but they can only do so much for a web page. Adding the interactivity and/or special effects that JavaScript can allow can not only enhance a design, but also lead to a more pleasant user experience.

This is not going to be an in-depth post on JavaScript, or anything like object-oriented material. Instead, this post will cover the basics of JavaScript that every designer must know to become better designers. In this post, we’ll cover some JavaScript features (and trends) that focus more on user experience and design elements themselves.

Accessing HTML Elements with JavaScript

Once a web page is loaded in plain HTML, it is set. There’s no more the browser can do with it to alter the image of a button, the style of a form, or the display of certain pieces of content. What the user sees is what the user gets.

However, JavaScript can play an excellent role in changing up the page after it’s loaded. This means we can do image rollovers (changing the image after the first image has been loaded), and we can change the style of a form as the user interacts with it. We can also use JavaScript to do some even cooler things, like show or hide divs for tabbed content.

How to Change up the HTML

So how do you change the HTML of a page after it’s loaded to do all the neat things we’ve mentioned above? First, we must access the element:

document.getElementById("elementid").HTMLATTRIBUTE = "value";

Once we’ve gotten a hold of a piece of HTML with JavaScript, we can change its attribute to whatever we like. Our main piece of code here is a built-in JavaScript function: getElementById(). With it, as long as we give any HTML element an id, we can grab it with our JavaScript code. Let’s take a look at a more specific example below:

Above is some basic HTML showing an image, with an id of “sideshowimage”. We can use the id to style it any way we want in our stylesheet, just as anyone would expect. We’ve also given our image an alt tag with an adequate description.

document.getElementById("slideshowimage").src = "bear.jpg";

Now, by using our JavaScript to grab out “slideshowimage” id element, we can change the source of our image. We can also change the alt tag to make it more relevant:

document.getElementById("slideshowimage").alt = "An image of a bear by the water.";

JavaScript has now altered our code, which with only HTML and CSS was set, to the following code:

Easy enough right? Simple knowledge of this kind of JavaScript action is the start to making pages more dynamic.

Accessing CSS with JavaScript

Accessing CSS styles is very similar to getting and changing the HTML attributes via JavaScript. In fact, it technically is changing an HTML attribute itself: the style attribute:

As anyone can guess, we just place style for the HTML attribute when accessing the image:

document.getElementById("elementid").style.STYLEATTRIBUTE = "value";

Because the style attribute in HTML can hold so many different values, we must get a bit more specific with our JavaScript code. We have to include “style” then the name of the specific CSS attribute afterwards. To clarify, below are the correct and incorrect ways of changing up the CSS:

Incorrect:

document.getElementById("elementid").style = "padding: 5px; background: #fff; border: 1px solid #ccc;";

Correct:

document.getElementById("elementid").style.padding = "10px";
document.getElementById("elementid").style.backgroundColor = "#aaa";
document.getElementById("elementid").style.border = "1px solid #555";

One more thing to point out is that CSS styles can vary a bit from JavaScript’s style syntax. For example, notice that in JavaScript, to change the background color we had to use backgroundColor. In CSS, we would use background or background-color. For the most part JavaScript abides by camelCase (first word lower case, and all remaining words capitalized, no spaces/dashes/underscores). However, if any others have you stumped there are plenty of resources online.

Events: Making it All Actually Happen

Just as the word implies, JavaScript events make things happen. We’ve covered so far the syntax for how to alter code, but we currently have no way to trigger it. Events are what do this.

The onClick event is one of the more popular JavaScript events. It can be applied to any HTML element, and when the described event happens — when the element is clicked — the event inside the quotes is triggered.

The code above creates a basic HTML button, and uses the onClick attribute for a JavaScript event. When the user clicks the button, the changeImage() function is called.

We can also put our JavaScript code directly in our event, without going to an external function. Note that we had to change our double quotes into single quotes within our JavaScript code, to keep our HTML from getting confused on when the attribute begins and ends. We can also use the “this” keyword to access the element we’re currently in — no need to grab an element by its ID if we’re already there.

Other Important and Commonly-Used Events

onLoad — Used in the tag of an HTML page. The event triggers when the page is loaded. Example: (Calls the sayHello() function right when the page is loaded. Will re-trigger on every Refresh.)

onBlur — Triggers when an element is clicked, and then clicked off. A common use of this is in forms for validation. If a user clicked on field, then clicks away, onBlur can run a validation function or any other piece of JavaScript code. Basically, onBlur triggers when something is clicked away from.

onFocus — The opposite of onBlur. Triggers when an element that can be focused is clicked. For example, a form input field.

onMouseDown, onMouseUp, onMouseOut, onMouseOver — All used with the interaction of the mouse. This is usually how image rollovers are created. When the mouse moves over an image – onMouseOver, the image changes, and then changes again when it moves away from the image – onMouseOut. onMouseDown and onMouseUp are similar, but with actual clicks of the mouse.

Check out Events and Event Handlers for more information on events and a more descriptive list of available events to use.

JavaScript Libraries

While JavaScript can do a lot on its own, libraries are increasing in popularity because they can provide even more features. Of course, what designers like most, is that these new libraries can provide a lot more in terms of design.

Many designers just jump into learning JavaScript through a library like jQuery or Mootools. However, a step-by-step guide to easy jQuery tabs or something similar will not help anyone as a designer long-term. It is still essential to learn the basics of plain JavaScript before jumping into using a JavaScript library.

While learning JavaScript is a great start, any library requires its own learning curve and has its own syntax or plugins. For a list of all JavaScript libraries, and even features organized by special features and effects, check out the JavaScript Libraries website. Despite the many options for JavaScript libraries, there are two that are most popular: jQuery and Mootools.

Learning how to work with these two, or any other libraries, is a great way to expand JavaScript’s capabilities. However, that is for another post. In the meantime, be sure to check out at least the jQuery and Mootools websites.

Conclusion

Anyone can see that JavaScript can be a powerful force to adding interaction and variation to web pages. Yet, even with all we’ve covered above, we’ve only touched the surface of what JavaScript can really do — for either developers or designers.

If you’d like to get more advanced, be sure to check out what AJAX, along with JavaScript has to offer, or just get into some more advanced JavaScript topics, from arrays to object-oriented programming. Also be sure to check out some of the resources we have listed above to find out more. Your web applications will be able to go much further with just a bit more learning!

source: onextrapixel

HTML5 Showcase – Flash Killing Demos?

schoey — Tue, 08 Jun 2010 17:22:25 +0000

So you’ve heard all rumors about HTML5 would take over Adobe Flash. While most web community argues that it’s possible or not, you must be wandering what makes HTML5 so powerful that even giant company Apple wants to use it to replace Flash.

That’s why this post exists, we’re not going to talk about what HTML5 can do, but show live demos of magical things that HTML5 can achieve with other language like JavaScript, so get ready to be inspired.

Note: As HTML5 is not fully supported by certain web browser like Internet Explorer, you’re strongly recommended to use Firefox browser to view all HTML5 demos below.

Animation

The HTML5’s canvas element is the deciding factor for HTML5 to replace certain Flash animation. It allows you to build dynamic, scriptable rendering of 2D shapes and bitmap images with Javascript, which by other mean is, controllable animation.

Audioburst Animation

A comfortable and fantastic animation created with HTML5’s canvas and audio tag.

Ball Pool

Being showcased in the last Google I/O event, this demo shows you how dynamic can HTML5 be.

Blob Sallad

A HTML5-spawned creature that would please you.

Bomomo

With Bomomo, you can observe different atomic movement simulated with HTML5.

Browser Ball

Get amazed with this ‘cross-browser’ HTML5 ball.

Bubbles

Have fun by create endless floating bubbles with different color.

Canvas Cartoon Animation

A simple and funny HTML5 cartoon that helps you to understand what HTML5’s canvas element can do.

Coolclock

A nice, customizable analog clock built by HTML5 and JavaScript.

Flickr PS3 Slideshow

View your Flickr’s photos with PS3 style slideshow in the web browser.

Interactive Polaroid

An interactive demo that works pretty similar to multi touch interface.

JS Fireworks

Enjoy the fireworks moment with your preferred gravity and speed, powered by HTML5 and Javascript.

Kaleidoscope

A very beatiful and futuristic HTML5 kaleidoscope.

Liquid Particles

Sensitive particle animation that reacts based upon your mouse movement.

Mesmerizer

Another sensitive and outstanding HTML5 demo that shows how nearby elements react with you mouse movement.

Nebula Cloud

Get lost with this wondrous HTML5 nebula.

Parallax

View all 2D shapes in parallel perspective.

Particle Animation

An elegant HTML5 particle animation that can form into your preferred message.

Spread

Get lost with this endless spread animation.

Starfield

A very cool HTML5 starfield animation that would change direction and speed based on your mouse movement.

Video Destruction

One click to boom a playing video.

Waveform

Observe how HTML5’s canvas wave moves by altering its amplitude, wavelength, width, etc.

3D Effect

Impressed by canvas animation? That’s more HTML5’s canvas element can do, and it’s called 3D effect. Developer can rely on canvas element, DOM and JavaScript to create 3D effect, which can later be developed into 3D animation or game.

Canvas3D and Flickr

Have a whole new 3D experience with Flickr’s photostream.

Cloth Simulation

A realistic, HTML5-based cloth simulation.

Evolving Monster

Observe a monster evolving into a complicated creature, one of its creator is HTML5.

Google Giftbox

Giant search engine Google is presented in 3D, playable view.

JS Touch

A high quality and realistic ‘3D on 2D Canvas’ showcase.

Data Presentation

While HTML5’s canvas element can be used to create animation and 3D effect, it can also be implemented to present mathematical data.

Gnuplot

Gnuplot, a data plotting application in HTML5 version.

RGraph

RGraph provides a wide range of data presentation like bar chart, progress bar and traditional radar chart.

Web Application

Ultimately, using all possibilities combined by HTML5 and other langauge, one can create interactive application or game that’s close to Flash application.

CanvasPaint

Witness the brother of Microsoft Paint comes into your web browser, and his father is HTML5.

CanvasMol

A scientific application which is built to help you to understand certain earth element’s structure.

Cartoon Builder

Draw interesting cartoon image with this minimal and interactive cartoon builder.

Drag Anything Here

Drag anything you can drag in the demo to show details.

Gartic Sketch

An original HTML5 application that allows you to make some basic drawings that can be saved into different image format like jpeg or png.

PhysicSketch

Draw whatever you like and see how they react with simulated gravity.

Sketchpad

A powerful HTML5 drawing application that enables you to draw and edit your image in the precise manner.

Smalltalk

A web application that confirms geographical position of weather-related message acquired from Twitter, thus forming them into a canvas-based ’social weather’ map, quite trivial (as stated by author) but interesting.

Game

3Bored

You would never get bored if you can keep evading hundreds of HTML5 bullets in next second.

Breakout

Rebound the ball to break all bricks.

Canvascape

Not quite a game, but it demonstrates how HTML5 can be used to develop First Person Shooting browser game.

Catch It

How many balls can you dodge to get your winning HTML5 square?

Chain Reaction

Chain the explosion to achieve the goal, don’t get addicted.

Cubeout

Play Tetris in 3D, top-down view.

etchaPhysics

Draw item to move the ball to the star, don’t forget about the gravity.

Jigsaw Puzzle

Click, rotate and drop puzzle pieces to solve this HTML5-based jigsaw puzzle.

Slide Puzzle

Slide to the victory, another HTML5 game that’s built to squeeze your mind juice.

Same Game

Remove certain group to get another group paired in same color and you would eventually be awarded a victory.

Tetris

One of the most classic game brought back to life by HTML5.

Torus

Yet another Tetris game in pseudo-3D version.

Conclusion

What is the limitation of HTML5? At this point we cannot decide, but with the impressive video below we can know how far the HTML5 has been pushed:

Yes, it’s Quake II in web browser, so now it’s very clear that with HTML5, more groundbreaking web application would be born to serve billions of internet users. It’s fast, it’s evolving, and it’s changing the world wide web. The question is, how would you use this game-changing HTML5?

We do like to hear your idea!

Source: hongkiat

11 UI Kits for iPhone and iPad Development

schoey — Tue, 08 Jun 2010 11:07:53 +0000

These are great for communicating early mockups and ideas, but when it’s time for those ideas to make the jump from paper to the computer screen, it’s helpful to have a library of UI elements at your disposal. Since we love saving you time, we’ve found some for you. Here are 11 UI Kits for iPhone and iPad Development.

1. iPad GUI Kit in PSD Format

2. iPhone GUI PSD 3.0

3. Free iPhone Toolbar Icons

4. Ultimate iPhone Stencil for Omnigraffle

5. iPhone UI Vector Elements

6. Free iPhone Toolbar Icons

7. Yahoo! Design Stencil Kit

8. iPad GUI PSD

9. iPad Vector GUI Elements

10. iPad Stencil for Omnigraffle

11. iPhone PSD Vector Kit

Source: web design ledger

Best Practices for CSS3

schoey — Fri, 28 May 2010 14:14:07 +0000

Since CSS3 has become such a big deal in the future-thinking minds of web designers today, I think it would be appropriate for front-end developers to begin formulating some best-practice habits and techniques so that any CSS3 development we do is done right, and we therefore are able to get CSS3 development off to a good start.

By no means do I assume that everything in this article is etched in stone and error-free, but I think this will be a good starting point for this topic, and I will be happy to add to or amend any points that anyone feels need adjusting or clarification.

Consider this a starting point for discussing best practices for CSS3, especially since there don’t seem to be many articles available yet that exclusively discuss CSS3 best practices.

Think Progressive Enhancement

The most accessible and widely-supported websites are those created with progressive enhancement in mind. Standards proponents have for years discussed the benefits of accessible, backwards-compatible content – specifically in relation to JavaScript and Ajax-based websites and applications.

The same principles apply to CSS3 development. Website and app visuals that are critical to the user experience should not be dependent on CSS3. CSS3 should be used to enrich and enhance an already fully-functional experience.

Since CSS3 has now crossed into a gray area of event-driven features, more care needs to be taken to ensure that non-supporting browsers do not greatly hinder the user experience.

Organize and Comment Vendor-Specific Syntax

Unfortunately, since many CSS3 features are supported with different proprietary syntaxes, this means that some parts of your CSS code will become bloated. But you can still keep those areas of your code organized by inserting comments indicating the browser version that the code is for, and also by keeping the different lines of code in a recognizable order with the standard format listed last.

It’s also best practice to list your CSS3 items last in the CSS declaration. So, for example, if you’re rotating an item with CSS3, your code might look something like this:

#rotation {
	float: left;
	width: 200px;
	-webkit-transform: rotate(-5deg); // chrome, safari
	-moz-transform: rotate(-5deg); // firefox
	-o-transform: rotate(-5deg); // opera
	transform: rotate(-5deg);
}

In the example above, I don’t believe the standard syntax is supported by any browser, but this code just serves as a way to theoretically demonstrate the method of listing CSS3 properties last, and the standard property at the end of the declaration. Keeping the CSS3 properties last will also ensure that any “fallback” properties are in their correct place. Which brings us to the next point.

Use Fallbacks for Background-Related Enhancements

Some of the new CSS3 features require that the background property be used. The background property is nothing new to CSS, but the possible values have been upgraded with CSS3, allowing use of RGBA, HSLA, gradients and even multiple background images.

In most cases, a non-supporting browser will still display a similar feature, and the lack of an HSLA or RGBA color will not affect the result. But with a gradient, you may need to declare an IE-only fallback in a separate stylesheet, or a background color that it will fall back to if a gradient is not supported.

So, you might need something like this:

#element {
	background-image: url(images/bg-transparent.png);
	background-color: rgba(98, 135, 167, .5);
}

In the case of multiple backgrounds, be sure to list the most important element first, so it serves as the fallback.

For most situations, I don’t think this particular practice will be necessary, but it’s good to keep in mind the possibility that a fallback color or background image may be needed.

Use Rotations, Animations & Scaling Sparingly

Although WebKit-based browsers have opened up some incredible possibilities with CSS3, we don’t want to get carried away. Subtle, tastefully selected events and animations are usually the best choice.

There’s a reason that Flash intro pages became a tiresome practice; they were often self-indulgent and pretty pointless, doing nothing but slowing down the user and making them download more resources than necessary.

To prevent the web from becoming filled with CSS3 trash, let’s use the new features carefully and in a dignified manner that doesn’t harm or slow down the user experience.

Be Careful With Typography

Making enhancements on text with CSS3 has become more common, and many sites are now employing the @font-face technique to use custom fonts.

Make sure that any typography-related enhancements do not affect the readability of the site. Sometimes, as designers, we take an overall view of a website’s layout, and try to make every little detail as beautiful as possible, but forget the most important thing: That the content should be accessible and readable.

So, if you’re considering using shadows, gradients, or transforms on typographical elements, think twice about it, and strip out any unnecessary enhancements that cause undue harm to the readability or accessibility of the site.

Test in All Browsers With Fallbacks Enabled

Testing of course is one of the most important parts of successfully adding enhancements. But the advent of CSS3 features may add more pressure in this area.

Don’t be content to just test the enhancements at full-throttle in the most supportive browsers; test in the non-supporting browsers while temporarily removing some of the enhancements, maybe one by one, to see the experience with fallback options enabled.

This makes commenting and organizing code even more important, and will likely add more quality assurance testing to many design teams’ schedules.

What Did I Miss?

Surely this is not a complete list. Add your comments below if you feel there are important CSS3 enhancements that require a best practice method or technique, and I’ll be happy to add to a few end-points to this article to round it out.

Source: impressivewebs

What’s the bug up Apple’s Appholes?

610design — Tue, 18 May 2010 10:53:07 +0000

Seriously, what’s gotten into Apple?

For the past decade of Steve Jobs’ second go-around as CEO at Apple, the company has secured a strong following of loyal customers by playing the role of the David in a world of tech Goliaths. You can see it in the famous Mac vs. PC ads: Apple is the everyman, and its competitor (Microsoft) is the stuffy, out-of-touch "Man."

But recently, Apple has either lost touch with its customer base or just has a bug lodged up its data port.

In late February, Apple purged 6,000 apps it deemed "too sexy." Late last month, Jobs posted a scathing 1,700-word essay on Apple’s Web site about why he hates Adobe Flash.

More recently, the company made Ellen Degeneres apologize on national TV for airing a spoof commercial that suggested the iPhone was difficult to use. And Apple threw an epic hissy fit when a Gizmodo blogger leaked photos of a new iPhone prototype.

The Gizmodo fallout prompted "Daily Show" host and admitted Apple lover Jon Stewart to label the company’s execs "Appholes."

"Apple, you were the rebels, man, the underdogs, people believed in you," said Stewart. "But now, are you becoming the Man?

In reality, Apple hasn’t been an underdog for years. Its iPod and iTunes’ success helped the company grow out of its "niche" status. And Apple really took off after the iPhone became an instant hit in 2007.

Apple’s market value is now about $245 billion — just shy of Microsoft’s $270 billion. And Apple’s revenue this year is expected to be on par with Microsoft, at around $61 billion.

Consumers still love Apple

It’s highly unlikely that Apple’s newfound status as "tech giant" and the associated attitude-copping will be a turn off for consumers.

"It’s going to take a lot more that a few controversies with Gizmodo, Ellen, or Adobe to halt the Apple momentum," said Jason Schwartz, author of Apple Revolution: The Religious Tech Wave of Decade 2010. "If anything, all the media attention adds to the appeal."

Apple did not respond to requests for comment, but most analysts agree that Apple’s products speak for themselves.

"People don’t care that Apple has been defiant — they’re used to Apple getting on its high horse," said Laura DiDio, principal analyst at ITIC. "As long as it keeps producing good products, consumers’ love fest with the company will continue."

This isn’t the first time that Apple has demonstrated a bit of arrogance. The company has stared down the music industry, created a notoriously tough admissions process for its App Store and maintained high prices on its Macintosh computers despite every other computer company slashing prices.

There are some skeptics out there who think Apple may have gone too far this time.

"We’re clearly seeing a backlash brewing against Apple, analogous to the backlash against Facebook," said Adam Hanft, CEO of marketing firm Hanft Projects. "Think back to the famous 1984 commercial — in a way the tables have turned. Apple is now in control much more than IBM ever was."

The comparisons to "Big Brother" IBM are perhaps apt, but there is a big difference. IBM and Microsoft made computers and software that were built to support business customers, and eventually those products trickled down to consumers. Apple, on the other hand, has always put consumers first, which has bought it a whole lot of good will with its customers.

"Apple’s close attention to consumers gives it more latitude to play some of these dominant games than Microsoft or IBM ever had," said Christopher Collins, consumer research analyst at Yankee Group. "But that doesn’t mean if you rub people the wrong way, it won’t affect customer behavior in the long run."

Collins said Apple’s strong stance against Adobe Flash could lead people to other products, namely Google’s Android platform, which will support Flash in its next release. Flash support is needed to view a significant amount of content on the Web, including a large share of online videos.

ITIC’s DiDio, who recently conducted a survey of 500 Apple users, found that customers are clamoring for Flash support, but said they would continue to buy Apple products even without it.

IPad sales quickly topped 1 million in a matter of weeks, and the iPhone shows no signs of fading.

"People will vote with their feet," said Hanft. "Will they punish Apple? It’s doubtful. Do you know anyone who moved their accounts when there was all that populist outrage against the banks?"

(CNNMoney.com)

Interviewing Web Developers – Good Questions to Ask

schoey — Tue, 04 May 2010 14:05:26 +0000

The company I’ve been working for is currently looking for a new web developer/designer. Prior to conducting the interview, I wrote up a list of technical questions I wanted to ask. I decided to build upon this list of question and put together a larger one that everyone could use – both for interviewers and interviewees.

The list is not specific to any particular type of development position, but I tried to balance it between both the design/html/usability side of things and the back-end/database/programming side. I’m just focusing on web development related questions – you should obviously ask the usual barrage of questions like “Why do you want to work for [some company?]” I’m not covering those types here. Also, this list isn’t in any particular order.

What industry sites and blogs do you read regularly?
This question can give you an idea of how in-tune they are with the latest industry trends and technologies, as well as how passionate they are about webdev. It’ll help separate the people who do it as a career AS WELL as a hobby from those who might simply be in it for the big developer paychecks.
Do you prefer to work alone or on a team?
This is an important question to ask depending on the work environment. If your project is going to require close interaction with other developers it’s very handy to have someone who has had that kind of experience. On the other hand, many developers thrive while going solo. Try to find a developer that fits your needs.
How comfortable are you with writing HTML entirely by hand? (+exercise)
Although their resume may state that they’re an HTML expert, often times many developers can’t actually write an HTML document from top to bottom. They rely on an external publisher or have to constantly flip back to a reference manual. Any developer worth a damn should at least be able to write a simple HTML document without relying on external resources. A possible exercise is to draw up a fake website and ask them to write the HTML for it. Keep it simple and just make sure they have the basics down – watch for mistakes like forgetting the tags or serious misuse of certain elements. If they write something like: , it might be a good hint to wrap things up and call the next interviewee.
What is the w3c?
Standards compliance in web development is where everything is (hopefully?) going. Don’t ask them to recite the w3c’s mission statement or anything, but they should at least have a general idea of who they are.
Can you write table-less XHTML? Do you validate your code?
Weed out the old-school table-driven design junkies! Find a developer who uses HTML elements for what they were actually intended. Also, many developers will say they can go table-less, but when actually building sites they still use tables out of habit and/or convenience. Possibly draw up a quick navigation menu or article and have them write the markup for it. To be tricky, you could draw up tabular data - give them bonus points if they point out that a table should be used in that scenario
What are a few of your favorite development tools and why?
If they say notepad you’ve obviously got the wrong person for the job. Not only can this help you gauge their level of competence, but it’ll also see if they match the tools everyone else uses in-house.
Describe/demonstrate your level of competence in a *nix shell environment
See how well they work without their precious GUI. Ask some basic questions like how they would recursively copy a directory from one place to another, or how you’d make a file only readable by the owner. Find out what OSs they have experience with.
What skills and technologies are you the most interested in improving upon or learning?
Find out if their future interests match the direction of the position (or the company in general).
Show me your portfolio!
A portfolio can say a lot about a developer. Do they have an eye for aesthetics? Are they more creatively or logically oriented? The most important thing is to look for is solid, extensive, COMPLETED projects. A half dozen mockups and/or hacked-out scripts is a sign of inexperience or incompetence.
What sized websites have you worked on in the past?
Find a developer that has experience similar in size to the project you’re putting together. Developers with high traffic, large scale site expertise may offer skills that smaller-sized developers don’t, such as fine tuning apache or optimizing heavily hit SQL queries. On the other hand, developers who typically build smaller sites may have an eye for things that large scale developers don’t, such as offering a greater level of visual creativity.
Show me your code!
Whether it’s plain old HTML or freakishly advanced ruby on rails, ask for code samples. Source code can say more about a persons work habits than you think. Clean, elegant code can often be indicative of a methodical, capable developer. A resume may say 7+ years of perl experience, but that could mean 7 years of bad, unreadable perl. Also, make sure you ask for a lot of source code, not just a few isolated functions or pieces of HTML. Anyone can clean up 20-30 lines of code for an interview, you want to see the whole shebang. Don’t ask for a full, functional app, but make sure it’s enough that you can tell it’s really what their code is like.
What are a few sites you admire and why? (from a webdev perspective)
Find out what inspires them. While it doesn’t necessarily “take one to know one,” a great developer should always have a few impressive favorites.
Fix this code, please.
Give them some broken code written in the development language they are expected to know for the position. Have them go through it line by line and point out all the mistakes.
I just pulled up the website you built and the browser is displaying a blank page. Walk me through the steps you’d take to troubleshoot the problem.
This is a great question to determine how well rounded their abilites are. It tests everything from basic support skills all the way up to troubleshooting the webserver itself.
What’s your favorite development language and why? What other features (if any) do you wish you could add to this language?
Asking about feature additions is a particularly valuable question – it can reveal if they’re skilled in programming in general or if their skillset is pigeonholed into their language of choice.
Do you find any particular languages or technologies intimidating?
I’ve often felt that the more I learn, the less I feel like I know. Solving one mystery opens up ten others. Having the interviewee tell you their faults can reveal a lot about what they know.
Acronym time (oh boy!)
Some might argue that knowing what acronyms actually stand for is trivial, but there are certain acronyms that a developer should have hard-wired into their head ( HTML or CSS, for example). This is the kind of question that might be better reserved for the phone interview to weed out those who are very unqualified.
What web browser do you use?
There is a right answer to this question: all of them. A competent developer should be familiar with testing cross-browser compatibility by using all the major web browsers. Obviously they’ll have a primary browser they use for surfing, but their answer to this question might be a good way for you to segue to asking how extensively they test cross-browser issues. Also, if it’s some kind of css/html position seeing what toolbars they have installed can be a good metric of their skillset (I personally find the web developer toolbar for firefox to be invaluable)
Rank your interest in these development tasks from 1 to 5 (1 being not interested at all, 5 being extremely interested)
Write up a list of tasks the job requires. Having them rank these items according to their interest level can help you find who is the best suited for the position. I know debugging uncommented perl code from 1997 sounds seriously awesome to me.
What are a few personal web projects you’ve got going on?
Almost all developers have personal web projects they like to plug away at in their spare time. This is another question that can help differentiate the passionate developers from the clock-punchers. It’s also a good question to end an interview with, as it’s usually easy (and fun) for them to answer.
What do you know about CSS3 and HTML5?
You can judge how up-to-date this person is one web trends.
What side of the Adobe -vs- Apple war are you on?
A fun question with no clear answer, since both sides can be argued. While this is a “fluff” question the interviewee should know about Apple’s iTouch, iPhone and iPads not supporting flash. Why Apple’s not support flash on those products and ways around it.

Sources: seomoz, Dey Alexander, Tech Interviews

5 awesome HTML5 demos

schoey — Tue, 27 Apr 2010 18:21:22 +0000

You’ve probably seen a bunch of tutorials or articles about HTML5 on design blogs recently, but didn’t try to use it because most users will not be able to view it anyway. Now to motivate you, I compiled a few HTML5 demos that should make you want to start learning this new markup.

Be aware that you may not be able to see some of the demos. To know what elements of HTML5 your browser supports, take a look at this chart.

5. Canvasmol

Another HTML5 demo using canvas, it shows you some molecules in a rotation.

And much more

On the HTML5 demo site, go take a look there.

Source: designer-daily

610 Design

CSS3 Media Queries

CSS3 Media Queries (demo)

Max Width

Min Width

Multiple Media Queries

Device Width

For iPhone 4

For iPad

Media Queries for Internet Explorer

Sample Sites

Conclusion

Useful CSS3 Tools

IE-only Styles: Where Should They Be Placed?

Option #1

Option #2

Option #3

Option #4

Option #5

Conclusion

Bits of JavaScript Every Designer Needs to Know

Accessing HTML Elements with JavaScript

How to Change up the HTML

Accessing CSS with JavaScript

Events: Making it All Actually Happen

Other Important and Commonly-Used Events

JavaScript Libraries

Conclusion

HTML5 Showcase – Flash Killing Demos?

Animation

3D Effect

Data Presentation

Web Application

Game

Conclusion

11 UI Kits for iPhone and iPad Development

1. iPad GUI Kit in PSD Format

2. iPhone GUI PSD 3.0

3. Free iPhone Toolbar Icons

4. Ultimate iPhone Stencil for Omnigraffle

5. iPhone UI Vector Elements

6. Free iPhone Toolbar Icons

7. Yahoo! Design Stencil Kit

8. iPad GUI PSD

9. iPad Vector GUI Elements

10. iPad Stencil for Omnigraffle

11. iPhone PSD Vector Kit

Best Practices for CSS3

Think Progressive Enhancement

Organize and Comment Vendor-Specific Syntax

Use Fallbacks for Background-Related Enhancements

Use Rotations, Animations & Scaling Sparingly

Be Careful With Typography

Test in All Browsers With Fallbacks Enabled

What Did I Miss?

What’s the bug up Apple’s Appholes?

Consumers still love Apple

Interviewing Web Developers – Good Questions to Ask

5 awesome HTML5 demos

1. APIrocks HTML5 slideshow

2. Sublime Video: a HTML5 video player

3. Blowing up HTML5 video

4. HTML5 canvas games

5. Canvasmol

And much more