Webdesigninformer.com

Adactio Go to the source

There’s been quite a brouhaha over the past couple of days around the subject of standardising responsive images. There are two different matters here: the process and the technical details. I’d like to address both of them. Ill communication First of all, there’s a number of very smart developers who feel that they’ve been sidelined by the WHATWG . Tim has put together a timeline of what happened : Developers got involved in trying to standardize a solution to a common and important problem. The WHATWG told them to move the discussion to a community group. … Read the rest here

Eric Meyer Go to the source

A couple of weeks back I wrote about customizing your markup , but I got an important bit wrong and while I’ve corrected the post, I wanted to clear up the error in detail. I said that you wrap portions of your document (or the whole thing) in an element element and use the customized element inside. This is incorrect , and actually a very bad idea. In fact, you define your customized elements using an element element and then use the customized elements later in the document. Something like this: <element extends="h1" name="x-superh1"> </element> <h1 is="superh1">UltraMegaPower!!!</h1> <h1>Regular Old Power</h1> The line break inside the element element isn’t required—I just threw it in for clarity. … Read the rest here

Adactio Go to the source

I’ve been huffduffing talks from this year’s South by Southwest , revisiting some of the ones I saw and catching up with some of the ones I missed. There are some really design and development resources in there that I didn’t get to see in person: Phil ’s talk on Excessive Enhancement: JavaScript’s Dark Side , Samantha ’s talk on Faster Design Decisions with Style Tiles , Josh ’s talk on Tapworthy Touchscreen Design , and Scott ’s talk on Why Mobile Apps Must Die . One talk I did get to see was Andy ’s CSS for Grown Ups: Maturing Best Practices . CSS for Grown Ups: Maturing Best Practices on Huffduffer It was excellent. … Read the rest here

Adactio Go to the source

While I was in San Francisco for the last Event Apart of the year in December, Luke pulled me aside while he was preparing for his A Day Apart workshop on mobile web design. As befits the man who literally wrote the book on web forms and also wrote the the book on mobile-first design , Luke was planning to spend plenty of time covering input on mobile devices and he wanted my opinion on one of the patterns he was going to mention. Let’s say you’ve got your typical checkout form asking for credit card details. The user is going to need to specify the expiry date of their credit card, something that historically would have been done with select elements, like so: January February March April May June July August September October November December 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 With the introduction of the new input types in HTML5 , we can now just use input type=”month” . That’s particularly nice on mobile devices that support input type=”month” like Mobile Safari since iOS5. But the behaviour on non-supporting browsers would be to display just like input type=”text” …not ideal for inputting a date… Read the rest here

SimpleBits Go to the source

Yesterday, a copy of my latest book arrived in the mail, the Third Edition of Bulletproof Web Design . The first edition came out back in 2005, and I’ve been revising it every few years. This latest edit was a bit larger than the 2nd because so much has changed. HTML5, CSS3, Responsive Web Design—all of these things dovetail nicely into the core bulletproof concepts from the original book. If you have the 2nd edition, the new version is likely not a necessary upgrade (New Riders probably loves me for saying that). Meaning, the guidelines for building flexible websites are still there, but a lot of the code and some of the examples have been brought up to speed. … Read the rest here

Adactio Go to the source

I’m on a workshopping roll. Fresh from running my Responsive Enhancement workshop in Belfast , I’m now heading to Düsseldorf for Beyond Tellerand where I’ll be running the workshop on Sunday (and if you can’t make it, don’t forget that you can book the workshop for your own workplace too). As part of the process of building a responsive site from the content out rather than the canvas in, I talk about beginning with the individual components divorced from any layout context. Or, as Mark puts it, “start with the bits.” That’s the way I’ve been starting most of my projects lately: beginning with the atomic units of content and styling them first before even thinking about layout. This ensures that those styles are extremely robust—because they don’t depend on any particular context, they can be safely dropped into an part of a part. I’ve been calling this initial collection of markup snippets a pattern primer… Read the rest here

Adactio Go to the source

Divya Manian , one of the super-smart web warriors behind HTML5 Boilerplate , has published an article on Smashing Magazine called Our Pointless Pursuit Of Semantic Value . I’m afraid I have to agree with Patrick’s comment when he says that the abrasive title, the confrontational tone and strawman arguments at the start of the article make it hard to get to the real message. But if you can get past the blustery tone and get to the kernel of the article, it’s a fairly straightforward message: don’t get too hung up on semantics to the detriment of other important facets of web development. Divya clarifies this in a comment : Amen, this is the message the article gets to. Not semantics are useless but its not worth worrying over minute detail on. The specific example of div s and sectioning content is troublesome though… Read the rest here

Adactio Go to the source

When I first heard that Hixie had removed all traces of the time element from the ongoing HTML spec, my knee-jerk reaction was “This is a really bad idea!” But I decided not to jump in without first evaluating the arguments for and against the element’s removal. That’s what I’ve been doing over the past week and my considered response is: This is a really bad idea! The process by which the element was removed is quite disturbing: Hixie (as a contributer) opens a bug proposing that the time element be replaced with the more general data element. Lots of people respond, almost unanimously pointing out the problems with that proposal. Hixie (as the editor) goes ahead and does what exactly what he wanted anyway. Technically that’s exactly how the WHATWG process works… Read the rest here

Adactio Go to the source

I’ve just finished speaking at An Event Apart in Washington DC (well, technically it’s in Alexandria, Virginia but let’s not quibble over details). I was talking about design principles, referencing a lot of the stuff that I’ve gathered together at principles.adactio.com . I lingered over the HTML design principles and illustrated them with examples from HTML5. It’s been a year and a half now since HTML5 For Web Designers was released and I figured it was about time that it should be published in its natural format: HTML. Ladies and gentlemen, I give you: HTML5forWebDesigners.com . Needless to say, it’s all written in HTML5 making good use of some of the new semantic elements like section , nav and figure . … Read the rest here

Cameron Moll Go to the source

Last Friday I posted a photo of these magnetic HTML5 elements from part of our homeschool curriculum, and several of you expressed interest in knowing how I made them. It’s pretty simple: magnetic sheets that are compatible with any inkjet printer. I’ve used Avery magnet sheets satisfactorily for similar projects. For this project, however, I used Office Depot magnet sheets . They have a glossy finish, whereas the Avery ones have a matte finish. Comparing the two, the ink seems to be more durable with the glossy finish… Read the rest here

Cameron Moll Go to the source

We’ve just unveiled this parallaxified mini-site as part of Authentic Jobs’ 6th birthday celebration. I had the pleasure of collaborating with Michael Botsko on the site. I had my hands on the design, while he wrangled the markup. There are a few imperfect details remaining to be polished, but overall I’m really pleased with the end result. Lest I focus unduly on the design, allow me to encourage you to take note of the site’s message: I need your help… Read the rest here

Cameron Moll Go to the source

Designers vs Coding : Frank Chimero, a relatively recent convert to HTML/CSS: Good design and good markup provide structure to content. Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside. … Read the rest here

Adactio Go to the source

Over on the HTML5 Doctor site, Oli has written a great article called Quoting and citing with <blockquote> , <q> , <cite> , and the cite attribute . Now, I still stand by my criticism of the way the cite element has been restrictively redefined in HTML5 such that it’s not supposed to be used for marking up a resource if that resource is a person. But I think that Oli has done a great job in setting out the counter-argument: By better defining <cite> , we increase the odds of getting usable data from it, though we now need different methods to cover these other uses. Oli’s article also delves into the blockquote element, which is defined in HTML5 as a sectioning root . Don’t be fooled by the name: sectioning roots are very different to sectioning content in a fundamental way. Whereas sectioning content elements— section , article , nav and aside —are all about creating an explicit outline for the document from the headings contained within the sectioning content (using the new outline algorithm ), the headings within sectioning roots ( blockquote , td , fieldset , figure , etc. … Read the rest here

Cameron Moll Go to the source

HTML Email Boilerplate : Tables for layout are lame, but they really are the only way to reliably craft HTML emails (currently). View source on the HTML email I sent recently and you’ll see markup similar to that of Sean Powell’s boilerplate. (I prefer only one td as a single wrapper rather than individual cells for the layout — div s can usually handle that just fine.) Update: Some of you have mentioned that the Authentic Jobs email I linked to doesn’t display nicely in Outlook 2007 or 2010 ( screenshot ). For the most part, I’m okay with those three items being stacked rather than in a row. However, if having your HTML email appear as similar as possible across all clients (which is still virtually impossible today), table cells are really the only way to go… Read the rest here

Cameron Moll Go to the source

These days it’s rare that I take on any client work — I have plenty of my own stuff to keep me unhealthily occupied. But WooThemes co-founder Mark Forrester and I have kicked around the idea of having me do a template for about two years, and I finally made time for it. It’s called Briefed , and I’m pleased as punch with how the WooThemes team turned my design into markup and templates. Naturally, as with almost any project, concessions had to be made, such as dropping from the demo the lovely Steelfish condensed typeface in favor an open source one. However, after purchasing the template, you can swap in your own typefaces (e.g. … Read the rest here

Cameron Moll Go to the source

Kickoff for Mac : This app’s mini-site has been making the rounds on Twitter today, and deservedly so. Try clicking some of the screens in the main slider, enjoy the well-crafted video, and have a peek at the HTML5 markup, too. And of course, download the app. … Read the rest here

Cameron Moll Go to the source

I’ve handed over several PSDs to the crew at WooThemes , a leading source for customizable WordPress themes. I’m quite pleased with how my WordPress template, which I’ve called Brief, turned out. It’s now up to their exceptional front-end team to turn my designs into markup and make adjustments as necessary. Besides embracing a minimalist approach for this project, I had another goal in mind for my template. I expressed the following in early conversations with WooThemes: I’d like this design to appeal to more than just the web designer crowd, i.e… 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

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

It was close to four years ago now that I first floated (ha!), publicly refined , and then published at its own home what’s become known as the “Eric Meyer Reset”. At the time, I expected it would be of interest to a small portion of the standards community, provoke some thought among fellow craftspeople, and get used occasionally when it seemed handy. Instead, it’s ended up almost everywhere. (This occasionally backfires on me when people use it in the CSS of e-mail campaigns, it’s exposed by older mail clients, and people then mail me to demand that I unsubscribe them from the mailing list. But that’s not the worst backfire—I’ll get to that in just a minute.) Four years is long enough for a revisit, I’d say… Read the rest here