SitePoint Podcast #51: Real Web Designers Get It
Download this Episode
You can also download this episode as a standalone MP3 file. Here’s the link:
SitePoint Podcast #51: Real Web Designers Get It(MP3, 46.2MB)
Here are the topics covered in this episode:
- Corporates continue to cling to IE 6
- Chrome’s new automatic translation feature
- Opera 10.5 features amazing speed and powerful developer features
- Listener mail: Simon Madine on Chrome extensions
- SitePoint author Elliot Jay Stocks says designers should be able to code their own designs
Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/51.
- Patrick: 28 Days of Diversity
- Stephan: Uniform – Sexy forms with jQuery
- Brad: “Mad Libs” Style Form Increases Conversion 25-40%
- Kevin: Petition to make “Hella” the prefix for 1,000,000,000,000,000,000,000,000,000
Kevin: March 5th, 2010. New browser updates, whether web designers should be code-savvy, and prying IE6 from their cold, dead, hands. I’m Kevin Yank and this is the SitePoint Podcast #51: Real Web Designers Get It.
With us today Brad Williams from WebDevStudios, Stephan Seagraves from Houston Texas, and Patrick O’Keefe of the iFroggy network.
We’ve got the whole band together again, guys.
Brad: What’s up?
Patrick: I missed you guys. I love you all so much.
Kevin: Coming up later on the show today we will look at the issue of whether web designers should be able to code their designs or not.
But first up, why you can’t pry IE 6 out of their cold, dead hands. This is a story by Esther Schindler over at IT Expert Voice, and she has done a little research into these Corporates—you know, Corporates with a capital ‘C’—that we’re always talking about. The last holdouts who have yet to move off of Internet Explorer 6. As of a few days ago, now, Google no longer officially supports Internet Explorer 6 in some of its applications, and this…
Kevin: Yeah, I knew you’d be happy with that, Brad.
Kevin: As we’ve celebrated before on this show, this could be the beginning of the end of Internet Explorer 6, and in fact, if you head over to ie6funeral.com on Thursday, March 4th, you can see that some intrepid people in Denver got together to commemorate the occasion and have a funeral service for Internet Explorer 6. But it seems, reading this story, that there’s still some holdouts, Brad.
Brad: Yeah, and I think we’ve talked about it a few times on this show. And the major holdout is these corporations that have web apps that they need to run that were built for IE 6 exclusively, and that’s one of the biggest issues. It’s an interesting article, and I think one of my favorite quotes from the article is that most developers whom they asked about this issue had a violent, emotional response which kind of hit close to home, I think that would be my response too.
Kevin: That rings true. Yeah, we’ve had to edit out one or two of those from you from this show, Brad.
Brad: Maybe a couple bleeps here and there.
Kevin: Yeah, this story covers four different reasons that the reporter found for corporations sticking with Internet Explorer 6. Number one was they don’t upgrade anything. It’s nothing personal, it’s not that we’re dragging our heels on our browser, they don’t upgrade anything. She cited the fact that a lot of corporations operate on a three to five year upgrade cycle in their IT department. So, you know, every three to five years they sit down and they go alright, what’s the computer, what’s the operating system that we will be buying for the next three to five years. Five years is a really long time.
Brad: Yeah, it is. I think this one; I can definitely see this one. I worked at a small company for a while, a small internet-based company, and I basically was the IT department for about 30 people. And I’m a web developer, so that tells you how much of their budget they had to focus on that. And when it came time to upgrade, you know, it really was I would be the one kind of pushing saying you know we need to upgrade, and they really never saw the reasoning behind it. I guess the question I have with this one is I have a hard time believing that if they don’t upgrade anything that they’re out there traversing the Internet and they’re not running into problems running on IE 6. I got to believe that almost any website they go to, the majority of websites are going to have some kind of IE 6 hang up at this point.
Patrick: Well, the only thing I have to add is: Hi, Mrs. Schindler. We talk on email and Twitter, and I’ve talked to her a number of times, and I was…
Patrick: …surprised to see her name at the bottom of this. But also, great, I didn’t put it in there, just so you know, I work with great folks.
Kevin: No, no, this is my story.
Patrick: No, but I think this is an interesting site because this Expert Voice site is created through partnership with Dell and Federated Media, so Dell is at least partially behind this. The writer isn’t really affiliated with it. So, it’s interesting to consider from that angle too. And what Dell has at stake, I guess. And why Dell would want people to upgrade on top of it. Dell would sort of be in the same camp of developers because people who upgrade buy new computers. So, you know, I mean that’s all a part of this puzzle too. And I think it’s just going to be time. I think you can only stay on that old box for so long, and eventually they’re either going to disappear or they’re going to buy a new box. So, it’s just a matter of time and, I don’t know, I get kind of tired of talking about— of hearing people complain about IE 6 and stuff. Oh, yeah, I mean it’s been complained about so, so much that it’s almost like a cliché at this point to complain about IE 6. But that’s just me.
Brad: I mean, you know, you say time, and I think that it’s a good point. But time is definitely running short, and now that Google has kind of stepped up as one of the big players and taken that first step, even if it’s a small step, they definitely took a step in the right direction. So, you’re right, it’s definitely a matter of time. The question is, are we talking months, are we talking years, I hope we’re not talking multiple years.
Patrick: Just sit back, have a beverage, and you know, chill out. Not Brad, but other people. Brad’s already Mr. Cool.
Kevin: The next reason covered in this story is the one we mentioned, and the one that always comes up: one critical IE 6 only application holds them back. The company’s built a custom app and they cut corners back in the days where IE 6 was the only browser, and there was no reason to worry about supporting anything else going forward, and so they’re stuck there. And that’s— It’s the hardest problem to solve, but at the same time in some ways I’m most optimistic about it being solved because once we move off IE 6 the browser landscape is moving so quickly again now that it seems unlikely that companies building custom apps today are going to make that same mistake.
Stephan: You’d think that they’d want to update the internal application anyway because it sounds like it was probably built in early 2000.
Kevin: Well, the story says it’s difficult to justify because when you pitch it to your bosses who hold the purse strings of the company you’re saying, “Look, I want to update this application to work in newer browsers.” And they say, “Well, what’s it going to do different?” And you go, “Nothing, it’ll just work in more browsers,” and no one’s going to pay for that.
Patrick: So what’s the benefit to the company in that case is the real question. And I mean there isn’t one. I mean this isn’t that surprising. And she said it’s unsurprising, so there it is. But, I was looking at some … it was surveillance software, a while back, and I opened the application to view surveillance from a remote location, and it looked like it was built in 1995. I mean it was this Java app, and it’s nothing about Java, I’m not saying Java, but just kind of the gray Java huge buttons, and it was like this is so old. But the thing about it is I was thinking I guess they don’t have any reason to innovate, they don’t have any reason to update. Who’s their competition? They already have their clients, and apparently in this space they’re eating off that. So, you know, it’s like the same thing as medical care in my area, I live in a small area; there’s not that many doctors, they’re not competing against each other. If you don’t have competition, you have less reason to innovate. I mean that plays a hand as well.
Kevin: Are you saying your doctor uses Internet Explorer 6?
Brad: I would get a new doctor.
Patrick: I’m saying that when there’s less competition— I don’t judge doctors based on their browser usage.
Brad: I judge everybody based on their browser usage.
Patrick: I think there’d be a lot of dead web developers if we went that route. Well, aren’t you Mr. Judgmental! Excuse me, I’ll get off your Twitter. No, I’m just kidding.
No, but what I’m saying is that obviously competition drives innovation, and in some of these spaces you’re dealing with companies that all in all probably don’t care much about the web browser, so that’s why there’s a lack of necessity to move to it.
Brad: Just one last point. One kind of low-cost solution to this would be just to use something like VMWare, or even set up a PC in the corner of the office that’s just dedicated to running IE 6 and allow the different users that need to get into that system remote access. Yeah, that way they could login when they need to, they can use the application.
Brad: It’s a low-cost way of getting around it. So if your sticking point is saying we have this mission critical application we have to use, well, you know, there’s certainly ways you can still use it, but you don’t have to be stuck on IE 6 on your day-to-day computer.
Kevin: The next point is “Why do software maintenance? It isn’t broken.” is a common response she saw. And part of reading this story comes out of the fact that a lot of Corporates outsource their IT infrastructure, and to the point where the people who they go to for advice on their IT are also outsourced. And so there’s no one there to tell them that their systems are out of date, that there is even a reason to upgrade. And when someone like a web developer tells them, “Hey, I want to build you a modern web application, but your IT infrastructure’s too out of date,” they go and talk to their IT consultants and they say, nah, there’s no reason. And you end up hearing things like, “Your customers are also on IE 6, and so you should keep your business on that lowest common denominator so that you’re getting the same experience as them.” It’s like these companies, these outsourced IT providers, are trying to make excuses and give companies reasons to stay behind on this stuff. It seems weird because they could make a load off of charging these companies for an upgrade, right?
Brad: Yeah, you’d think they’d want to push it. I mean I guess it’s tough to tell someone by spending money now you’re going to save more money in the long run, but essentially getting off of IE 6 that’s probably what’s going to happen, because eventually with the IE 6 security something’s going to happen whether it’s a computer gets infected or a virus hits your network through an IE 6 browser. Whatever it may be, something’s going to happen and it’s probably going to cost you more in the long run anyway to clean up that mess and then upgrade rather than just upgrade now and completely avoid that mess in the future. But, again, it’s always hard to argue that point with people that are holding those purse strings.
Patrick: I guess the unanswerable question is, on a company by company basis, if a company has put off upgrading for X amount of time, and there’s been versions released, multiple versions from IE 6 now, the money that they may have saved paying someone to upgrade their entire network to go directly to IE 8 or do a full refresh, have they actually lost money by doing that, or have they actually saved money by waiting to upgrade as long as they could? And I mean that’s unanswerable. For some it’s less, for some they lose money, for some they gain money. But, you know, from a business perspective only I don’t know if I can fault the IT consultants completely, but obviously they have to find a way to relate it to the business that shows them, okay, X amount of dollars, you do this, and it’s tough to do that.
Kevin: The last point in the story is IE 6 as user control. And I find this fffff… frustrating and fascinating at the same time. The point here is more and more as companies like Google and Facebook and so on, cut support for Internet Explorer 6, keeping your corporate employees on Internet Explorer 6 becomes a way of insuring they don’t go to these non work-related sites and waste time on your dollar. This is the logic that we’re seeing, that these companies go, “Oh, you can’t use Facebook on IE 6? How interesting. Let’s lock that in for another few years, shall we?”
There’s a great interview on a show called Spark on CBC radio, and they have a podcast that I’ll be sure to link to, where they talk about this shift in culture with companies that have started to put up firewalls for their employees that prevent them from accessing “inappropriate” sites during work times. And some of the have very graciously started switching off the firewall at lunch hour so that on your lunch break you can go and browse Facebook as much as you want. But then as soon as the lunch break is over it clamps back down again. And on the surface this sounds like a nice compromise, a good gesture for a company that might otherwise not allow any non work-related internet access at your desk. But what they’re seeing is that employees who used to go outside and get some fresh air and reinvigorate themselves for the rest of the day at their lunch hour, instead stay pinned at their desk surfing the Web madly for the one hour that they have access to it before they have to go back to work. It decreases productivity and the health of their employees. It’s counterintuitive, but it’s going to cost them money.
Patrick: Now if we could only find a way to shut down the albatross that is solitaire.
Kevin: I thought that was dealt with. Switch everyone to Mac, right?
Brad: Yeah, Macs don’t run games.
Patrick: Mac doesn’t believe in playing cards.
Kevin: Well, that’s Internet Explorer 6 and why we can’t pry it out of their cold, dead hands. It seems like there is reason for optimism on several of those fronts. If anything, you won’t be able to buy a computer that runs Internet Explorer 6 in a few years.
Stephan: Well, what about the fact that pretty soon you’re going to have to run Vista, right? Or Windows 7 now, I’m sorry. That pretty much knocks IE 6 out, right? Once these companies start upgrading to 7 you’re not going to have to worry about it.
Kevin: Yeah, but for some companies what it will take literally is for these computers to catch fire and explode.
Patrick: Way to give everyone ideas.
Kevin: Just sayin’! If your computer happened to catch fire…
Patrick: SitePoint podcast triggers series of break-ins at corporations in Australia, UK!
Stephan: There’s a bunch of IT guys just— They’re planning and plotting right now.
Kevin: “Interesting.” Next week on the SitePoint Podcast, which part of your computer is most flammable?
So while we’re talking about browsers, let’s talk about some of the other browsers out there because there’s a whole bunch of news. We’ve got a new Beta of Chrome, Google Chrome, that has I think I might call it Google’s first original browser feature.
And I’m sure someone’s going to write in and tell me that Opera has had this for years, but maybe not. The latest Chrome Beta has automatic website translation. So if you tell it you want to read your websites in English and it detects that a website that you load up is in German, it will automatically send it through Google’s translation engine and show you the English version. This is in the Beta version of Chrome, right?
Brad: Yeah, the Beta version just came out for Windows I believe. It’s really neat though because since it auto detects, so if you hit a Chinese website, it auto detects that the language is Chinese, and then pops up and asks if you want to translate. Pick your language, you can save it, and then going forward you can just click translate and it will remember the translation language you chose. So it’s really quick, it detects it, you click translate and it’s done, and then it translates the website as you navigate through it.
Kevin: So what’s the benefit here? I mean have you guys found yourselves really wanting to read non-English websites a lot and then been frustrated by your inability to do so automatically?
Stephan: I’d say biggest issue for me it’s travel websites for other countries, small airlines that I can’t— they don’t have English versions. That would come in handy but other than that, I don’t use it really.
Brad: I mean on occasion for me I’ve come across sites where it will be in a different language and then I have to dig up the translate URL and paste in the link. But what this might open up is that Google could actually… if this proves to work really well over a period of time or whatever, Google might actually, who knows, they might open up to where we start if you’re running Chrome and they detect that you’re using the translate they might start bringing back more foreign websites in your search results if they deem them relevant. Possibly, who knows. I could see them trying something like that.
Yeah, it’s kind of neat. It’s definitely a feature I haven’t seen. But, again, like you said, Kevin, it might exist in some other browser.
Kevin: Well, I’m sure there’s a Firefox extension for doing this kind of thing. There’s a Firefox extension for everything. We hear stories of like the size of the non-English Internet is eclipsing the size of the English Internet. And so perhaps just the fact that we use the Internet as English speakers, as English readers, we tend to have blinkers on to the rest of the Internet. We limit our access to the information and knowledge and cultural styles that are out there on the Internet for us to explore. If Chrome is leading the way and all browsers end up implementing this we could suddenly find the Web becoming a place where you don’t worry about the language of a site that you’re putting a hyperlink to. You just transparently surf from site to site, and some of them are automatically translated, and some of them just happen to be English. This could really knock down some big walls that they exist on the Internet today, if only by our tendency to only link to and take an interest in stuff that’s written in English.
Patrick: That’s a cool visionary type statement. I think that’s a good thing. I think that would be a great thing. I think he question, though, is of course always with translation tools, the quality of those tools, right? So for that to happen, like Google Translate, I’ve used it over a period of time. I used to use Babblefish back in the day, and it’s pretty good, but you know, there are points where it obviously comes back broken in English, right? And I think that’s a hindrance, and I don’t know what the answer is to that; if there’s more investment needed into translation, if Google’s now going to corner the market on translation services that could be another business for them. But obviously the quality of translation is a big factor in this.
Kevin: I’m trying to read up here on how Google actually detects the language of a web page. I mean obviously those who know their HTML in real detail know that you can tag the language of a page or even the language of a paragraph in your HTML code if you want to go to that extent. But I’d say most of us are guilty of just not specifying a language and assuming the browser’s going to be in English because you’re writing an English website, right? So, to some extent I expect that Google Chrome is doing some automatic detection based on the words it sees. And the Mashable story that we link to for this says they’ve had some, they’ve noticed some sites with not a lot of text on them are not correctly detected as being in another language. But you can always force its hand and tell it, “Hey, can you translate this for me?” which is cool.
Our other bit of browser news is Opera 10.5 is out for Windows. And the Mac has a Beta version that’s very nice to check out as well, so it can’t be far away. Wow, Opera is really moving fast! It was February 11th that they announced the Beta of Opera 10.5 for Windows. And so like three weeks later they’ve got the final release out, that’s incredible.
Brad: The browser’s supposed to move pretty fast, too, from what I’ve read.
They’ve got a new graphics engine called Vega which brings hardware accelerated graphics to SVG, canvas and indeed all the graphics rendering in the browser. And this is something that Internet Explorer 9 has been giving a preview of, you know, that’s the next big thing that’s coming. So, Opera is ahead of Internet Explorer and many of the other browsers on this stuff. And then there’s improved CSS support, we’ve got rounded corners, multiple background images, box shadows, border images, CSS transforms and animated transitions, and offline storage, and finally, support for the
<video> tag using the Ogg Theora video codec. So, it’s all in there. There is nothing in this that isn’t in this release that is in another browser that I could want.
Patrick: So are you using Opera, then?
Kevin: Well, it makes me want to use Opera as my development browser and pretend that I could use all these features today and assume that all of my audience is going to see them. As a user there’s something that’s keeping me off Opera, and that’s the 1Password plug-in that’s on all the other browsers. But that’s a— it seems like faint criticism. As a web standards nut, Opera has got my vote. This is the leading browser for me now.
Brad: I think speed is a really big topic among reasons why you switch. I mean it’s one of the reasons why I now use Chrome for all my day-to-day browsing just was because of speed. And if Opera’s coming out, and if benchmarks come out and shown that it is quite a bit faster than Chrome, that could be a big reason for people to start seriously considering switching to Opera.
Kevin: Well, Brad, put your money where your mouth is. If Opera is now the fastest browser, are you going to switch for us?
Brad: I’m definitely going to download it and run it. When 10 came out I played around with it and ran it a little bit. So I’ll install it this weekend and play around with it, so next step is I’ll remember to report back my findings.
Kevin: Alright, well, we’ll look forward to that. We’ve got some listener mail from Simon Madine who wrote in about podcast 47. And one of the things he touched on was our coverage of Opera. He says, “During the discussion of this technology and other browsers, there was reference to bookmarking extensions for Firefox and unsure mentions of Mozilla talk of a bookmarking API.” This is when we were talking about the new bookmark synching extension that had now become a core feature of Chrome. He says that what we missed out on is the fact that Opera has had bookmark synching, history, and notes, syncing of all that stuff, since version 9.5, since the public Beta of that browser was released. He says, “Although Opera isn’t the most popular browser it is certainly not trivial, and the hosts of a web development podcast should be aware of its features.”
Well, Simon, guilty. I hope our coverage of Opera in this show was a little more up to scratch.
Yeah, it’s tough. The browser world is moving so fast, like I said earlier, that it’s hard to stay on top of what’s new and what’s current in every single browser. So, yeah, definitely, Opera has full support for syncing all of that stuff. And so that’s why I say this translate tool, please do let me know if Opera already has it. I’m sure there are extensions for other browsers that do it. But this feels like the first thing that Google Chrome has done that the other browser haven’t, and that they may be taking the lead from— following Chrome’s lead on.
Simon Madine goes on to say he takes exception to my description of bookmark synching as a nichey feature. He says, “Non-IE browsers are most commonly used by technically-minded people, many of whom will have a desktop and a laptop, or use a computer at home as well as the office. Bookmark synching can be useful to any of these people.”
I don’t know. Stephan, what’s your feeling? Is Chrome targeted at techie users?
Stephan: I don’t know, maybe. Kind of, I guess, I mean Brad loves it, so.
Brad: What are you trying to say, Stephan?
Kevin: And Simon also talks about where I question the fact that the most popular extension for Chrome was also the newest feature for Chrome when it comes to bookmark synching. He says, “Surely an extension community that creates the kind of features they want their browser of choice to have is a healthy community. If the inclusion of the feature into the browser was expedited due to its popularity as a plug-in, that shows that the Chrome developers believe in the plug-in community enough to listen. If it wasn’t related it shows that they are heading in the same direction.”
I see what you mean there. I think it would be a bit disappointing as an extension developer to see wildly popular success of your extension, and your reward for that is Chrome taking that feature out of your hands and building it into the browser in the next release. I would be disappointed by that. But I do also see what you mean that if the user community of a browser is voting with their downloads for a feature, Google should definitely look at implementing those features in the core of the browser. I don’t know. What do you guys think?
Brad: I think any time you create extensions for a browser or plug-ins for a website, or whatever it may be, there’s always a chance that what you make could end up of the core software that you develop it for. And if it does I think it just kind of justifies and says you were right, you know, this is a great feature that everybody wants, so why add in that extra step to install it. But there always is that risk. I think as developers I mean you just always got to kind of keep that in mind that if it’s a very popular feature and not something that’s niche, it could very well end up as a core feature of anything.
Patrick: I reached out to Simon on Twitter when he posted a comment about the show, and I appreciate you taking me up on it and actually elaborating on the feedback which is very helpful. And I think you raised a lot of good points, and good points that would be great in our comment section of the Podcast. And I think that between us four we have a very little bit of knowledge, but we have a piece and we share that on the show, but at the same time I think we all, as users of technology and computers, we lean toward what we have good experience with and what we use ourselves. So, we may not know that Opera has had this feature since this point, or that Safari’s coming out with this next week.
But I think the SitePoint community is part of what makes the Podcast so great. So I would say that if you notice that we omit something or that we forget an aspect that you personally feel should have been included or should be addressed, then please use our comment section and point it out, and add that viewpoint—add your viewpoint—in a productive way. And you’re a part of the podcast, part of the community, and maybe we’ll even read it on the show. But part of the power of the community is all of our knowledge together; so thank you for sharing that.
Kevin: Thank you, Simon. And speaking of talking about things we don’t know a lot about…
This brings us to the story of web designers and whether they should be able to code the designs they come up with. Friend of the show, Elliot Jay Stocks, and SitePoint author, tweeted this week, “Honestly I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.”
This created a bit of a storm of controversy, and CSSquirrel, another friend of the show, has a great sort of summary of all the opinions that were put forward in response to this. We’ll link to that post in the show notes. But, Elliott J. Stocks came back with quite a long and detailed post explaining his position here. But before we get into that, guys, I’m interested in your thoughts. Obviously none of us here consider ourselves web designers as our primary function, but what do you think? When you work with a web designer do you expect them to have an understanding of the code that goes into implementing what it is they’re designing in Photoshop?
Brad: I do. As far as I do have a company that builds websites, and we actually have a lot of clients that show up on our doorstep. They already have a designer they work with who’s already made a mock-up of what they want; they just don’t know how to build it. And that’s where they search and find us or find another company that can take that mock-up and convert it into a website by whatever means. It’s tough to say, I guess it’s hard to say that all designers should know how to do that. I think if a designer isn’t actively trying to learn how to do that then I would kind of question how into design they actually are. Just from my perspective I want to know everything about building websites that I can. And if there’s new things I need to learn then I want to go out there and learn them so that I know. I would think from a designer’s standpoint if they don’t know how to take their design and put it on a, you know, build a website around it, they should kind of yearn to want to know how to do that. I would think so, but that’s just me.
Patrick: I think it depends on the project. I think that obviously we communicate these things beforehand. If we expect someone to do the entire development project, to design something and code it, then that’s usually communicated beforehand. I just wonder if maybe we’re getting— And I’m least of all designer of all us here, but I wonder if we’re getting too bogged down in semantics or terms. So, if you have a design company and you have one person who’s an awesome coder, coding sustainer, he’s just amazing. And then you have one person who is a visual genius design-wise in Photoshop coming up with designs and mock-ups and whatever, is that person not a designer or a web designer? Do you have to code to be the, “web designer?” I mean where are we at with this? I still think that that person who has the design vision may not know how to code XHMTL, whatever, HTML 5 standard compliant code. But I don’t think he’s any less of a talented designer.
Brad: But if you’re a web designer, don’t you think you should know how to design for the Web? It’s like I would take that web word off and just say I’m a designer. If I don’t know how to code my design into a web page I’m not a web designer, I’m a designer.
Patrick: What’s design for the Web though? Is design for the Web a concept of an idea of what is intuitive of people using a web browser, or is it simply, you know, letters and numbers in a text document. I think that there is something to be said for actual layout and the typography and those things that go into maybe creating a design, but not necessarily being the one who perfects the code that displays that design.
Kevin: I’ve recently been working on a project to do a new site design for the theatre company that I perform with in my spare time. And this designer he is very much a print designer who will do a web design if you ask him to. But he doesn’t have a strong understanding of the constraints that are unique to the browser space, you know, the fact that pages tend to be fixed width but stretchy vertically is kind of something that isn’t in his visual language. And so the types of designs that he will tend to come up with he’ll get a poster, for example, he’ll get the page size, and he’ll design within that box. Whereas with the Web you really need to be clear about things like where your design will stretch when the content is bigger or smaller, and what happens with different types of content. If you’ve got a large image or a small image that needs to fit in this content, how are those displayed on different pages and how does that impact the rest of the layout? I sat down with him and tried to give him a sort of crash course in the constraints that he needs to be aware of as he develops a visual treatment for the wireframes that I had produced for the site, and I found it really challenging to put that into words.
Brad, when these clients come to you with a finished design that their designer has done, have you ever looked at it and go, “Well, that looks pretty on the page, it looks pretty in Photoshop, but I can’t turn that into a working website?”
Brad: Yeah, I mean absolutely. I’ve had mock-ups where every font is some kind of custom font that isn’t web safe, and they’re like, alright well, we can certainly use graphics for these, but you really don’t want to use graphics if you don’t have to. You want to keep your site very lightweight as much as possible. Yeah, certainly font is one of the biggest things because people think they can use any type of font they want when it’s not really the case. It’s a great point, you’re right, there is kind of some things that you know, that the page can’t stretch or you know there’s web safe fonts, and web safe colors, and things like that that they really need to keep in mind when they’re making these designs. I would probably argue that most web designers understand that. Like you said, the guy you were working with was a print designer, so obviously someone from that background may not be as familiar with that.
Stephan: Okay, if we flipped it around and we said if you call yourself a developer and someone asked you to develop a website for them, and you come back with a database diagram and some pseudo-code, what are they going to do with that?
Kevin: It’s done! (claps hands)
Patrick: I don’t think that’s an adequate comparison, I have to say, because …
Stephan: Oh, it’s completely accurate.
Patrick: …there is such a thing as a layout designer. I would suggest that you can have the understanding that Kevin talks about, as far as the limitations of the Web, while also not being someone who can hand-code to the highest standard. I would suggest that you can have those design understandings without the extreme coding knowledge. But that’s just me.
Stephan: But you just laid out the terms. You just said it’s a— you didn’t use “web designer,” you used a different word, “layout designer.”
Patrick: Sure, but that’s the question I asked earlier, are we getting too semantic. I mean is this a case of simply “you’re doing it wrong?” I mean is there no room— I guess the question is do we really want to get so technical that someone who is designing for the Web has a visual understanding of what the Web entails, but necessarily might not be the greatest coder, and as such, has someone else do it. If they just enjoy designing do they also need to enjoy coding?
Stephan: I’ll say this, if I see someone who can design really well and they do a really great job on layout and maybe they don’t know how to code, I’ll pay them for the layout, or for just what they’ve designed with the look. Because I like their work and I can get someone else to code it. So it doesn’t stop me from hiring them. I’ll throw that out there because I appreciate good art, I appreciate good work.
Brad: I would love to hear from anyone in the community that is maybe close to graduating college in the graphic design field, or especially web design. I know I worked with quite a few designers that were more print designers as well a few years ago, and they were kind of dabbling more and more into web, and I kept telling them you should really start looking into CSS, you should start learning CSS, and they absolutely did not want to learn CSS, they felt like that was too code-y, I guess if that is a good term to describe that. And then a year or two later they now realize, okay, I’m not behind the curve in the job market, and everybody I’m up against as a graphic designer understands CSS or at least understands a little bit about it, whereas this person had no clue. I think that’s more the trend in a lot of— I’m sure a lot of colleges now are pushing that. If you’re in graphic design you’re also going to start dabbling in CSS and learning CSS at the college level.
Patrick: Just to be clear though, I’m not saying that you shouldn’t learn how to code or that it’s not a good idea. I feel opposite, but I’m just saying that I don’t know if we need to section people off in such a way based on whether or not they can code, that’s all.
Kevin: Yeah, it seems reading Elliot Jay Stocks’s larger blog post it seems he admits that you can design for the web without understanding the code, but the point he seems to be trying to make is if you consider that your career, if you consider that your metier, why would you limit yourself by not learning that? That’s like … it’s like deciding you’re going to be a writer in this day and age but not learning how to touch type. You could do that but you’re limiting yourself, and how can you call yourself a professional?
He says that he went through his own phase of designing without understanding the code of the Web. And when he finally did take the time to learn it he said it was incredibly freeing. And this is a quote from his blog post: he says, “The unknown was holding me back. I didn’t appreciate how things worked and it scared me away from producing my best work. But with a little bit of technical knowledge—and I’d really like to emphasize the ‘little’ here, I’m not much of a coder beyond HTML, CSS, and the odd bit of PHP for WordPress theming—I got the medium in which we work.” So that’s interesting to me that understanding the code for a web designer can be like understanding how paper is made for a print designer. You understand your medium intrinsically, and it frees you to play with it more.
Patrick: I think that’s a good point. I think his point about it being a career is a good one as well. I think at the end of the day if you are a designer who wants to stay in this field, knowing how to code HTML and CSS will certainly make you more attractive both to clients and to agencies.
Kevin: I’m really interested in if there is a designer— If you are listening to this and you are a web designer, or you design for the web and you don’t consider yourself proficient in CSS layout, for example, I’m really interested in hearing if that frees you. Because understanding the medium, while it can free you to play with it, it can also— If you think of the Web in terms of the code, it might limit you and prevent you from thinking of, or trying some visual things that may not have been tried before.
Patrick: After what we’ve said, that person is afraid to come forward.
Stephan: And I think this discussion for me is difficult because I’m not at all visually savvy. So when I think of design I’m kind of like, well, put some tables on the page and put the form out there. So for me I can’t judge either way, you know, I can’t say well they must be a crappy designer because they can’t write HTML. I just— I can’t do it.
Kevin: And I think that sums it up where we started. We fully admit we’ve just spent 20 minutes talking about stuff of which we are not experts. So please do write in with your thoughts because I think this is a fascinating conversation, and I’d love to hear from some practitioners in the design field.
So, let’s get to our host’s spotlight guys. Patrick, what have you got for us this week?
Patrick: My host spotlight is 28daysofdiversity.com. It was put together by a friend of mine, Wayne Sutton, and in his words he says, “As someone in the technology/web social space, I often travel and attend various events in the industry and notice a huge lack of diversity. And when it comes to getting attention from mainstream media/tech blogs, it’s almost impossible.” So he says he started 28 Days of Diversity with the goal of featuring someone new every day of the month of February for just being awesome in their own right. And the full title is 28 Days of Diversity: People of Color Impacting the Social Web. It started on his blog at socialwayne.com, but it quickly morphed into its own site, 28daysofdiversity.com with all 28 people who were featured highlighted, their Twitter streams, and various other information as well. So it was a cool program and Wayne just completed it, so I wanted to highlight that.
Kevin: Yeah, that sounds great. So all the writers for this project were people of color you said?
Patrick: Yep. Well, it’s just Wayne running it and he’s selecting people to highlight every day of the month, just in a positive way, different people that are somehow impacting the social web. For example, there’s someone who works at Foursquare, someone who works at Ford, someone who is an IT director at a college here in North Carolina. And so on and so forth. Just people who are creating all different types of content and different spaces, different fields, but who have a noteworthy social media presence.
Kevin: Very cool. Stephan?
Kevin: Wow, that’s cool. We were talking about jQuery last week on the podcast, and yeah, I’ve been wanting to hear about some really neat jQuery plug-ins, and this has just made it to the top of my list. Thankyou, Stephan.
Stephan: It’s pretty sweet looking.
Kevin: Brad, what have you got?
Brad: My whole spotlight this week is a post by Luke Wroblewski, sorry, I’m sure I butchered that Luke, who is a chief design architect at Yahoo. And it’s an interesting take on a different way to layout your web forms. And basically Luke has kind of termed this as “Mad Libs”-style forms which are basically rather than have a form that’s just straight down, first name, last name, phone number, email, whatever field you’re asking for, it’s kind of a narrative format. So it basically presents input fields as blanks within a sentence.
For example, if you’re going to fill out a form that would say “Hello, my name is blank, blank,” you would fill in first name and last name, “I live at blank street address, and the blank zip code, please call me back at blank,” which is the phone number. So rather than just having a list it’s in a narrative format. And he actually did some A/B testing on this and found out that using the Mad Libs style form increased the conversion across the board between, or by 25 to 40 percent, which is pretty amazing.
And there were a few little differences in the form, the Mad Libs style form and the original form, but definitely not enough to kind of account for the whole increase in conversion. But a 25 to 40 percent increase in conversion rate is amazing. So it’s really kind of an interesting concept that I hadn’t seen before.
Kevin: I wonder how much of it is the novelty. To some extent on SitePoint, every time we do something that’s different than what we’ve done before, we see an immediate increase in the conversion rate, and we go, “Wow, we’ve discovered something that’s so much better!” But as often as not, six months later it’s performing worse than what we had before because the novelty has worn off. But this is really cool. I can’t tell you why but I want to fill in one of these forms.
Brad: Yeah, I do too. He has a couple links to some websites using it, like Kelley Blue Book is one that’s using it. So it’s pretty interesting. I might try, you know, maybe on a website we develop in the future try this out and just see how well it works. But definitely kind of an interesting little read.
Patrick: It sounds a lot like Match Game, my name is blank, I live in blank, you know, I don’t know if that’s dating myself here, Match Game the game show, if anyone here knows what that is! Now over to you Charles Nelson Reilly.
Brad: And as an added benefit, Luke’s blog is actually coded using classic ASP, which kind of has a soft spot in my heart since that’s one of my old languages. You don’t see that too often!
Kevin: Is it really classic ASP or is he just putting .asp on his URLs for old time’s sake?
Brad: It’s .asp and it has a query string ID, so I’m assuming, I didn’t really dig into it, but it looks like it is.
Kevin: So this explains to me at last why all the form elements are inline elements in HTML. You know if you just put a bunch of inputs one after another in your code they flow like a paragraph of text does. And that never seemed to me the way people use forms, but at last this Mad Lib forms, it all makes sense.
And my host spotlight this week is a blog post on Boing Boing, which is highlighting a petition to make “hella” the official SI prefix for 10 to the 27th. I’ll explain: you know megabytes and then terabytes, well hellabytes is going to be the proposed new name for things that have a one with 27 zeros after them. So one petabyte is a thousand terabytes, one exabyte is a thousand petabytes, one zetabyte is one thousand exabytes, one yottabyte is a thousand zetabytes, and now we’re proposing that one hellabyte will be a thousand yottabytes. I can’t tell you why I love this idea but I just do.
Stephan: It’s hella big.
Patrick: Welcome to holy sanctum of geekdom.
Kevin: (laughing) I usually have something a little code-y, but it sounded like you guys had that covered this week so there you go. If you think hellabytes should be the measure for traffic on the internet or as mentioned on the Boing Boing story the US national debt, sign the petition.
Patrick: That’s a little too vulgar to me. I think I’d prefer heckabytes.
Kevin: And that brings us to the end of the show. We are:
Kevin: You can follow me on Twitter @sentience and SitePoint @sitepointdotcom. Visit the SitePoint podcast at sitepoint.com/podcast to leave comments on the show, let us know what we missed or we were, you know, talking out of our butts and to subscribe to receive every show automatically.
The SitePoint Podcast is produced by Carl Longnecker, and I’m Kevin Yank. Thanks for listening. Bye bye.
Theme music by Mike Mella.
Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.