MCDIA ‑ Mobile Website Development

mobile website development[music]

John Maher:  Hi, I’m John Maher, and today I’m here with Anthony Schwartzman. Anthony has over a decade of experience in Web development, and today we’re talking about mobile website development.

Welcome, Anthony.

Anthony Schwartzman:  Hey, John.

John:  Anthony, I understand that there are studies out there that have shown that by mid‑2014, more global users will access the Internet on mobile devices than on PCs, and the research firm IDC Forecast has said that the same is going to be true of US users by 2015.

Whether or not those predictions are exactly true or not, we’re clearly on our way to a world in which more people are accessing the Internet on mobile devices rather than on desktop computers or laptops. Given that, is mobile website design optional?

Anthony:  It’s pretty clear that it’s not. As a matter of fact, in India, as of, I believe, May 2012, the share of mobile Web access to normal Web access exceeded 60 percent. They crossed the line a couple of years ago, and there’re a billion people there. If you want people to see you online, you can’t restrict yourself to the desktop experience anymore.

John:  Certainly with our clients, in Google Analytics, depending on what industry people are in, I’m seeing already 35, 40 percent of visitors are coming from mobile devices already.

Anthony:  That squares with statistics on the larger scale. We’re past a third already. If you look at the trend lines, they certainly comport with what you say vis‑à‑vis 2014 and 2015. The lines will intersect and we’ll actually see more people viewing websites on various kinds of devices than they do on desktop computers.

John:  Given that, the question was, is mobile website design optional? You’re saying no, it’s not. The reason for that, obviously, is just that, as more and more people are visiting your website on mobile devices, if you don’t have it optimized for mobile and people can’t really correctly view your website on a mobile device, you’re cutting out a whole segment of the population that is maybe going to have trouble viewing your website and your information on their mobile devices. It’s time to switch over and make sure that your website can be viewed properly on a mobile device.

Anthony:  It’s time now, because it’s only going to get worse the longer one waits.

John:  What’s the best way to build a mobile site?

Anthony:  It’s important to maintain a single data structure, for most sites. The question then becomes, we’ve got one set of data and one set of pages ‑‑ how do we make this look good on different screen sizes?

There’s a technique in front‑end development now called responsive design, which means that your style sheet actually pays attention to how big the screen is and loads different styles. What this means is that when you maintain your website, certainly from a content standpoint, you only do it once, because there’s only one set of it, and it conforms itself to look good on different sizes. It’s a relatively lightweight technique, and it makes it possible for maintenance down the road to be pretty easy.

John:  What does that take, to make your website responsive? Do you have to start over from scratch and build a whole new website, or is that something that you can add onto your current website? How does that work?

Anthony:  It depends on the site. Frequently, it’s less trouble to build from scratch than it is to retrofit a site. The reason for that is that often the most effective way to do this kind of thing is to actually build the smallest screen size first ‑‑ and there’s a reason for that that I’ll get to in a minute ‑‑ and then gradually add style rules to that as it gets bigger and bigger and bigger. That’s called mobile‑first development.

It doesn’t indicate that mobile is necessarily more important. It just means that as you’re building, it’s the first thing you do, and you pile more layers of the pizza on top of that.

John:  What would be the advantage of doing that over building the desktop version first and then going mobile? It’s harder to take things away than it is to build things up, like you’re saying?

Anthony:  I prefer to do the mobile‑first path. I don’t know if I would say it’s necessarily harder. There’s another philosophy, called graceful degradation, which obviously starts with the desktop and works its way down. The benefit of mobile‑first is because you’re loading less on the smaller screen size. The smaller screen size also happens to be the device that’s accessing the site over a 3G mobile network or over a cellular network, so it’s the one with the least bandwidth. You’re giving the least amount of data to the one with the least bandwidth.

John:  That’s responsive design. Are there any other options for mobile websites? I know we used to build, sometimes the mobile site would be on a subdomain ‑‑ m.example.com. Are those still options that are viable?

Anthony:  That’s an option that works well, sometimes for your more complex Web apps. Something like a dating site or a big e‑commerce site might build an alternate site that is served to mobile devices. Often what you’ll see as well is a pop‑up that offers the user the opportunity to download an app that was actually designed to exist only on a mobile device that talks to the same database that the website would.

The m‑dot subdomain or other solutions like that can be really useful for particularly complex sites. Though, that for most of the sites that small and medium businesses use, where you just aren’t necessarily accessing accounts or performing transactions, it’s total overkill and could be regrettable down the road. It has a place, certainly.

John:  If you just have, basically, you’re just trying to give the information to people in one form or another, and it’s basically the same information whether you’re on a desktop device or a mobile device, then maybe responsive is the way to go, because you’re just displaying the same information in a different way.

Anthony:  That’s exactly correct.

John:  If you really had to have the mobile experience be quite a bit different in layout and form than the regular website, then you might have to go with a subdomain, m‑dot, mobile version of your site.

Anthony:  Yeah. Look, it’s something that has to be determined on a case‑by‑case basis. I wouldn’t say there’s a hard‑and‑fast rule. It’s certainly possible to build a Web app that’s responsive, but certain challenges emerge as you move into more deeply interactive resources.

John:  I have an iPad, and I’m seeing more and more, when I visit sites on my iPad, like you said that little notice will pop up and say, “Hey, did you know we have this app that you can download? Go here to download the app,” and you can choose to do that. It certainly seems like more and more people are going in that direction, having an app, where it makes sense to do so. Then, in that case, you’re trying to make those people who are visiting your website on a mobile device, push them over to download the app and get their information that way.

Anthony:  You can have greater control over the experience on a device if you’re building an app because it’s optimized specifically for that contraption. That certainly doesn’t obviate the need for having a site that looks good everywhere, because if people can’t even see your presence and your message on whatever device they want to use, there’s no way they’re going to become a customer and get their hands on the app and continue to engage with you.

John:  Right. I know, on my mobile device, when I’m on the cellular network, sometimes sites load fairly slowly. Are there ways that you can optimize the website so that it loads faster on mobile devices? Is that something that you take into consideration as you build a responsive site?

Anthony:  The mobile‑first strategy that I mentioned a minute ago is the first thing to do, which means that significantly smaller quantities of data are being pushed. That is done largely in deference to the smaller bandwidth on the smaller devices.

In general in Web development, one wants to optimize for rapid load times, and that’s something that comes into play maybe a little bit more noticeably on devices. That means optimizing images carefully compressing style sheets and scripts, and really doing everything we can to trim the fat. This is something you have to do all the time, but it matters even more in mobile.

John:  Right, great. Anthony, thank you very much for talking to me.

Anthony:  Thanks, John.

John:  For more information, you can visit McDougall Interactive at mcdougallinteractive.com, or call us at 978‑750‑8000.

[music]
Transcription by CastingWords

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>