When we had our ConvergeSE conference earlier in June of this year we talked a few of our favorite web designers/developers into being on a panel for us and answer a few questions about how they’re using HTML5/CSS3, their business and then took some questions from the audience.
Gene Crawford: I wanted to introduce Unmatched Style before you get going. If you are not familiar with it, we have a web gallery, we review websites, we have a podcast and stuff, we will do stuff like this whenever we get a chance. So, It would be really cool if you check us out. And I will let each person introduce himself. This is really cool and I thank everybody for doing this because we have some really cool coverage from the Internet [the web design community]. We have Yahoo, Yahoo Development Network, we have Chris Coyier who runs his own site, but he’s mostly Wufoo. We have Matthew Smith, venerable designer from Squared Eye, and we have Jason Beaird who is also awesome and he works with MailChimp. So that’s pretty cool.
So, why don’t we just start with an introduction, and I know I just did that but just in your own words, just tell about what you do where you are.
Jonathan LeBlanc: OK, well I am Jonathan LeBlanc, I work with the Yahoo Developer Network in Sunnyvale, California. I work as a technology evangelist and senior software engineer, working primarily with emerging technologies coming out of Yahoo, anything that is brand new, API, services as well a lot of open source initiatives that the company takes on. We work with partners and developers to onboard them into using those services.
Chris Coyier: Wow. [laughter]
Jonathan: I am long-winded by the way.
Chris: I just think the Internet is awesome. [laughter]
Chris: It’s like my topper-all. CSS-Tricks is my blog and I jump around and go to conferences like this too, recently started working for Wufoo. So, if you are in the design thing and you saw Kevin [Kevin Hale] on like, Kevin’s new under link and design at Wufoo but, yeah, that’s me.
Matthew Smith: My name is Matthew Smith; I am the principal and creative director slash designer at SquaredEye, my business and I am a newbie. I am having a front time with the web, but it had only been out a couple of years, three years and having a good time trying to figure out how to make this work.
Gene: I think you are doing a good job for newbie.
Matthew: Thanks, man.
Jason Beaird: My name is Jason Beaird. I’m the author of “Principles of Beautiful Web Design,” that’s most people know me for, but I’m also a newbie. I think if you don’t stay feeling like that, then there is something wrong, because there is always something to learn here. And I work as a user experience designer at MailChimp. I work with Aarron Walter who is the lead user experience designer who will be talking tomorrow.
Gene: I want to dive right in with something that everybody is into right now, HTML5. To what extent are you using HTML5 in your company’s products or your own projects with clients?
Jonathan: Sure. So Yahoo has a quite number of users that come to its site, I think some around three hundred plus million, yeah, three hundred plus million users that come to the front page. So, we have been very careful about new initiatives and we have to really take a look at the new emerging technologies and how they would actually fit with our systems.
To that end, we have taken more of a careful approach to how we utilize HTML5. We have a iPad application, the Yahoo Entertainment Application, which uses a smattering, I guess, of HTML5 components and CSS3. So local storage, the HTML5 video components as well as some of the CSS3 rounded corners things that I swore I didn’t talk about but here I am.
Jonathan: And then we have the Yahoo News video site and that uses HTML5 as well for, but it has a graceful degradations system so it will degrade back to HTML5, sorry, back to Flash video. So, that’s pretty much the extent to which we use it, but we do have a lot of new services coming out that we will start using it.
Gene: It’s a lot of stuff.
Chris: Yeah. I like being the follow-up guy…
[crosstalk and laughter] I made a website for my brother and I made it in HTML5, I used the article tag and it was awesome.
Jonathan: But honestly the smaller shops are the ones that really have the chance to make a difference and a chance to push the initiative forward. Large companies like Yahoo have to take a very literal approach to how they take it. I would love to be in a small shop that would be able to just explore and implement as much as possible.
Chris: You can, because you can just… The Android, can I use it now? Sure, throw the doc type on there, throw that shiv thing in there so you can CSS styles those things, and have at it. You still get it. If you want to use video, you have to use Fallback. What was it, just two days ago, yesterday or something, IE9 said that they are going to be starting Canvas which is part of that. And that’s kind of a big deal. Because now everybody is supporting Canvas. That’s a big deal.
Gene: Yeah, except five, six, and seven, and eight. Just kidding. No, but it’s….
Matthew: So, in another 20 years we’ll all be supporting Canvas.
Chris: And a huge part of… well, I don’t know about huge. A part of HTML5 is forum stuff. So clearly that impacts Wufoo too.
Chris: I don’t have any big plans or anything. Whatever. Certainly forums plus HTML5 is awesome.
Matthew: I think for us we have a couple of opportunities to do some experimental things. For all the client projects that we do, we skim part of the budgets off of those to provide a budget for our group to be able to do some side projects. So, one of those we’re doing a t-shirt shop coming up that sort of meets what we feel is like a need in the market. It will use some HTML5. But, on the whole, we don’t use it a whole lot.
I think that it’s really fun. I think that it’s engaging. I think it’s worth experimenting. But, for now, I’d say that it’s the territory of side projects.
Pattern Tap will use some HTML5 and CSS3 because we can demand that, hey if you are not using browsers that are using this technology you honestly shouldn’t be browsing Pattern Tap.
Gene: Right. And I think your audience would sort of support you in that.
Matthew: Absolutely. Even with the old Pattern Tap we had seven percent total IE users and that was all versions. But presently, it’s something fun to play with but we are not moving it into our clients’ sites. It’s not appropriate yet.
Gene: What about MailChimp?
Jason: The user experience team MailChimp, we always like playing with all the new stuff that comes out. But, the main place we are looking for, like Chris said, is with forums. In the forums that you have, if you have a mail list, you can customize those in MailChimp. And try to make those all HTML5 based as well. Right now, they’re table-based because the same forums are used to send out like the welcome email and the other stuff. And the email clients are really, really horrible at rendering HTML if you haven’t experienced that.
So, we are trying to set the forums up to where the stuff that faces the web is always HTML5 set up for that. That will be a coming release.
Gene: Well, I have to ask the question where we talk about CSS3. So, I want to ask you, if you can, with the exception of rounded corners and drop shadows, how are you experiencing using CSS3 for some of your work?
Jason: Well, since we dropped support for IE6 at MailChimp, it gives us a lot of opportunities to do a lot of things with rounded corners and drop shadows. It allows us to give a graceful degradation to the IE users, some of the CSS3 stuff that aren’t supported, we put in gradients and things. All the different vendor browser prefixes. And do some cool stuff where we can… The main opportunity there is to drop images, to reduce the page weight of your application by doing it with CSS.
Matthew: Yeah, that would be almost identical to what we’re doing. Other opportunities like multiple background images and things like that are really fun. For me, one of the things I like to experiment with is what you can create with multiple background images positioned differently in the same development.
If, either the browser changes, you can create more custom textures and things like that by using transparent repeating backgrounds and position the different elements. And so that’s a nice way to handle some things, and its worth experimenting with some of those. If you don’t follow, Trent Walton is doing some really nice stuff in CSS3, and worth checking out.
But, ultimately, in many respects, other than these side projects, that’s the territory of a lot of experimentation for us right now. We like to utilize it, but one of the things that we keep running into is we evaluate it based on the budget.
Because of the level of work needed to help degrade, it can be a real scope launch. I mean it can just throw it through the roof. So we evaluate. Is it important for the client to feel the sexiness of CSS3? And if they want that, if that’s part of their audience, then we will introduce that. Like Blue Sky was a good example. We are their audience. And so they were like, yeah, let’s try this. And so the website is full of CSS3. And we did a lot of @font-face stuff for them also.
Gene: No, no. Absolutely.
Chris: That’s pretty well explained. I’ve been kind of confused about that one. So, it’s the opposite of Modernizr in a way. With Modernizr, you have to write a lot of CSS to accommodate all those situations. So, it is kind of like the opposite of that, in that keep your CSS clean, but still get all the benefits.
Jonathan: Now, the first thing I want to say is, I very much envy MailChimp for being able to drop IE6 support. [laughter]
Jonathan: OK, I am going to go into gripe mode a little bit about CSS3. Love it, love all the standards, but I just want to touch on one thing.
Font faces, back when I first started working with a webhost 14 or so, and I built my first little site. I was like, hey I can specify fonts, and let me go ahead and do that. Look how awesome this looks. Then I would show it to my friend, what it looks like Times New Roman. That’s when I realized that fonts were really completely useless. Now, within CSS3, this ability to just set realistic fonts, without having to use things like some sort of Flash utility to replace real text with flash implementation, instead of stylized text. Then you get into the same problem that we did with the last standard. Where you have these powerhouse companies like Microsoft, Mozilla, and Google now, trying to throw their weight behind different font standards. So, you have Microsoft supporting EOT, and then TTF is on everywhere else. Then there’s one other…
Matthew: WOFF. WOFF is – I’ll just jump in briefly to say, like WAF is the new standard that more and more people are getting behind. And the major font boundaries are, for this reason, to bring it to a standard so that hopefully we won’t have as much of that.
Jonathan: But we are seeing that with the same thing with video and audio codec supports. We are getting into a new age of browser wars and what good did that do us last time? Ten plus years of having to support multiple different browser versions. When I say browser versions, I mean IE and everything else.
Jason: That is one of the problems that I have with CSS3. I complained about this on Jonathon Snook’s blog when he wrote about them. The browser vendor prefixes add a lot of bloat to CSS when you are trying to actually use it. You are trying to do it the right way, but you have to specify things in different places. You can’t just use just generic classes all the time. And you end up with a lot of duplicate, three times the same really long CSS rule. It adds a lot. It is kind of a necessary evil.
Chris: Do you just not want it at all? Because that is kind of the alternative.
Jason: Because it would never happen without that, but it is tough to deal with in the meantime. It’s the browser wars again.
Jonathan: Around @font-face, Paul Irish, his blog has some great, great information about how to support different browser types with fonts. So, he is definitely one of the people that I follow. And, I would definitely suggest anyone interested in this space would follow.
Jason: Font Squirrel is still a great resource to doing that font face. They stay up to date.
Matthew: One of the things that I would suggest is CSS3, HTML5 – all this stuff, to me, is the same thing as the effect that text-shadow has suddenly had on the design industry. Text-shadow can be great. It can improve readability. It can help offset some text so that you can feel it pop a little bit better. But, it is used obsessively and it is a poor use in probably seventy percent or more of the cases. And, I think rounded corners – just because you can do them, doesn’t mean you ought to. And, all these scenarios.
My biggest thing is, going back to what I said this morning, is the concept and letting the concept inform your design. So, if it happens that you have an opportunity to have rounded corners for, like for buttons. Buttons often… that’s a good pattern to round your buttons, put a gradient on there and you can save some space for images. And it can be more variable so you can change the width without having to do a new image and all this different stuff. That’s appropriate.
Otherwise, I think people get in this mindset like, OK, here’s CSS3 and HTML5 and I’m going to walk through that tube and then do my design. Instead, it should just be another tool in this toolbox. The vast majority of what is most powerful in web and web design has been available for seven or eight years. And people still haven’t explored the limits of that.
And so, I kind of get tired of this sort of like on and on and on, and its fun to experiment, but we still haven’t explored even the foundations of the craft of web design. People still keep crapping on the web and we have got to clean it up.
Jason: You mentioned patterns and pattern types on your website. You talk during your talk about how input should always be inset. And that’s something that as people that use the web all the time, we take for granted that this is the way we always expect it to be. But, we need to teach users that that is the way they should expect it to be. So, we shouldn’t always be trying to think completely outside the box. It’s great to add design details and to change things. But, understanding those patterns and applying those to our people know what to expect is user experience. And that’s what you have to do.
Gene: I think we are at a point where we can see if anybody has any questions…
Audience Member: With all these new tools and everything, it’s great, but we still have the same issue of delivering content to our users. The biggest problem I face, with my designs now, is not necessarily the tools that are available, but the way people are viewing them. It used to be the fight between 800 pixels by 600 pixels versus 1024 by 768. Now, I have this huge 32 inch monitor and I have this little tiny iPhone. How do you guys see your designs changing without breaking your customer’s bank going from large packages to small packages?
Gene: I’ll repeat the question for the podcast listeners. The question is along the lines of “How do you approach going from a smaller screen, say an iPhone to a giant HD television screen almost, in your designs? How do you fit in there.
Jason: I think one of the most exciting AListApart articles in a very long time was the “Responsive Web Design,” was it Dan Graham that wrote the Responsive Web Design? Ethan Marcotte, yes, sorry Ethan. But, it was a very good article, and if you haven’t seen hicksdesign.com, Jon Hicks, the guy that made the Firefox logo and the MailChimp logo, he just recently redesigned, using that responsive web design methodology.
It’s a fluid concept, but when you get down to a certain width, you basically reformat the whole site for mobile. You should definitely explore that, I think that’s the way of the future, instead of having two different sites, it’s sort of like having two different sites in the same box.
Matthew: The only thing that I would say about some of this stuff is this could again be a moment where people go, cool, I’m going to do my next client’s site that way. The question has to be asked, why. Why would you do that? Is my client going to be receiving visitors from these different varying browser widths. The research needs to be done, or else you’re wasting your client’s money. So, in answer to your question, for me, I’m trying to do some of that research into what the audience of my client is, so that I can accurately build the right project for them. If their audience says, I need all four of these, then the next question is, these designs that Simon Collison and Jon Hicks did that are gorgeous, are also very content focused and light on the design kind of nuance and details.
Gene: They’re also personal blogs.
Matthew: Right, they’re not full on sites. So, at some level, you said without breaking your client’s bank, without doing that, I’m not sure that that’s possible. At some level, as things change, the normal scope and budget for these kinds of projects is going to grow or change, and it might get smaller again some day, and it’s going to fluctuate. So, even as we’re designing and thinking about the new Squared Eye site, I’m having to ask those questions. It could be really great for me just to put out the sexiest thing out there, but is it maintainable? What does it showcase, what is the best opportunity for that. Is it better for me to have a separate site, that is just pulling in from an RSS feed? Or is it good to have this fluid layout. So, all those kinds of things, again, come back to concept. You decide your concept, you understand your audience, and then you choose from the available technologies to meet the goals, and do business.
Jonathan: I would tend to completely agree, and I think it says something that we’ve been exploring for quite a while, as far as social application development, let’s touch into that one, building applications for containers like Facebook or Yahoo Application Platform, MySpace. So, each of these containers, some of them support open standards, like OpenSocial on MySpace. The ability to transfer from one container to the next brings up the same interesting issue of being able to support different canvas sizes, different application widths, different views. We’ve been supporting partners on our application platform for about a year and a half doing that exact thing. What we’ve learned is that there are some core web development techniques that we can implement in order to reach a vast range of canvas sizes. So, I would tend to completely agree that once you get down to a certain size, or up to a certain size, you have to rethink your developments, whether you need multiple different views.
But, for this vast majority of middle ground, you can program for that. You can build your sites or applications to fluid widths, you can build your content in boxes so that if you hit a certain shrink-down level, it can float to the next line. These are concepts that have always been there, and the technologies aren’t changing them, we just have to apply all the technologies that we’ve learned over the years, into the new standards, and see where the new tools fit.
Matthew: I would just add one more thing to that, which is, as designers we need to continue to let go of a more rigid vision of design, so it will begin to be more and more organic and fluid, and content will continue rising to the top as the most important piece. How to enhance and promote that content is going to be the more important issue, and design for design sake, we’ll have another platform, and that may be the iPad or something that is more focusing and contained that might be that I prefer over all other things. But, for where that has all these variations, we really are going to see content rise to the surface.
Audience Member: Currently… those two more five spec is written so that H.264 video standard… Google was trying to crush their VPH Spec. They’ve been studying H.264. Now, I’m wondering if we’re not looking at just a browser war, we’re looking at content war as well, because Google is talking about converting YouTube to use the VPH Spec, and so the current flash may wave. Can we do it where you’re in case where it’s not the worse not just in the browser but also the content, the wider it is the amount? Can we be looking at the potential of dual video specifications?
Jonathan: That was how it was before Flash, back to that again. So with the codex, there’s two… Right now two good specifications, there is Ogg Theora, the open source codec, and then there’s H.264 recently. So, Google repurchased a company called On2 which had that VP8 Codec, and what they’ve done is, they made it royalty free since On2 had patents for the VP8 Codec, they made it royalty free for everyone to use, which is a tremendous win for the community as a whole because this is as far as you can get with patent related issues, royalty free. Now, let’s take Issue 64 on the other hand, which is the one that Safari is supporting, and Microsoft has put their weight behind it as the only codec being in IE9. They’ve agreed to make it royalty free for Intel 2015.
The way I look at it is that’s just long enough for us to start using H.264 as a standard. Then we’re really at their will. They can either continue making it Royalty Free, or they can get royalties for it. And personally, I don’t like being the guys on some other company whether they can just pull the carpet right off out from under me.
Gene: Well said.
Audience Member: Glad to hear that from Yahoo. [laughter]
Audience Member: I have a question, I am not a designer, I’m a programmer, I’m a client, and I ran a company called Foreign Translations, foreign language translation on multi languages as we translate websites, content for customers all over the world, and one of the problems I have with a lot of design firms – and we’ve been through many – is that they gave me grade on design, but they’re not delivering us options on usability, on architecture, on content management systems, on landing page optimization, and great designers. We rely heavily on search. How much of these designers are paying attention to search in their design? And they are backed up their own design correctly. It’s going to inhibit search. And a lot of us customers don’t know is in and out, so I know more than most, because I’ve been studying for 10 years, but most people don’t. They’ve never had a question asked.
Gene: How do you integrate search with design?
Jason: Starting off by building the website the right way. You know by building web standards by not you know… by building around the content, and by building semantically using the right tags for the right type of content, you provide a good foundation for search engine optimization. Aarron Walter, the person I work with, wrote a book called: “Building Findable Websites,” which is a great guide on specifically that – building websites the right way, so that search engines will find that content. That’s a start, I mean there’s a lot more to search engine optimization than that, but if you don’t have a web developer designer that’s building with web standards, you should try to find another one.
Gene: That’s also well said. [laughter]
Matthew: I think a metaphor is an appropriate way to think about this. So, if you want a deck built and you’re willing to pay a couple grand for a nice deck. You’re going to have an opportunity for somebody to build a nice deck for a couple grand and they might use treated timber which might be a good fit for you. They might use just common building techniques. But, depending on the people that you are going to have on that deck, they might not have equipped that deck for the weight. They might not have equipped it for, let’s say you have a high class audience, treated timber might not have been the right approach.
So, for you, your responsibility as a client, and potentially our responsibility as a provider is to let you know that real focus on these things is expensive. And the reason is because you have to do the research and the architecture and the background from the beginning so that the designer really comes in and implements a strong, well-patterned design that has already had a rigorous architecture built under it, and it’s literally just applying visual treatment to that piece.
And then, furthermore, doing user testing and doing AB testing and all kinds of things after that, I think, is one of the best ways that we can approach this because ultimately a lot of what we’re doing is intuitive until we push it out there. And designers can lead.
There’s the joke with Google choosing 45 different colors of blue until they find the right one, and that’s why their designer left. And I would disagree with that because I don’t think it allows the designer to lead, to have a vision, to draw people into a direction of how to think and feel about a site.
But, the opposite happens too, which sounds like some of your experience, where people say this will be cool or this looks good, but it’s not actually helpful for the users. And I’ve had to learn some of those mistakes myself and ultimately, doing as much up-front as you can, but then also having the expectation that when you launch, it’s not a finished product. That’s something that needs to grow and be refined. So, does that help?
Chris: That sounds like SEO as part of you question though, like how do I, You know? I don’t have a ton to say about that, but I worked at a small design company for a long time and it always just scared me to the point of sometimes not even wanting to accept that client because it’s a very legitimate want. You want more people to come to your website because you have a product for sale and that’s super understandable. And then I’ll come up and tell you, I can make you a beautiful site. I’m going to pay super close attention to web standards. I’m going to tell you all about how I’m going to mark up your content perfectly, but I also absolutely cannot guarantee you that more people are going to instantly start showing up at your site. And you want that guarantee because you are a business owner and I just can’t give it to you and I just don’t have a good answer.
Jonathan: It seems like anybody that can guarantee a certain amount of visitors is a snake oil salesman.
Jason: They’re probably lying.
Audience Member: I’ve been thinking about this lately. Have web design agencies, as the years have progressed have we branded ourselves incorrectly that things you all are talking about. Where it’s not necessarily design where it’s a full-scale strategy behind your code and your content and search engine. Should we be thinking about moving our branding away from web design and more towards web strategies orientation? Have we set ourselves in concrete where we can’t move?
Gene: OK, so the question is as web designers should we be selling our clients on the fact that we are far larger in the scope of what we do other than designing and coding? Is it the full strategy?
Jason: Especially a small agency it sounds like.
Jonathan: Yeah, it’s tough.
Chris: We help people make websites.
Jason: But, I think it’s important too to just always be looking for what the current technology is and always be coming into conferences and meeting websites. If you get stagnant, then you’re going the old model of: Yeah, we’re going to build your website, and it’s going to be on the Internet – Done. [laughter]
You want to make sure that you’re keeping up with the technology, you’re aware of the fact that clients come in different wits, and different you know… A lot of different…
Matthew: I think we’ve struggle a little bit with that in Squared Eye. Even in a year and a half ago, I was treating myself as a sole designer and trying to do a lot of the work, and then if I needed some IA, you know, I would incorporate somebody in our co-working office. If I needed some copywriting or something that would be like a dream come true – OK cool this is happening. But then, more recently in the last three months, as I’ve talked about this morning, we’ve started to implement the strategy where it’s like no matter what, we always have some IA design and then project management. That has really changed the way that I work. And so at some level probably every project needs to incorporate elements of that. Now, that all might come from the same person.
But, it’s important for each person, even if you’re one person, to define each of those areas, and define when you’re doing one of those, and when you’re doing the other so that you can tell your clients hey, this isn’t all sort of umbrella stuff. Here are the portions of things I’m doing, I think that’s just business. You know, being able to say I’m a Web Designer, there is a stigma or kind of a push button effect that people think about when they think of web design. “Oh, my cousins a Web Designer, and you’re like No, no, no. Please don’t,” he never goes there.
That’s hard, but you get past that when you start saying, you know, explain to them some of the things you do, or the ways that you work. But, each of us are going to have our different ways of approaching that because some shops might be SEO Shops, and that’s what they do.
I was really surprised to find out Clear left in England, they don’t do any development. They finish a design, and the reason they don’t is they don’t feel like they can own that development to the degree they own and really go after the detail of information architecture, designing UX. I respect that, I think that’s interesting, so it’s going to be different for everybody.
Jason: As the principal of a small agency though, you have to know enough about all these things to sell all that to explain why you’re bringing on a copywriter, to explain why you’re bringing an information architect specialist. How much of that do you learn yourself – how many hats do you have in order to be able to sell that?
Jonathan: I think the two important lessons that I’ve learnt throughout my career, I mean I don’t come from a computer science background, I come from Fine Arts, and then I went into computer science after…some changes.
But I’ve done design. I’ve done development, cool back and engineering. What I’ve learned is that to grow as in your career, you have to find what you’re passionate about, grow towards it. But have an understanding of the other technology around you that you’re working with, you can’t work just as a cog, just outputting what you’re good at. You have to explore and grow in your career. But then, on the other side, you have to understand when you’re not the right person to do the job. If there is someone better than you and more capable, and can do it quicker, then you should rely on them.
I’ve worked at agencies where I have some amazing designers that want to work with me, and build the products with me, and that’s what I want them to do because I know their skills are highly more valuable than mine.
Gene: I think that’s about all the time we have allotted for this. I just want to thank the panel again.
Thank you so much for doing this.