22 Aug 2012 2 pm eastern

HTML5 Video Player II

JOHN DYER’S MediaElement.js bills itself as “HTML5 <video> and <audio> made easy”—and that’s truly what it is:

For complete information, visit mediaelementjs.com.

Hat tip: Roland Dubois.

Filed under: Design, development, Formats, HTML, HTML5, Products, software, State of the Web, Tools

Comments off.

31 Aug 2011 2 pm eastern

HTML5 Video Player

  • Free & Open Source
  • Lightweight. NO IMAGES USED
  • 100% skinnable using CSS
  • Library independent
  • Easy to use
  • Easy to understand & extend
  • Consistent look between browsers
  • Full Screen & Full Window Modes
  • Volume Control
  • Forced fallback to Flash (even when there is an unsupported source)

HTML5 Video Player | VideoJS.

Filed under: Design, HTML5, Tools, video

Comments off.

18 Aug 2011 8 am eastern

Advanced web design links

FROM MY TWITTER STREAM of late:

Okay, that last one isn’t a web design link and the Apple comment could go either way, but that’s how I roll. Follow me on Twitter for more snarkeractive funucation!

Filed under: business, creativity, CSS, CSS3, style, The Profession, Tools, twitter, Typography, Usability, User Experience, UX, Zeldman

Comments off.

7 Jun 2011 9 am eastern

Responsive Web Design – The Book

SOME IDEAS SEEM inevitable once they arrive. It’s impossible for me to conceive of the universe before rock and roll or to envision Christmas without Mr Dickens’s Carol, and it’s as tough for my kid to picture life before iPads. So too will the internet users and designers who come after us find it hard to believe we once served web content in boxy little hardwired layouts left over from the magical but inflexible world of print.

I remember when the change came. We were putting on An Event Apart, our design conference for people who make websites, and half the speakers at our 2009 Seattle show had tumbled to the magic of media queries. One after another, CSS wizards including Eric Meyer and Dan Cederholm presented the beginnings of an approach to designing content for a world where people were just as likely to be using smart, small-screen devices like iPhone and Android as they were traditional desktop browsers.

Toward the end of the second day, Ethan Marcotte took what the other speakers had shared and amped it to 11. Suddenly, we had moved from maybe to for sure, from possible to inevitable. Ethan even gave us a name for his new approach to web design.

That name appears on the cover of this book, and this book represents the culmination of two years of design research and application by Ethan and leading-edge design practitioners around the world. Armed with this brief book, you will have everything you need to re-imagine your web design universe and boldly go where none have gone before. Happy reading and designing!

Jeffrey Zeldman,
Publisher,
Responsive Web Design

Filed under: A Book Apart, Authoring, Best practices, Design, Responsive Web Design, The Essentials, Tools, Usability, User Experience, UX, Web Design, Web Design History, Web Standards, writing

Comments off.

10 Jan 2011 8 am eastern

Own Your Data

Captured from Twitter, here is Tom Henrich’s partial reconstruction of my conversation with Tantek Çelik, Glenda Bautista, Andy Rutledge and others on the merits of self-hosting social content and publishing to various sites rather than aggregating locally from external sources.

via Own Your Data / technophilia

Filed under: apps, Best practices, Community, content, Design, social networking, software, Standards, State of the Web, Tools, Usability, User Experience, UX

Comments off.

16 Dec 2010 12 pm eastern

Science illustrations, cost and royalty free

The IAN symbol libraries contain over 1500 custom made vector symbols designed specifically for enhancing science communication skills. The libraries are designed primarily for use with Adobe Illustrator (requires version 10 or better), however we also offer eps and svg versions for non-Illustrator users. The symbols allow diagrammatic representations of complex processes to be developed easily with minimal graphical skills.

Our aim is to make them a standard resource for scientists, resource managers, community groups and environmentalists worldwide. Currently downloaded by 58747 users in 239 countries and 50 U.S. states.

The libraries are provided completely cost and royalty free.

via IAN Symbol Libraries (Free Vector Symbols for Illustrator) – Integration and Application Network.

Filed under: Design, Free, Tools

Comments off.

7 Dec 2010 1 pm eastern

Cure for the Common Webfont, Part 2: Alternatives to Georgia

For nearly fifteen years, if you wanted to set a paragraph of web text in a serif typeface, the only truly readable option was Georgia. But now, in web type’s infancy, we’re starting to see some valid alternatives for the king of screen serifs. What follows is a list of serif typefaces that have been tuned—and in some cases drawn from scratch—for the screen.

Stephen Coles, December 6, 2010:
Cure for the Common Webfont, Part 2: Alternatives to Georgia

Filed under: Design, Fonts, Tools, type, Typekit, Typography, webfonts, webkit, Websites, webtype

Comments off.

1 Dec 2010 12 pm eastern

Episode 29: Matt Mullenweg

Matt Mullenweg, founding developer of WordPress

Matt Mullenweg, founding developer of WordPress, will be our guest Thursday December 2nd, 2010 during Episode No. 29 of The Big Web Show (“Everything Web That Matters”), co-hosted by Dan Benjamin and recorded at 1:00 PM Eastern before a live internet audience.

Matt is, well, Matt is awesome, and you can read about him here.

The Big Web Show records live every Thursday at 1:00 PM Eastern on live.5by5.tv. Edited episodes can be watched afterwards, often within hours of recording, via iTunes (audio feed | video feed) and the web. Subscribe and enjoy!

Filed under: Big Web Show, The Big Web Show, Tools, wordpress

Comments off.

25 Nov 2010 9 am eastern

Finally, cross-browser visual control over forms.

Now we have something else to be thankful for. Nathan Smith of Sonspring has created a library that gives designers and developers “some measure of control over form elements, without changing them so drastically as to appear foreign in a user’s operating system.” Smith calls his new library Formalize CSS:

I’ve attempted to bridge the gap between various browsers and OS’s, taking the best ideas from each, and implementing what is possible across the board. For the most part, this means most textual form elements have a slight inset, and all buttons look consistent, including the button tag.

For more, including demos, options, screenshots, thanks, and the library itself, read Smith’s write-up at SonSpring | Formalize CSS. Hat tip and happy Thanksgiving to my good friend Aaron Gustafson for sharing this gem.

Filed under: Browsers, bugs, Code, CSS, CSS3, Design, HTML, interface, javascript, launches, Layout, maturity, Standards, State of the Web, Tools

Comments off.

26 Oct 2010 1 pm eastern

BBEdit Revised, Reviewed.


Jeffrey Zeldman Presents

I RECENTLY ATE dinner with a friend I hadn’t seen in 20 years. If you are in a position to do likewise, I highly recommend the experience. So much had changed, yet so much was still wonderfully the same. We were still the same joyously creative young fools, yet time had seasoned us. No longer poking the world with sharp sticks, we had found a place in it. I was pleasantly reminded of this existentially thrilling encounter while opening a pre-release version Bare Bones Software’s BBEdit 9.6 update—released to the public as of 12:19 EDT today.

A beloved and venerable HTML and text editor for Macintosh, BBEdit is tailored to the needs of web developers and designers who write their own code. Its no-frills interface consists of a document window in which you write your code; a side drawer that lists all pages you’re working on, enabling you to navigate between them; a stack of buttons (many with drop-downs) you can push to perform tasks like choosing and inserting a DOCTYPE, wrapping chunks of copy in paragraph tags, checking syntax and links for errors, and more; and a report window where you can view your test results and correct your errors.

Previous versions of BBEdit were updated with the precepts of Designing With Web Standards in mind, and the current version takes some of its feature cues from Jeremy Keith’s HTML5 For Web Designers. (When I say the software takes its cues from Mr Keith’s book, I mean that literally; Bare Bones Software head Rich Siegel and his team used HTML5 For Web Designers to help develop some of their testing suites.)

Given these antecedents, it’s no surprise that the new version adds support for HTML5, including published element lists from WHATWG and W3C; CSS3 properties, including vendor-specific properties for Mozilla, Safari/WebKit, and Opera browsers; a new contextual code-hinting feature tied to your chosen doctype that includes as-you-type popups for allowed elements, attributes, and (in CSS documents) style properties; and Bare Bones’s own offline validator (HTML 3.2 through HTML5, XHTML inclusive), baked right into BBEdit.

Using BBEdit 9.6 this morning, I was able to quickly update my site from XHTML 1.0 to HTML5. The syntax checker enabled me to use my preferred coding style (i.e. XHTML style) and the product identified outmoded attributes (“language=JavaScript”) and elements (“rev”), enabling me to correct them right in the error report window. It took no time at all.

BBEdit 9.6 also found the errors in WordPress plug-ins like fbLike Button and TweetMeme Retweet Button, enabling me to make an informed decision to stop using the former plug-in and helping me edit the PHP files of the latter plug-in so that it now validates here.

BBEdit 9.6 also offers increased performance for several common
operations, including search, and includes several enhancements and
refinements, plus fixes for reported issues. Detailed information on
all of the changes and improvements in BBEdit 9.6 can be found on the Release Notes page.

After using the new version for two days, I am switching back to BBEdit as my full-time coding platform.

BBEdit 9.6 is available free of charge to all registered BBEdit 9 customers from the Bare Bones Software website on the BBEdit Updates page. For more information, or to download a fully functional demo, visit Bare Bones Software’s site.

Filed under: CSS, CSS3, Design, HTML5, software, Standards, Tools

Comments off.