Get me up to speed on HTML5, Responsive Design & Phone Gap

May 25, 2013 3:05 AM

For the first time a long while, one of my clients is having a complete site redesign and I want to get up-to-speed on the latest technologies. I also just got a adobe creative cloud subscription so I'm kinda excited to play with the new toys - particularly interested in phone gap but that's more "personal use" than relevant to the site rebuild

I'm more interested in websites than books, I'd like to dive straight in this weekend since its a bank holiday weekend.
I'm interested in HTML5 but I'm concerned that too much of it isn't widely supported. (we need to support IE8 :(). I don't really want to be having to write everything 2 ways so ideally I'd like tutorials that focus on the basics and any new features/apis that are reasonably well supported (IE8+, Chrome, FF5+, Safari + mobile browsers). I can learn about the rest as an when they become relevant & well supported. (another reason for starting with html5 is to make it easier to utilise these features in the future).

We don't use videos or audio or anything like that (at least at the moment). The site is fairly basic, text, pictures, the biggest feature is the search form - so I'm particularly interested in developments to do with forms and validation. Other than that the search results all come from ajax calls (to php scripts which make soap calls to 3rd party data providers), Im been using mustache as a templating system for both php/html and js

"Responsive Design" is the big thing I'm wanting to learn more about, 30% of our traffic comes from mobiles and tablets (double what it was last year) so its really important that the new site provides a good experience accross all platforms/devices. I'm interested in learning how to do that with the minimum of code clutter. jQuery is my javascript framework of choice but I'm open to alternatives (including not using a framework but my js skills are kinda rusty).

I'm also interested in learning about building apps using phonegap, more for my own personal use though but since the skills needed are related to the above I'd like to at least keep that in mind while I'm learning the stuff I need to know for work.

I know there are a ton of tutorials out there on the subject, but which are the best? I want to learn the best practices from the start and unfortunately you don't require credentials to write a tutorial online heh, when I first started learning php from web tutorials, I learned from some truly awful code!

One final note, I prefer text tutorials rather than videos or "pod casts".

posted by missmagenta to Computers & Internet (7 answers total)

I'll address most of the front-end stuff here:

My first recommendation is A List Apart. They are an online magazine that posts articles for the people who make the web, and their stuff becomes the golden standard in some ways for new techniques.

It will be harder for you to find new tutorials that still provide you code that supports IE8, but the support IS still there.

HTML5 is really just the newest version of HTML4. The place where I work still supports IE7, and 99% of what I do in HTML5 works fine in the lower IE browsers with the addition of something like Modernizr.

A good starting point would also be Twitter Bootstrap (which is a very full-featured framework for building websites) and HTML5 Boilerplate (which has fewer features but is a bit nicer if you don't want all of Bootstrap's overhead). Personally I recommend starting with Boilerplate, but Bootstrap is a good place to inspect element and code peek and see what's going on. Initializr allows you to roll a new project with Boilerplate or Bootstrap.

Two other good, clean responsive boilerplates: Skeleton and 320 and Up. Skeleton is also a nice responsive framework that has just the basic code to get you started, and is responsive on a grid. 320 and Up is a responsive boilerplate that focuses on developing your site "mobile first", and is really good.

There's a great resource that someone recently launched here - http://uptodate.frontendrescue.org/ - that has a list of tons of Front-End resources. Just peeking at their list of blogs, it looks like they have a lot of the big ones covered. 24 Ways, Smashing Magazine, CSS Tricks (kind of silly name, but as a front-end developer I reference this site ALL THE TIME), Net Tuts.

Best of luck!
posted by kellygrape at 5:51 AM on May 25, 2013 [6 favorites]

Well, yeah. All that Kellygrape said. Once you get the hang of the grid system, it's pretty easy from there.
posted by dawkins_7 at 6:35 AM on May 25, 2013

Best answer: Speaking of diving: Dive into HTML5 to bring you up to date.

Also:Browser-Support Tables - you will thank me later.
posted by KMB at 6:46 AM on May 25, 2013 [2 favorites]

Bootstrap is good stuff, and includes responsiveness if you use the grid correctly. It's easy to learn, especially since you already use jQuery. It would be quite doable to study it over the weekend and start working with it on Tuesday.

However, it doesn't work well with IE8. Google "bootstrap ie8" and you'll see StackOverflow questions at the top of the list, with some discussion of workarounds.

(What proportion of your viewers are using IE8 anyway? With 30% visitors on mobile devices, I would expect IE8 to be pretty fringe. Maybe a diminished-but-functional presentation is OK for that 1.5% of your visitors that use IE8--it's something to think about, anyway.)

I didn't use a tutorial for Bootstrap, just set up a new HTML page and implemented the examples one at a time from the documentation, experimenting as I went. The documentation lends itself to this approach very well.
posted by mattu at 7:13 AM on May 25, 2013

Response by poster: The client uses IE8 so it doesn't matter if he's the only one in the world, its gotta work right in IE8 (someone else in his office uses 7 but I think I've managed to convince him that its not worth developing for the 0.5% of visitors that use it)

I should also mention I'm not a big fan of html/css frameworks, particularly grid-based systems. Maybe I'm just old fashioned but I prefer to code pages from scratch.
posted by missmagenta at 7:23 AM on May 25, 2013

Best answer: Coding from scratch is well and good, but it's also worth it to put yourself in a position to benefit from code that has been widely tested. Of course, that doesn't mean you have to use a framework, but it is a good reason to dig into some of the framework code out there.

I would suggest looking into Less if you want to go your own way. It will make it easier for you to build up a library of your own techniques in a way that is easy to reuse across projects.
posted by Nothing at 8:23 AM on May 25, 2013 [2 favorites]

I found this tutorial quite useful (also to help explain newer stuff to colleagues, etc)

Examples on cordrops are usually detailed enough for me to understand., and tend to address modern techniques.

Superhero.js is a good list to browse too.
posted by motdiem2 at 3:04 AM on May 26, 2013