Webdesigninformer.com

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

Hicksdesign Go to the source

Todays 24ways article is Displaying Icons with Fonts and Data- Attributes , taken partly from Chapter 6 of the upcoming Icon Handbook , but rewritten to fit to the 24ways format. Instead of using the traditional route of PNG s, web fonts offer a scalable and resolution independent solution. Combined with HTML5 data attributes, you can create one CSS rule to style them all in one go. This article covers both the advantages and disadvantages of the technique. Thanks must go to Drew Wilson who helped me understand how to use data attributes. He created Pictos the excellent icon font used in the article, and his experience in making Pictos was a valuable source of research… 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

Eric Meyer Go to the source

[[ MARK IS FINE. Please see the update at the end of the post for the resolution. —E. ]] Just yesterday, I took a screenshot of the title page of Dive Into HTML5 to include in a presentation as a highly recommended resource. Now it’s gone. That site, along with all the other “Dive Into…” sites (Accessibility, Python, Greasemonkey, etc.) and addictionis.org, is returning an HTTP “410 Gone” message. … 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

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

Gridless Boilerplate : This has all the right buzzwords in the sales pitch — responsive, HTML5/CSS3, vertical rhythm, CSS normalization, and the like. The only snafu I see is that the placeholder image on the demo page isn’t responsive. I’ll trust that isn’t indicative of the rest of the framework, though I admit I haven’t dived into the code too deeply. … Read the rest here

Andy Budd Go to the source

In my previous post I stated that while I didn’t think responsive design was the right approach for every mobile experience, it was appropriate for 90% of cases and should become the natural default option. Sadly the current default for most organisations is to build a suite of device specific mobile apps. While giving designers control over layout and companies the ability to make a bit of extra money through app store sales, this seems like an expensive, labour insensitive and somewhat wasteful approach. Especially when you consider the relatively small number of app consumers, compared to the number of people who access the web through mobile devices. For most online companies a mobile optimised website is going to be the smartest option in terms of reach and ROI. I think one of the big problems with responsive design is that it’s a relatively new and unproven concept. … Read the rest here

Cameron Moll Go to the source

MotionCAPTCHA : Here’s an interesting take on CAPTCHA: MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the $1 Unistroke Gesture Regonizer algorithm , requiring users to sketch the shape they see in the canvas in order to submit a form. At the moment, it’s just a proof-of-concept — it only uses client-side gesture recognition, and doesn’t really have IE support — but the next releases will feature progressive enhancement and the ability to use this in production environments as a serious CAPTCHA alternative. I’m not a fan of CAPTCHA in general, but this is an idea at least worth entertaining. … 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

Textify : This is pretty rad. Convert any image into HTML text. Maybe this is how I should do my next letterpress poster. … Read the rest here

Cameron Moll Go to the source

Responsive Web Design by Ethan Marcotte : I have an advance copy in hand, and I can’t wait for this to be released to the general public on June 7. Ten bucks says it outsells the first A Book Apart title, HTML5 for Web Designers , which I’m fairly certain did extremely well. … Read the rest here

Cameron Moll Go to the source

The HTML5 Switch : Summary: There’s really no reason to postpone switching all your sites — big or small, existing or new — to the HTML5  doctype at a minimum . I support this argument and began doing this months ago. Read the full article for reasoning. … Read the rest here

Cameron Moll Go to the source

Funny Bugs is a non-profit endeavor our family has been working on over the past several months. We think kids with Type 1 diabetes deserve a fun, educational, and social experience for managing their diabetes and helping others do the same. We’re making plans to build that experience in our (very) limited spare time. Our 7-year-old son, a Type 1 diabetic, has been the chieftain of the project. Funny Bugs is literally a product of his imagination. … Read the rest here

Eric Meyer Go to the source

Yesterday, Brandy Fortune asked me on Twitter if there are “ any major sites written in HTML 5 now “. I decided to throw the question to my Twitter gang , and was of course immediately deluged in answers. Also a small helping of standards politics, which wasn’t really what I was after but probably should have known was inevitable. Le sigh. Anyway, here’s a sampling of the sites most frequently mentioned and how they’re using HTML5, listed in no particular order… Read the rest here

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

Adactio Go to the source

The last time I was in Chicago the weather was rather lovely. I spent some time walking around, gaping up at the skyscrapers and exploring the city. This time the weather has been a bit chillier. My attempts to venture out and explore the city on foot ended in defeat as I was beaten back to the warmer confines of the hotel playing host to Drupalcon . My first day, as anticipated , was spent hunting down a mythical FedEx/Kinkos so I could print out workshop materials—paper-based exercises and HTML5 pocketbooks . With that task achieved—at no minor expense; charging for ink on paper is clearly a lucrative business model—imagine my surprise when I turned up the next day for my workshop and I was handed the printouts of my workshop exercises; the same materials I had been told I would have to print out for myself… 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