Webdesigninformer.com

Snook Go to the source

It’s been a long time coming but I and the rest of the folks in Sidebar Creative are back this year with a brand new edition: the Web Design Master Class . We’ve partnered with UIE to put on not one, not two, but three workshops this year. Crazy, I know. Even crazier is that we’ve actually been rather quiet about the whole affair (well, except for the occasional tweet or two). Allow this venerable blog post to rectify that. What is the Web Design Master Class… Read the rest here

Andy Budd Go to the source

I’ve been coming to SXSW for 7 years and I’ve seen it change from a small and intimate event to the tech sector’s equivalent of Glastonbury. Back then bloggers were king and CSS2.1 was the hot technology of the day. Today the conference has gone from 2,500 people to an astonishing 25,000. Blogging is considered old hat, and the new tech superstars are the start-up founders, the professional publishers and the best selling authors. … Read the rest here

Eric Meyer Go to the source

When I saw Ian Lloyd tweet the words “Cunning. Like a fox. Neat little trick!” I knew I had to check it out, because Ian’s a sharp one. So I popped over to the linked CSS-Tricks article, Show and Edit Style Element , and checked it out. Cunning indeed! And yet, it immediately bothered me. … Read the rest here

Snook Go to the source

For years now, we’ve used a number of techniques for hiding content offscreen for accessibility purposes. We do this because the content is still accessible to screenreaders while being removed from the interface for sighted users. An article over at Adaptive Themes reviews a number of techniques for hiding content that were considered for inclusion on a Drupal 7 project (but certainly applicable to any project). Here is a summary of those techniques and the pitfalls of each technique: Text Indent .element-invisible { text-indent: -9999em; outline: 0; } Unfortunately, this technique doesn’t work with RTL (Right-to-Left) languages. Position Absolute and Collapsed .element-invisible { height: 0; overflow: hidden; position: absolute; } In this case, Apple’s Voice Over will not read content within an element that has zero height. Position Absolute and Offscreen .element-invisible { position: absolute; top: -999999em; left: auto; width: 1px; height: 1px; overflow:hidden; } In this case, if you have focusable content within the positioned element, the page will scroll to that element, thus creating an unsettling jump for sighted users. … Read the rest here

Cameron Moll Go to the source

Smashing Mag: Innovative CSS Techniques & Practical Solutions : If Fridays are your day to learn a new CSS trick or two, here you go. … Read the rest here

Eric Meyer Go to the source

Over the past couple of months, I’ve been hacking together some CSS3 tests . I did this to try to figure out what should be included in the upcoming fourth edition of the CSS Pocket Reference (and thereafter CSS: The Definitive Guide ) and didn’t plan to do anything public with them, but at this point, I figure what the heck. Maybe they’ll be of interest to others. I was especially interested by the results for list-style-type , where I found some small spots of support for various types in various browsers. In contrast, WebKit supports most of the CSS3 types, so far as I can tell, though in my install several types were apparently mangled by a lack of appropriate fonts. … Read the rest here

Hicksdesign Go to the source

I’ve met quite a few designers who are colourblind, but personally it affects my ability to distinguish between green and brown, or blue and purple. Tones and colour strength I can see, but certain colours are hard to tell apart. You might already know I originally trained as a wildlife illustrator. I knew which colours to use by the helpful names on the paint tubes, and even the more obscure names like Oxide of Chromium were memorable (it’s the best base for natural greens by the way). Then when I transitioned to print design, I used the CMYK system. Even if I couldn’t differentiate colours, I knew how to create, for example, a bright red numerically… Read the rest here

SimpleBits Go to the source

I wrote an article about creating an animated, image-free button with CSS3 and Typekit type and it’s been published today over at the Typekit Blog . Thanks to Mandy Brown for coordinating and editing it. In a way, the article is an extension to a lot of the stuff I talk about in CSS3 For Web Designers : using the experience layer as a place to fully embrace the pieces of CSS3 that have decent support today amongst modern browsers. Buttons are a perfect place to experiment that way—and embedded type makes them all the better, while remaining flexible. … Read the rest here

Eric Meyer Go to the source

I recently decided to create a CSS Editors Leaderboard , which is my attempt to rank the various editors of CSS modules based on the current process status of their modules, how current the modules are, and so on. It’s kind of a turn of the wheel for me, given that I started out my CSS career with browser support leaderboards. Now you can see who’s amassed the most spec points, and who’s made the most effective use of their time and energy. Who knows? Maybe some editors will try to game the system by pushing their specs along the process track. That’d be just awful . … Read the rest here

Snook Go to the source

As web developers, we want a way to ask “can you do this?” And there are varying degrees to which we can determine this. One of those ways is to use user agent (UA) detection. We ask the browser some information about itself and it tells us. Based on what we know about a browser, we can make certain assumptions. If a browser tells you it is Internet Explorer, chances are you support the HTML, CSS and JavaScript that Internet Explorer supports. This detection could happen on the server-side or client-side… Read the rest here

Cameron Moll Go to the source

Hiring: Mobile Web Developer at WillowTree Apps : Virginia-based WillowTree Apps has launched an impressive 70+ apps since 2008 for the iOS, Blackberry, Windows 7, and Android platforms. I was fairly impressed as I flipped through their portfolio. If you know HTML5/CSS3 inside and out, have a solid understanding of JavaScript, and have experience working with at least one high-level, server-side language, you’ll contribute to making their portfolio even more impressive. Position is in Charlottesville, and relocation assistance is offered for the right candidate. … Read the rest here

Mezzoblue Go to the source

If you’re not aware of it yet, HTML5 boilerplate is a fantastic starting point when creating a new site with its namesake markup language. But where Boilerplate focuses on basic document setup, external files, scripts, and bug fixes, it strikes me that it doesn’t do much hand-holding when it comes to basic document semantic patterns. As I’ve been working more and more HTML5 into my projects, I’m noticing a common template emerging. I’m sharing this as a minimum viable starting point since I’m still getting comfortable with the new semantics myself. Combined with Boilerplate, I’m feeling more and more confident that I’m beginning to use HTML5 properly. Don’t consider it canonical by any means, there’s likely a lot of room for improvement and it’s most certainly wrong in places… Read the rest here

Eric Meyer Go to the source

Earlier today, I updated the CSS Tools: Reset CSS page to list the final version of Reset v2.0, as well as updated the reset.css file in that directory to be v2.0. (I wonder how many hotlinkers that will surprise.) In other words, it’s been shipped. Any subsequent changes will trigger version number changes. There is one small change I made between 2.0b2 and 2.0 final, which is the replacement of the “THIS IS BETA” warning text with an explicit lack of license. … Read the rest here

Eric Meyer Go to the source

To follow up on my border-image post from Monday , it turns out that as currently written, border-image literally cannot take an image of a single symbol and repeat it around the border of an element. Instead, you have to create an image with at least eight copies of the symbol in a 3×3 grid pattern. Note that allowing a 3×3 grid pattern for border-image is potentially very useful, as it permits the creation of sophisticated border ‘frames’ with a single image. The objection I have is that it’s required , even in simple cases like the one I described in the previous post. The reason this 3×3 pattern is required is found in the description of border-image-slice , which states: The regions given by the ‘ border-image-slice ‘ values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts… Read the rest here

Eric Meyer Go to the source

As I dig into the nooks and crannies of the various CSS3 modules, I’ve come across something that seems like I should be able to do, but I can’t make it work in browsers. Now, I know as well as anyone that if you try to do something and browsers won’t do it, it might well be the fault of the browsers. Particularly if you can get various browsers to fail differently on the same declaration, as I have. But this is, bizarrely, complicated enough that it’s hard to be sure if it’s me or them. So allow me to pose this to you as a challenge. Given the following ideal rendering, how would you arrive at the depicted result using the single 5-pixel-by-5-pixel image shown within the content? … Read the rest here

Eric Meyer Go to the source

The W3C unveiled a new logo and branding strategy today. (You might have heard.) It brings all the deliciousness of a Soviet-era Transformers logo to the yummy conflation of several related technologies! Did you get your WOFF in my HTML, or did I get my CSS all over your HTML? As per usual, a lot of people have said a lot of things about this. For my part, I figure, hey, given that CSS3 is now a branded part of your nutritious HTML5 breakfast, why not go with the flow? … Read the rest here

Cameron Moll Go to the source

:toggle : A lovely toggle button demo by simurai using only HTML5 and CSS3. All it needs now is a badge. /via CSS3 Watch … Read the rest here

Eric Meyer Go to the source

Hey, any interest in spending a few days in a luxury lodge in the Great Smoky Mountains this coming spring with me and Aaron Gustafson, learning about and working with HTML5 and CSS3? Then you might want to sign up for Retreats 4 Geeks: HTML5 & CSS3 in the very near future, because it was announced late yesterday and as of now there are only six spots still available. It’ll be a very focused two days of training and a day of hands-on project work with a very small group of people, and it’ll be a ton of fun! Personally I’m looking forward to this for many reasons, but two stand out: this sort of very-small-group training and team project work setup is a new thing for me, and it’s the sort of thing I’ve thought about doing on and off for more than a decade but never quite found the time to do. Aaron, thankfully, did find the time and I’m honored that he asked me to take part. I hope I’ll see some of you this April in Tennessee! … Read the rest here

Adactio Go to the source

One of the many form enhancements provided by HTML5 is the datalist element . It allows you to turn a regular input field into a combo-box . Using the list attribute on an input , you can connect it to a datalist with the corresponding ID. The datalist itself contains a series of option elements. <input list=”suggestions”> <datalist id=”suggestions”> <option value=”foo”></option> <option value=”bar”></option> <option value=”baz”></option> </datalist> I can imagine a number of use cases for this: “Share this” forms, like the one on Last.fm, that allow you to either select from your contacts on the site, or enter email addresses, separated by commas. … Read the rest here

Adactio Go to the source

One of the many form enhancements provided by HTML5 is the datalist element . It allows you to turn a regular input field into a combo-box . Using the list attribute on an input , you can connect it to a datalist with the corresponding ID. The datalist itself contains a series of option elements. <input list=”suggestions”> <datalist id=”suggestions”> <option value=”foo”></option> <option value=”bar”></option> <option value=”baz”></option> </datalist> I can imagine a number of use cases for this: “Share this” forms, like the one on Last.fm, that allow you to either select from your contacts on the site, or enter email addresses, separated by commas. Using input type=”email” with a multiple attribute, in combination with a datalist would work nicely… Read the rest here