In the latest edition of our Meet the Author podcast, Fritz Onion sits down with Jon Flanders to discuss his course Building Hybrid Mobile Apps with HTML 5. In the interview Jon explains a bit about why a mobile developer might choose to use HTML 5 for cross device compatibility as well as how some of the new HTML 5 features such as media queries make building apps that span multiple devices easier.
Listen to the Audio (MP3)
[Fritz] Hi, this is Fritz Onion with another episode of Pluralsight’s Meet the Author podcast. Today I’m talking with Jon Flanders about his new course Building Hybrid Mobile Apps with HTML 5. Jon is an expert in REST based designs, HTML 5 and mobile application development. He’s also the author of RESTful.NET from O’Reilly as well as Essential ASP from Addison Wesley and was a co-author Mastering Visual Studio.NET for O’Reilly. Jon’s current major interest is helping people to understand how to leverage HTML 5 when targeting mobile devices. Hey, Jon, it’s good to talk with you today.
[Jon] Hey Fritz, good to be here.
[Fritz] So your new course, Jon, the Building Hybrid Mobile Apps, you talk about how to build essentially websites, web pages using HTML 5 but you go a little further than just building sort of a straight web page that shows up in a mobile device. You actually add constructs and features that make them look much more like real native applications. So I wanted to get into some of these details with you. Just to give the listeners a quick preview of your course, Jon gets into responsive web design as a topic as well as building the native shell for targeting various devices. He looks at designing mobile friendly content, dealing with touch and dealing with offline access to the application. So Jon, why don’t we start with probably what the most obvious question is, why might you choose HTML 5 to target mobile devices?
[Fritz] Yeah and one of the things I learned about watching your course was you can really kind of choose how much you want to invest in adopting the native platform even with HTML 5 versus kind of creating just a generic, you know, web interface and then that scale will sort of determine how much effort you have to put into each individual device you target.
[Fritz] Great, well let’s get into some of the details that you cover in the course here. One of the things you start off by looking at are media queries. Do you want to give us a brief introduction to those and why they’re important?
[Jon] Yeah media queries and media queries are actually the thing that gave me the epiphany about this idea. I’m obviously not the only person in the industry who’s talking about this but I saw a presentation on media queries and it really just blew my mind. Media queries allow you through declarative CSS to specify different CSS selectors and properties for your HTML based upon a query, an expression, and typically when we’re talking about mobile, those expressions are things like how wide is the view port or how narrow is the view port, depending on how you want to look at it but what it allows you to do is declaratively say, here’s my HTML. Here’s my CSS. When somebody’s looking at my web page or my app on a 27 inch monitor, this is what I want it to look like and when they’re looking at it on, you know, iPhone 480 by 480 width, this is what I want it to look like. When they’re looking at it on a tablet this is what I want it to look like and you can change things like color and what’s displayed and not displayed and the size of the images. And what that allows you to do is to have one, you know, HTML page, one you know set of CSS. It could be multiple CSS files or one CSS file but have that be able to render adaptively depending on the resolution of the browser and you can even do this by resizing your browser on the desktop. You can see this happen. And so media queries — you know one of the things that I talk about in the course is how it can allow you to build, you know, — again getting back to the idea of let’s say I’m an enterprise and I have a website that you know we want to have that functionality to be — to work well on mobile devices. Through media queries I can have the same page, the same functionality render really well on my 27 inch monitor and render really well on my mobile devices whether it’s Android or iOS or Windows Phone or a tablet or whatever. With that power is that I don’t have to do a bunch of service side detection of what the devices are and render different HTML and have different views or whatever my technology might be on the server side. I can basically say here’s my whole package of my application and again, the idea is to have it respond to the device and be able to render differently based on the device and the resolution of the current — of the browser, of the view port.
[Fritz] Right. Yeah as soon as I saw some of the demos you did of that, it made me wish that more websites did that today because a lot of people just choose a fixed pixel width and kind of stick with it because of design consideration. So –
[Jon] Yeah, the 960 pixels is what I refer to as the current designer fetish size.
[Jon] And you know, you and I talking and we both have 27 inch monitors I know. And so when you do a full screen on that, you get, you know –
[Fritz] It’s pretty much useless yeah.
[Jon] The website in the middle and then a bunch of white space or images or background images or whatever. It’s very annoying.
[Fritz] Yeah, yeah agreed. Well, great, Jon. I appreciate you taking the time. I hope everyone takes a moment to look at your course and learn more about using HTML 5 to adapt to all of these different mobile devices that are coming into our lives more by the day. So thanks very much Jon.
[Jon] Thank you Fritz.