Think Vitamin Radio: Episode #11

Recorded: Thursday 19th August 2010 Broadcast: Wednesday 25th August 2010

• Subscribe to the podcast RSS Feed
• Subscribe to the podcast in iTunes
• Download the mp3 as a file

Keir:It’s time for Episode 11 of Think Vitamin Radio. My name is Keir Whitaker and this week I’m joined by Mr. Michael Kus.

Mike:Hi mate.

Keir:For the American School Carson, Mr. Ryan Carson.

Ryan:yo, yo, yo

Keir:We were discussing this earlier Ryan, but why do the majority of Americans call you Carson and not Ryan?

Ryan:I don’t know. I’m American so I should know. But I’m totally confused by that.

Keir:Jason Calacanis recently tweeted out “@ryancarson, honored to be speaking at Carson’s event.”

Ryan:Love it.

Keir:We’re back with the second episode of our new format and Mike’s actually chosen a tweet this week. Had to look long and hard but he’s found one.

Ryan:I thought it was interesting you said you don’t read Twitter anymore.

Keir:He was thinking of doing what, MySpace mp3 link of the week or something Mike?

Mike:Yeah, I don’t know, maybe.

Ryan:Are you just too busy to do anything or are you just reading something else?

Mike:I don’t know; being busy, having TweetDeck on is bloody annoying. I turn it off and I just don’t get so much from it anymore. Maybe I need to follow a load more people.

Ryan:Fair enough. I’ve been reading a lot of blogs recently. It’s quite weird.

Mike:You’ve got a Reeder for the iPad.

Ryan:Yeah, for all you guys listening, I highly recommend Reeder. It’s a good RSS. I digress. Let’s do tweet of the week.

Keir:Yes we’ll be doing that and then we’ll be following up with a couple of topics this week. We’ll be talking about an article that was posted on our blog, thinkvitamin.com, which is talking about thinking of yourself as a subscription service, mainly aimed at designers. Then we’ll be discussing some of the challenges and issues that we’ve had in the redesign of our own site, thinkvitamin.com again, around HTML5, CSS3, media queries, that kind of stuff. But, without further ado, let’s go for tweet of the week.

Keir:It’s the second time we’ve done this and hopefully all three of us have got one. Why don’t we start with you again, Ryan. What have you got for this week?

Ryan:Mr. Faruk Ates had a very interesting tweet about Dave Shea’s new project, which is called PaintbrushJS. Basically it’s an open source project and it allows you to dynamically change images, similar to the way you’d apply filters in Photoshop. It’s pretty amazing. If you want to find that tweet, go to twitter.com/kurafire and look for it there. It’s pretty impressive.

Keir:Are there demos, have they got stuff working?

Ryan:Yeah, that link will take you to GitHub, which is github.com/mezzoblue/paintbrushjs. There is a demo there if you click it and I was pretty impressed. I don’t know how CPU intensive it is but it’s quite cool for quick effects on your site.

Keir:So it can just maybe make it CPO or that kind of stuff?

Ryan:Yeah, a lot. Let’s see if I can quickly find this demo.

Keir:Have you seen it Mike?

Ryan:For instance, you’ve got a JPG of a harbor scene. You can get sepia, grayscale, tint, blur. The blur is really interesting. You can add things like colors. It’s really pretty cool.

Keir:That’s one of Dave Shea’s personal projects?

Ryan:Yeah, a new project on GitHub. You could always search for PaintbrushJS and GitHub. It’s worth checking out.

Keir:That definitely sounds like it’s worth looking at.

Mike:I think you should go next.

Keir:Really, why?

Mike:Because mine will round it off nicely.

Ryan:He’s stressed.

Keir:I’ll go next then. I don’t know how meta this is but my tweet of the week is actually by Twitter.

Ryan:Oh my gosh, my brain just exploded.

Keir:I know, descend into a hole. It was posted on the 12th of August and it regards a new tweet button. It says “Our tweet button is live. You can read about it here…” pushing on a tweet button and there’s a link. The reason I thought this was interesting was mainly due to the fact that when we were at Chirp, and full disclaimer; we were involved in the production of the show, a lot of the talks revolved around Twitter and the ecosystem and how important it was to them.

Keir:I just find it quite fascinating that it seems to me that Twitter is actually now bringing a lot of advances that have happened due to their open APIs kind of thing, in house, and obviously we’re all familiar. We use it ourselves with the TweetMe retweet button, and so forth.

Keir:I know the guys, Nick from TweetMe are involved in some of the implementation behind the scenes, but I wonder how long that will carry on and what this means for other things that have been built on the Twitter platform. What do you think, Ryan?

Ryan:I think it’s a pretty crushing blow to TweetMe. Nick is a friend of ours and to be honest, I think anyone who’s building on top of any API needs to be prepared for the fact that without any notice the business could come along and completely yank out the rug from underneath your feet. I feel pretty bad for them, but what can you expect if you build your entire service off of an API. It’s not yours. It’s interesting; I was actually listening to This Week in Startups again this morning while I was working out.

Keir:You drinking some sort of pink fluid on a daily basis.

Ryan:Yeah, I’m trying to get Hulk huge. You’ll see.

Mike:It’s cool; it’s going to follow in nicely to my tweet.

Ryan:It’s interesting about being Hulk huge. It’s a big warning shot, everyone out there; it’s probably not viable to be building businesses off of Twitter’s API. They’re going to take all the good stuff, and I don’t blame them. I think they should.

Keir:I think TweetMe sort of have a new product coming out, which is sort of around the data from the Firehose and analyzing it. Again, they’re relying on the Firehose for the business model, so I think we probably will see more of this kind of stuff. It kind of makes sense from Twitter’s perspective. But it will be interesting to monitor. That was my tweet of the week. Before I go on, has anyone seen the Tweet button take over the –

Ryan:I’ve seen it everywhere. I saw it appear almost instantaneously.

Keir:So we’ll probably see more and more apps having that on.

Ryan:Think Vitamin quite soon.

Keir:Mr. Kus, what do you have for us this week? Are you familiar with what we do?

Mike:Not really, it’s difficult because I say I don’t really read Twitter that much. This one is not really about the web. It’s from someone on the web. It says “squats + abs = feeling wrecked”.

Ryan:That sounds pretty familiar.

Keir:Was that written by anyone we know?

Mike:It was, by @ryancarson.

Keir:Really? [laughter]

Ryan:I can’t believe you mentioned that.

Mike:I keep seeing you coming back from the gym every day, and it’s like “God, he’s keeping it up.”

Keir:I think he just throws water – he comes out of his car, parks around the corner, just throws a bit of water on his face and a towel over his shoulder.

Ryan:I’m shocked that I’m still working out a month later. I have to say sadly, it’s because I have a trainer. I feel bad if I let him down, but then again I worked out today and he wasn’t there, so all you guys out there who are pushing pixels, get out there and do some exercise.

Keir:Have you had any Rocky moments running up the stairs shouting “Gillian!”

Ryan:I did yesterday.

Keir:Cool, so three different tweets and I’m sure Mike will hopefully bring a lot of those.

Mike:I’ve got one [0:07:47 talk over]. That’s the tweet of the day. Actually, Mark Boulton tweeted saying “I’m just writing about how good you iDesigners like Air. You only know SIP is bad.” It reminded me of a talk from FOWD when Dan Rubin was talking about using things and how you shouldn’t really notice – doors that have handles on the side that you push is weird because you automatically try to pull them because they’ve got a handle. It’s a bit of a bad thing, but it reminded me [0:08:30?] Think Vitamin and to try and make it as easy as possible for people not to really think when they use it.

Keir:That’s a really interesting point though, because it’s like with a lot of things; you don’t notice that they’re getting in the way until they get in the way. I’m really intrigued to know how much of the stuff is kind of learnt behavior or how much is the best way of doing stuff. I think we talked about eBay and if they change their stuff, the UI, how they’d lose money. I would tend to agree with that, would you Ryan?

Ryan:Definitely, I think it’s all kind of about getting in the way. Let’s briefly talk about the choice of the radio button.

Mike:That’s what made me think of it. On our new Think Vitamin blog you’ll be able to filter the articles by type. There will be links, tweets, articles, images, videos, and to do that you deselect or select check boxes in order to choose the type of content you want.

Mike:There’s always a section of the site in my design I hated because visually it did look horrible, a list of check boxes, and when you put this stuff up in [0:09:45?] people were commenting on the check boxes, saying “do something that looks nice” but we had the conversation and we came to the conclusion and I think it is completely true, that it’s so natural when you see the check boxes; you know exactly what to do.

Ryan:There’s no confusion.

Mike:I think I could have easily designed some little graphics we could put instead of using whatever you use to do that, like little tics or something. I think people so easily misconstrue it as a graphics thing like “We have these things. This site includes.” To take away those check boxes would be like to put another barrier up for the user.

Ryan:I actually agree so it was a painful choice thing for us because we obviously want it to look as beautiful as possible but we’ve decided part of beauty is actually speed and usability. Leave it on.

Keir:Excellent, we’ll be back in the next episode with two tweets of the week and whatever Mike brings to the table. Actually you brought two so you made up for it. We’ll be back after this and tackle the two media topics of the day.

[break]

Keir:Before we crack on to thinking of yourself as a subscription service, which is actually quite hard to say, and HTML5, CSS3 and media queries, you’ve got an announcement for us, don’t you Ryan?

Ryan:Yes, I wanted to remind everyone out there that Future of Web Apps London is happening in October and the lineup of speakers is amazing. We’re really excited about it. It’s filling up fast so I hope all of you guys out there can join us. There is an option to buy a one-day pass or a two-day pass in case that’s more affordable for you. As well, if you do buy a pass, you get the video pass for free. You can see all the talks that you miss.

Mike:Either pass.

Ryan:So futureofwebapps.com, I hope you guys come and join us.

Keir:I know there are a lot of talks kind of focusing around money and business and startup culture and all that at Future of Web Apps. A recent article on Think Vitamin alluded to the same from the designers’ angle, written by Jackson Palmer, who works at Adobe Business Catalyst. He was one of the guys who stayed in Sydney while the rest of them [0:11:59?] San Francisco.

Keir:I thought it would be interesting to chat about it. Way back when I worked as a freelancer, and I know you’ve worked in an agency Ryan, and Mike you’ve done the occasional bits and bobs. Why don’t you start, Ryan, and tell us; did you think the article was a good idea or bad idea?

Ryan:I did. For those of you who haven’t read it, the idea is that when you do freelance work as a designer or developer, instead of seeing your business as “I’m going to create a website for you and then you pay me a chunk of money,” you say “When you work with me, I’m going to charge you on a monthly basis from now until you close the site. Basically from now on, I’m going to cost you X per month, and we’re going to start a relationship and we’re in it together and we’re both going to make this site succeed.” Instead of the client coming to you and going “Keir I want you to build me a website, and then we’re going to be done, and we’re going to walk away.”

Ryan:I absolutely love this article because having been a freelance developer and then working in a design studio as the lead web developer, and now hiring freelance developers and designers, it’s a real problem the whole idea of you hire for a short bit of time, do a bit of work, and then you say goodbye. It really actually doesn’t work very well.

Ryan:There are some major problems with that and I really liked the idea of the article, but before I talk too much, I don’t know if you had any thoughts on that Mike. You did freelance work under the brand that you’re working on but you still do that. What do you think about that idea?

Mike:I read the article and it was really interesting. I have to be honest; I never really thought of it at all before reading that article. I thought it was a different way of looking at it. I think we’ve experienced it, obviously, from working on Think Vitamin membership.

Ryan:Primarily Joel is our developer.

Mike:I’ve never really thought of it but I think it’s a good idea. I think what’s so surprising about it is it hasn’t crossed my mind, and it seems sort of obvious to look at it in a different way like that.

Ryan:It’s such a great way of ensuring that you get a certain amount of income per month as a freelancer, which is kind of mind-blowing because the most stressful part about freelancing is you’re continually worrying about work. “I did this job and it’s taken up all my time, but I’ve got to get a new job in next month.” Instead, you could build up four or five clients you love working with, and you consistently improve their site and you build a good relationship, they like you, and they know how much you cost. You know you’ve got X amount of work to do and you’ve got to get it done. It’s almost like building a recurring revenue model of yourself.

Mike:When I read it I sort of read it a bit differently to you in the sense that I was thinking of it more as a method of working rather than actually becoming a subscription service, “I charge X amount a month.”

Ryan:You could do that, though.

Mike:You could do that.

Ryan:If it was a lot. I would charge a lot to only get clients that could afford you.

Mike:Obviously, you could do that but I guess you’d have to work out a system on how much work you would do for the money you were getting monthly. It could go crazy.

Ryan:You could basically say “I want X per month,” whatever you feel you’re worth, and that you can charge, and then you could say “realistically how much would a client pay me per month?” It would have to be a little cheaper than a fulltime employee, otherwise why wouldn’t they hire you fulltime. But there’s kind of that interesting dichotomy; a studio in London, we had clients like Honda. We did hondaf1.com.

Keir:That was you?

Ryan:Yeah, da-tada, back when Jenson was a really s-h-i-t driver.

Keir:No, he’s never been a s-h-i-t driver. [laughter]

Ryan:We did that, and Honda had lots of money and they paid us something like £200,000, I think it was per year, to do the website. It did come down to a retainer and I always thought agencies do retainers, not freelancers, but I think this article made me realize a freelancer could have a retainer.

Keir:The one thing that really struck me was that whilst I really like the idea, having done freelance development work in the past, that you’d have this kind of revenue stream, I think it’s actually quite risky if you’re a lone crusader out there and you suddenly take on a job, and you say to the client who may be a small business or another sort of lone crusader doing whatever they’re doing. “Normally this would be £3,000 but I’m going to space it out into 12 months. We’re going to have this ongoing relationship and the first two months I’ll deliver the website.” Great, by month three you’ve got 2/12 of your revenue in and that person goes quiet.

Keir:I wonder if there has to be a sort of middle ground where you say “Okay, there’s going to be a bit of an upfront payment, which is going to be a lot less than what you’d normally get charged, but I would like to work with you in this way over the next 12 months. We’ll have a relationship and we’ll have a monthly retainer,” so you’d recoup that probably within six months and then beyond that you’re kind of having the benefit of the revenue. I think it’s kind of risky, isn’t it, to space it all out over time?

Mike:I think you’re right on that front, but I actually didn’t read it like that. I read it like it was more of an analogy, like think of yourself as a subscription service, not actually be one. When you get a job in, like “build me a website,” you can go back to them and think about it more long term, “I can build you a website. We can do that, by have you thought about this, about that?” Use your expertise from the web to help your client [0:18:42?] how to get recurring revenue, and they’ll come back to you to optimize the site, keep looking after them.

Ryan:Wouldn’t it be lovely if you knew that part of your job was making the site better and better, instead of just giving them a website and then looking back at it after six months when they’ve messed it up really bad and you’re thinking “Gosh, now I can’t talk about this.” Instead, you could be involved on an ongoing basis in the project. They could come back and say “We want to do some A/B testing,” and you’d say, “Great, I’ve got you booked in.” It makes the whole process nicer.

Ryan:I’ve noticed with freelancers that when you get to the end of the project they want to be done. As a freelancer you are bored with the project, kind of sick of it, and you want to get your money and run. Whereas, if you’re a freelancer and you’re investing with this client long term, it’s a different mentality. Instead of “I just want to be done,” and both of you being frustrated, it becomes “great, we launched; now let’s make it even better.”

Ryan:That’s what we’re doing with Think Vitamin membership. We’ve been continually improving the site and changing it and doing all sorts of stuff since we launched. We haven’t launched it and left it.

Keir:I think that’s an interesting point. Something that Paul Boag has talked a lot about in the past is kind of educating your clients. I think there’s probably a large element of if you come up to a client you’ve done a site for and you say “By the way, let’s do some A/B testing,” they could reasonably turn around and say “Why didn’t you make it right the first time? That’s what we paid you for.”

Keir:I think the up selling that designers and developers can do, things like A/B testing, digging deep into analytics, optimizing, all that kind of stuff, you have to have a client that understands why that might not have happened in the first instance so you can build that relationship. I definitely think it’s doable, for sure.

Ryan:Yeah, so it’s a novel idea. If any of our listeners out there already do this, let us know how it’s working for you. It would be fun to hear some real stories.

Keir:There are a few comments on there but I think there is plenty of scope for more. As Ryan said, if this is something that you’ve tried successfully or otherwise, do let us know.

Keir:Second topic, I think last week we said we’re ever only going to do one so we are already changing the format. Such is life. Anyone who reads our blog or has been listening to the show knows that we’re currently in the redesign, reimagining phase, and rebuilding for you Mike, of the Think Vitamin site. We took it back to its own domain a couple of months ago. We want to bring the actual blog, thinkvitamin.com, more in line with the membership site visually.

Keir:It’s going to visually be sort of similar and take cues from that. Ryan has smacked down a few challenges to myself and Mike, mainly that we’re going to do it in HTML5, and we’re going to be using media queries for serving content differently to different devices.

Ryan:Keep it responsive.

Keir:Keep it responsive, as is the trend. It’s not been without its problems, as we’ve been finding out, so why don’t we talk about HTML5. It’s a buzz word and a hot topic. It was new to pretty much both of us so why don’t you explain a bit about some of the things you found out and how hard or easy you found that?

Ryan:I want the listeners to all know that basically we’ve never built an HTML5 site before this, so Mike was starting from nothing. It’s been a really interesting and fun process going from nothing to real.

Mike:We were really busy just keeping up with this stuff. You hear all the time in blogs and you’re constantly thinking “Oh God, I’ve got to get my head around that sooner or later,” so it’s been a good opportunity to do that. First, I designed Think Vitamin and literally [0:22:48 picked out a book by Redactia]. I basically read that pretty much from cover to cover.

Ryan:That is cool. I watched you read it in about half a day.

Mike:I basically read it all and then –

Keir:It wasn’t strange just watching him read it for half a day?

Ryan:It was weird, but that’s alright.

Mike:I hate tech books. I’ve never learned anything from a manual. The thought of it fills me with dread but it was really quite good. This was actually a book I could get on with because it was to the point, easy to understand, explained how HTML works. It was nice. There was some stuff in there I didn’t get into, like Canvas and stuff like that, but from a semantic point of view of laying out your page it made a lot of sense. There’s still some weird stuff I didn’t quite get; the headers and footers being multiple throughout the page.

Ryan:Why don’t you share some of the key, small bits you’ve learned that will help our audience?

Mike:What I got from it is your page is divided in a way, into sections mainly.

Ryan:So it’s more semantic now.

Mike:It means something now, rather than just being a div. The section is related content, and within that you could have a header and a footer, and articles or whatever you see fit. The weird thing that sticks with me now is when they invented HTML5, apparently they looked at over a billion webpages and found the most common names were header and footer and sort of used these. The problem is it’s not using them in a way that we’re all used to using them, as in header of document and footer of a document.

Ryan:One header per page, one footer.

Mike:Within a section you might have your heading and it might just say “Think Vitamin Podcast” and underneath you might write “radio show every other week”. You’d wrap that in header because that’s really the heading of that section. It might be an H1 and a bit of text.

Mike:Similarly it goes for footer. This section may have “this was written by blah, blah” and so on. It does make sense.

Ryan:We found it quite weird didn’t we, that you could have multiple H1′s on a page. You could have an H1 in each section.

Mike:You start again each time you start a new section; the whole thing starts again and you start with H1′s again. You don’t have to, you could use H2′s still but it makes sense. It’s definitely nice; I’m still using divs in this design but it’s nice to have some things with meaningful names, like “section nav”. It helps and it’s making sense.

Mike:Looking around the web, I’ve looked at a few sites and people are using it in their own ways because at the end of the day, deciding what’s a section and what’s an article is really down to the person building the site. You have to decide is this content related, should this be an aside. There is no definitive right way of doing it. You have to make those decisions yourself, and it’s a learning process. I’m sure after this, the next site we’ll do, we’ll have learnt from this and we may do it slightly differently.

Ryan:Maybe we should talk about the media queries in CSS3 and how we’re doing that. What have you learned?

Keir:It’s hard. I’ve played around with it a little bit but –

Ryan:Explain it first. Maybe everyone doesn’t know.

Keir:There’s been an awful lot of great articles written about it by “Beep” as we affectionately call him, Mr. Ethan Marcotte. He did a great List Apart article. He’s also got another article in this month’s .NET magazine which is called – what’s it called in the States Ryan? Do you remember?

Ryan:No

Keir:Web Designer Magazine? I can’t remember. It’s on a similar topic but it’s this idea that the CSS will respond to a change in the view port size so whether that be shrinking your browser or the iPad resolution, iPhone, or Android device and so on. What you can do is serve up a different set of CSS selectors depending on the size of the screen.

Keir:It’s quite easy to do for one device, where you can just override some of the selectors you’ve got from your main site, but when you’re trying to cater to two or three, and dependent on how your markup is and your CSS, it can get quite interesting. It’s made me really think about how you might approach the markup; where do you start, what are your base styles, which ones do you override?

Keir:I think you’d agree Mike, what we found is you’ll define your H1 but then you’ll have to override six or seven sort of attributes of that selector just to make it work on a smaller screen, so you can get bogged down in negative margins and padding and all this kind of stuff and you are sort of re-correcting it. I think it’s quite challenging in that respect so given that you’re at the beginning of the project, have you changed the way that you might approach the CSS because of that?

Mike:I found a few things. The funny thing is I don’t think media queries are actually that hard. It’s not like everyone describes.

Keir:We just copy them, don’t we?

Mike:It’s not really hard but what’s throwing up challenges, the first challenge was really silly little CSS things that aren’t difficult but it’s like being at the beginning, like [0:29:17?] have a quick look at it. “How do you centralize this again?” It’s really simple stuff but you don’t normally use it. It’s not actually difficult but you haven’t used it in years.

Mike:The overriding stuff, that is interesting because you could write quite a lot of CSS for something if you’ve styled something in quite a complicated way, with lots of different images and stuff, you’d have to do an awful lot of overriding for that. But it’s really interesting and great to see; I’ve done the top section of the site, and navigation changes a couple of times, the logo gets a new image for the iPhone and it’s really cool to see it go right down to that size device.

Mike:A lot of this stuff, because it’s all percentage based, which I’ve never really bothered doing percentage based sites, so that makes it another sort or learning curve and understanding how those percentages work in a website. That does a lot of it for you. You shrink the window down and it all happens and then you get to a point where it’s not going to look good anymore and something pops out and you have to fix it as you go.

Ryan:What tools are you guys using? You’re using iPhone Emulator, anything else?

Keir:The SDK iPhone simulator from Apple, which is quite handy. If you haven’t got it, it’s definitely worth downloading. I think you have to register as a developer, which made Mike smile, and then you have access to the SDK. It’s quite a chunky download.

Ryan:Is there also an iPad?

Keir:Yeah, you can simulate the iPad, iPhone 3 and iPhone 4.

Ryan:Oh, you can do the iPhone 4? I wonder how it deals with the retina display.

Keir:It does, it just makes it really big.

Ryan:I haven’t seen that yet. It would be cool to see that.

Mike:Another interesting thing about it is we were talking about something that no one’s mentioned; it took us about three hours –

Keir:It was about 10 minutes, Mike.

Mike:We have to stop there, the site being shrunk by iPhone, which is –

Ryan:Keir did you figure that out?

Keir:I spotted a crafty meta tag in either John Hick’s or Elliott’s [0:31:37?] so I actually blogged about this revelation, at least it was – maybe not to a lot of people out there, but essentially you can add in meta tags that will be picked up by Apple Safari browsers and one guy in the comments actually pointed out that actually, although it’s not a standard, Android and various other browsers are picking that up. It was effectively saying how do you want your web page, not just your images, to scale? Do you want it to be scaled at 1.0 or 0.7? I don’t think we worked out what the default is on the iPad, but it’s actually to shrink it quite heavily.

Ryan:[0:32:12?] sets that to 1.

Keir:Yeah, set it to 1, so if you’ve got 320 pixel width on your iPhone, and you’ve got a 280 pixel image, it will be big. It will take up half your iPhone’s screen.

Mike:What’s so interesting about that is the fact that a lot of websites are fine, as far as I’m concerned there are a load of websites that work absolutely fine in iPad. They don’t really need that much done to them. It’s not hard to use on an iPad.

Keir:By declaring this tag, you’re creating a [0:32:39 rod for your own back] because you have to then cater for the iPad.

Ryan:We decided a workaround this morning, that we haven’t talked to you about actually. We’re going to use Java Script to remove that meta tag for iPad. Essentially, we want the site to look normal on an iPad because iPads do a good job of displaying sites normally. We don’t want to have to do a bunch of extra work to rework it and then unwork it to get it for iPad. We’re just going to dynamically remove that meta tag using Java Script.

Keir:You know that iPad will be able to do that because it’s Java Script enabled. That’s a good idea.

Ryan:I think so.

Mike:I was talking about it with Greg and it was interesting because playing around with the portrait resolution of iPad, decided shrinking down is going to look weird. It’s going to have to be readjusted using media queries making it look right. You can’t just squidge it into that space.

Mike:II could probably do it quite quickly, basically change the primary content column, give it a lower percentage, and give the secondary content column on the right a higher percentage. You could do it like that and then when you switch the iPad around, because of the view port, windows become bigger, it can switch back to its normal set of styles. Obviously we’ll have to try that out in the simulator.

Ryan:The other bit that I thought was interesting was the fact that the problem with the design is you can actually force people on mobile devices to download high res stuff. Say you set display to “none” on a larger image because you don’t want to show, the problem is the browser is still going to download that image.

Ryan:We discussed it this morning, someone pointed it out on a Think Vitamin post, “This could be forcing people to download big files.” Mike and I talked about it and we think the important route to take on that is make sure the structure of your site isn’t forcing large files to be downloaded when you respond and make it go down to iPhone size, for instance.

Ryan:We’ve been very careful to make the basic markup of the site and images be fairly lightweight so when they get rearranged and shrunk down for iPhone, it will still be quick, but if we post a larger image in a post, there is a possibility we may upload multiple versions of that. We’re thinking about this, where say you have a nice beautiful JPG that’s 500 pixels wide, we might also in WordPress either have a plug-in that automatically resizes it for you, or uploads a secondary lower res version of it, so when you’re looking at an iPhone maybe it’s resized. It actually serves a different file.

Ryan:We’re thinking about it but the truth is a lot of people are busy with it when they post and they don’t have time to upload two different images. That would be the ideal situation.

Keir:I think that was Patrick [O'Neil] who pointed that out, on my quick post on Think Vitamin. He raises a valid point. I think the thing with responsive design or this notion that different things appear and different images can come in, regardless of the device, you’re downloading the whole thing. There is no Java Script to “sniff out” what the device is, to load different assets. I think Patrick and his comment refer to, that it does actually download an extra 200KB worth of images. It looks great but that’s quite a heavy hit. Maybe in time it won’t be on a 3G network or H or whatever, if you don’t get 3G.

Ryan:It’s worth thinking about all the snafus you have to be careful about.

Mike:One think that’s interesting, one thing you forget – the conversation you were saying about we can put this down at the bottom and put that here, it makes you realize you’re still showing the same website to people.

Ryan:The same markup, like you can’t dynamically change markup.

Mike:You do have to think about how you build it, form a markup point of view. I’ve specifically built our site in a way that gets all the content – I know I need to be at the top of the page to view on iPhone, but there’s some stuff I might not have actually put up there.

Ryan:I think the cool thing about that was you were thinking about the responsiveness of it from the very beginning. If we had decided to make this site responsive after it had been marked up, we’d be in trouble. I think that was a lesson to be learned; plan on doing this from the beginning. Immediately start looking at the iPhone simulator before you finish even deciding how your page is going to get laid out.

Keir:Just to round off, I think responsive design is great but I think some of the debates that have been going on, Jeff [Croft] made kind of an impassioned blog post about it as well, about context. It’s not going to work in every situation, so it’s very much a case of the right solution might be to serve a different HTML file or a different template, or what have you. I think it’s not necessarily the right situation, a solution for every situation. It’s all about context and how you want to use it, but it’s been very interesting.

Ryan:It’s a good tool to use.

Keir:We will undoubtedly be talking more about our other accomplishments or frustrations on future shows. We’ve actually reached 40 minutes so we should probably wrap up. Any final thoughts, anyone doing anything exciting in the world of web in the next week or so?

Ryan:I’ve got a little giveaway. Those of you who have been faithful and have stayed with us, who are in the chat room live – I encourage all of you lazy people who aren’t.

Keir:We’re on UStream aren’t we? We’ve got a video camera here. I’m trying to avoid it.

Ryan:We are live, and in case you missed that and you hear this after the fact, we are going to live stream these for now on. We’re going to do things like this, which unfortunately you’re going to miss out on if you’re not listening live.

Keir:Sorry to interrupt but how do people know what the URL for the live stream will be? Will you tweet that out?

Ryan:We will tweet it. I tweet out from my account but in the future we’ll tweet it out from Think Vitamin, hopefully.

Keir:Sounds good.

Ryan:If you’re in the chat room, and you want to enter a chance to win a free diamond account on Think Vitamin membership, which is worth $99 a month, and for that you get 12 online conferences a year and you get unlimited video tutorials, and all four Q&A sessions, please tweet out #tvm for Think Vitamin membership, and tell us why you would like the service. I’ll pick one of you guys randomly and we’ll go for that.

Keir:When are you going to announce the chosen one?

Ryan:I’ll probably announce that tomorrow. All of you in the chat room right now, I think there’s about 50 of you, feel free to tweet out #tvm and why you want a Think Vitamin membership, which is at membership.thinkvitamin.com.

Keir:Excellent, so I think we’re about done. Any final thoughts Mike? Are you back to the grindstone?

Mike:Yeah, I’ve got to get back to it, see you later. [laughter]

Keir:Thanks as always for listening. We’ll be back in a couple of weeks with another show. Thanks guys.

Ryan:Thanks.

Mike:Cheers.