Mark Wyner’s journal

Find me at Bunker

I like to talk endlessly about anything related to the design and development of websites and mobile apps, technology, and the creative industry, which may tickle your fancy.

Wednesday, April 18, 2012

Apple’s Proposition for Managing Single/Double-Pixel Image Sets

Hear! Hear! Edward O’Connor, who works on web standards with Apple’s Safari/WebKit team, has proposed a standard for managing multiple-resolution images as an alternative to media queries.

Media queries are awesome. However, they aren’t ideal for managing multiple images served for both single- and double-pixel displays (most notably Apple’s retina display). Primarily because the code for calling them is managed in multiple places in the CSS. This complicates code management and in some browsers forces double downloads.

The media query looks like this:

#Logo {
 background: url(“/i/logo.gif”) no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
 #Logo {
  background: url(“/i/logo-x2.gif”) no-repeat;
 }
}

Solutions like SASS and LESS could provide us with a solution to help simplify code/asset management. Joe Lambert even wrote an extension for Compass/SASS which enables developers to manage images in one place while outputting code for devices with both pixel densities. But this doesn’t address the extraneous code (important on sites with high volumes of traffic) or the browsers which download both resolutions of each image.

Edward’s proposal looks like this:

#Logo {
 background: image-set(
 url(foo-lowres.png) 1x,
 url(foo-highres.png) 2x) center;
}

This essentially enables developers to manage assets in close proximity and with browser adoption only one asset would be downloaded. I strongly applaud this recommendation and hope the W3C takes a serious look at getting it implemented as a standard.

Wednesday, March 14, 2012

Future Friendly

Future Friendly logo

Ten web professionals Luke Wroblewski, Scott Jenson, Brad Frost, Jeremy Keith, Lyza D. Gardner, Scott Jehl, Stephanie Rieger, Jason Grigsby, Bryan Rieger, and Josh Clark are calling for their peers to remember that the web should be open rather than proprietary. Their well-defined argument, dubbed “Future Friendly,” outlines the following three things that can be done to continue on the right path:

  1. Acknowledge and embrace unpredictability.
  2. Think and behave in a future-friendly way.
  3. Help others do the same.

Their initiative may be a lot to chew for the newer generation of web/mobile professionals, but it speaks loudly to the seasoned. Especially people like me who helped create and build the movement of web standards and who have been dedicated to that practice for many, many years. And that’s where step 3 comes into play.

Many of us have worked for well over a decade to see web standards become commonplace. With the rise of proprietary technologies (especially in the mobile environment) it would be a shame to see standards once again fall behind. Future Friendly aims to help us stay the course.

Monday, October 31, 2011

A Brief History of Web Standards Infographic

The folks at Vitamin Talent collaborated with Eric Meyer and Jeffrey Zeldman to create a very pretty infographic called “A Brief History of Web Standards.” Visually, it’s stunning with a black matte and an array of vivid accent-colors. But the content therein disappoints me a bit.

Screen shot of History of Web Standards infographic

I am one of the pioneers of web standards. I’ve been building websites with web standards since I began writing code nearly fifteen years ago, wrote a avant-garde article on using CSS in HTML emails, and single handedly convinced the agency where I worked as an interactive creative director to adopt CSS and XHTML for their websites.

Because of my history with web standards I have a pretty solid understanding of its history. While this infographic outlines most of the most important milestones in the history of web standards I believe there are some key elements missing. Namely two of the most important in the history of web standards: WaSP and Mozilla.

WaSP (Web Standards Project) is undeniably one of the most influential components to building a web on standards. The name itself is evident of their relevance, but their actual contributions were immense. They helped shaped the standards and served as a sun in the growing universe of standards-compliant web design. Yet not so much as a mention of them in the infographic.

In the browser world, Mozilla’s contributions to web standards can not be understated. While Microsoft was serving itself with a forthright discontent for web standards, Mozilla was working feverishly to build a compliant browser to improve the lives of web designers as well as web users.

With Netscape’s announcement to release their browser source code as open source, Mozilla immediately got to work building the Mozilla browser. In 2002 Mozilla release Phoenix, which in 2004 became Firefox. It was the most compliant browser the web had seen. It was absolutely fantastic, and it gave web designers hope that a standards-based web was on the horizon.

2001 marked a critical year for CSS support on the web as IE 6 began showing signs of a future of support. 2003 presented us with Safari, which afforded us rock-solid standards support right out of the gate. And by 2004, with the release of Firefox 1.0, we had three promising browsers on the market.

So what troubles me is that this infographic affords Internet Explorer credit for propelling web standards with its increasing support for CSS and XMLHttpRequest, yet only one mention of Firefox as a panel in a quilt of standards-compliant browsers.

Every web designer who has helped shape web standards with years of battles and hard work knows that Internet Explorer has been an enemy all along. An enemy against production efficiency, browsing safety, and support for standards-based web technologies. And all the while Mozilla worked their asses off to help build a more access web with a browser that far surpassed IE’s support for CSS and other standards-based technologies.

So why is so much credit given to IE throughout this infographic while Firefox is all but unmentioned? I understand this is a brief history, but there was plenty of space afforded to Microsoft, so I would imagine there could have been space available for Mozilla. After all, Microsoft has been a thorn in the side of every standards-minded web designer in history, while we all had love for Mozilla.

I felt compelled to post this because I have worked hard over the years to help shape web standards. And because the names Eric Meyer, Jeffrey Zeldman, and Aquent are powerful enough to spread this infographic far and wide, it will likely cross the eyes of thousands of web designers, some knowledgeable about web standards and many new to web design as a whole. Consequently I believe credit for the history of web standards should be properly distributed. Unfortunately, with this particular infographic I believe it was not.

It’s awesome that they created this infographic and, as I mentioned, it’s beautiful. I simply believe it missed the mark on some key components of its makeup. And while I’m obviously a mite disgruntled I retain my unwavering love for Eric Meyer and Jeffrey Zeldman. Two people who should have their names permanently embedded into the core of the history of web standards.

Monday, July 18, 2011

Web Typography for the Lonely

Says the site’s proprietor, Christopher Clark:

Web Typography for the Lonely is an ongoing collection of experiments and writings on web typography and the possibilities of standards-based web design. It aims to inspire the web community by pushing the boundries of what is both possible and practical in web standards in a manner that is compelling and exciting to the visually-minded creative.

Double yes!

Via: cameronmoll

Friday, May 20, 2011

Web Technologies Go Mainstream Via Mobile Devices

From the first day I stepped into my profession as a web designer I have witnessed and even been a part of dialogue about which web technologies should reign. But these conversations, writings, and lectures have generally been restricted to professionals in the field. At least until now.

Blackberry is running a commercial which showcases how the Playbook’s browser can render Flash content on the web. With Queen’s song Flash Gordon running in the background they challenge Apple’s decision to not support Flash on the iPad.

Companies will pour cash into advertising their mobile devices, and because web technologies are core part of what differentiates one device from the next it is a reasonable expectation that we’ll see a lot more of this.

Wednesday, November 3, 2010

Microsoft Moving Silverlight Into HTML5 Realm

Microsoft has been making highly-incompetent products for years that have wasted countless hours of web designers/developers on a massive scale. And their response to criticism about this has always been “too bad—we’re Microsoft and we can do whatever we want.”

But as of late they seem to finally be playing well with others. First IE 9 promises to be their first browser to support web standards. Now there is buzz about their Silverlight product adopting, or at least supporting, HTML5.

It sure would be nice to see that happen. I would gladly welcome Microsoft to the table even if I do loathe their products. Because in a standards-based web, everyone is welcome. That’s the whole point.

Older entries