You’ve been designing for print since college and have an eye for what makes visuals work. But the landscape has changed (and for some, might even look a little scary). So when the ball dropped at the start of 2012, your resolution was to learn a little more about the digital side of it all and make yourself that much more marketable.

Now is the time to get started. There are tons of resources out there to help print designers get their feet wet in coding, HTML and digital design. Because of the skills you already possess as a print designer, the transition might even be easier than you think. You already know how to use text, color and images, but need the skills to make it happen in the online format. With a little time and dedication, almost anyone can learn the basics with a few great (and free) tutorials right at your computer.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Coding for Beginners

Sites such as Codeacademy and Carl Herold’s Higher Computing for Everyone allow users to learn the basics of computer coding at no cost. Users go through a series of courses designed by developers.

Codeacademy, which started in the summer of 2011, boasts more than 500,000 users and received $2.5 million from investors to finance the venture in October, according to The New York Times. Higher Computing for Everyone, which started in 2009, claims about 6,000 subscribers. Each of the sites is easy to use and do not require previous knowledge of coding.

The bonus for Codeacademy is that the lessons are structured in an almost game-like way, allowing you to earn achievement badges for finishing lessons and sharing them online. Codeacademy lessons start at the most basic level – Lesson 1: Getting to Know You shows the syntax of programming – and moves on to lessons in Javascript functions. The only real downside is that the lessons lack context as to why things are done this way.

The game-like atmosphere of Codeacademy is fun. Going through the lessons gives you an immediate sense of accomplishment and understanding. With each entry in the practice area, the user gets immediate feedback on if the code was entered properly and if not, hints on how to proceed. The interface does not require sound and can be practiced at any pace, although it does work better if you complete whole lessons before logging out.

Carl Herold’s Higher Computing for Everyone is a much more structured setup. You do not have to register for the site to go through the lessons, which are more like reading lectures than the interactive nature of Codeacademy. Herold takes users through the history and background of coding and programming languages in the first lessons and moves on to writing basic programs.

The depth of information is impressive but the interface might be intimidating for first-time coders. The lessons require a lot of reading and the interface does not have a practice workspace.

Combining the lessons in the two online modules might be the best route for learning as much about coding as possible. Herold’s information explains the principles in a clear way so that you can get a grasp on what it all means. Codeacademy’s lessons offer hands-on experience working with programming in an easy-to-use format.

Learn HTML

Although a basic knowledge of coding can’t hurt anyone, most designers want to jump right into website design. That’s where HTML comes in. The markup language uses a set of tags noted inside angle brackets to describe what is on a web page.

Start with the free tutorials at w3schools.com or HTML Dog. Each site offers a series of short lessons for beginners from how to use basic HTML – setting up paragraphs and headers – to more complex functions, such as building tables or inserting images.

The lessons from w3schools.com are fairly interactive and simple to understand. Each module allows users try playing with bits of HTML and see the results on the screen. The lessons also add an extra element of teaching to the exercises, explaining why certain tags work the way they do and how tings correspond to old and new methods of building web pages.

The beginner’s lessons at w3schools.com are pretty basic, but can lay a great groundwork for someone making the move from print having never worked online. The advanced lessons can really help designers make a page look the way they want without having to rely on free templates or boxed design sheets. The lessons include information on how to set up the layout of a web page; go into detail about working with media, such as images, video and audio; and introduce users to HTML5.

HTML Dog’s lessons are much more of a guided tour. They serve as a direct guide that lets users practice on their own using Notepad and a web browser (which are standard on most computers). The lessons are pretty simple and direct but lack interactivity. The site though, does go into pretty good detail about all of the common usage terms that will pop up in HTML, such as “strong” and “em.”

HTML Dog does allow users to delve into more complex lessons as well, with an introduction to CSS and intermediate and advanced HTML courses that cover items such as Javascript and using forms.

More Advanced “Courses”

Now that you’re hooked on learning everything you can about the digital format, check out all the materials at Google Code University. The program, sponsored by web giant Google, has the look and feel of a college course guide.

Lessons and courses are free and don’t require any registration. There are a host of different things to try, including tutorials recorded talks and courses with exercises. Much of the coursework is pretty advanced, with lectures and materials from educators and students at Harvard, Duke and Carnegie Mellon universities.

The major advantage to Google Code University is the network of resources. Lessons are up-to-date and move with technology, such as “Building an Android Application 101.” Each course lists prerequisite knowledge needed for the course, necessary software or materials and learning objectives.

Practice New Skills

The best way to test what you have learned is to put the concepts in action.

Feeling good about some of your coding skills? Create simple game or program to showcase your work. Play with something you can continue to work with and keep refining new skills. Create a web page – and don’t use a template. Start simple, but over time try to add new elements. Look at things you like online and try to replicate them on your site.

If you are feeling extra-confident, ask your boss to collaborate with others on a digital project or look for a small one you can handle alone but with supervision and guidance if you run into trouble. Let people know you are trying to make the leap to digital design; it is likely your peers will assist you along the way.

Finally keep learning new things. Once you have mastered coding and HTML, think about design in other areas such as for mobile applications and tablets.

Conclusion

There are great resources out there to help you learn all the new skills you want in 2012 – and you don’t have to go back to school to do it. Set a few goals and start with online courses and tutorials to make the most of your learning experience.

Practice everything you learn; just running through tutorials is not enough to make the skills relevant. Seek out experiences and projects that will test your new-found knowledge. Remember that the basic concepts that determine good design don’t change from print to the web; the key to success in both areas is an updated toolkit.

This article will be more than a straight forward review of PSD2HTML. We’ll be considering the basic idea of these type of services and considering when, and for who, they are appropriate. Honesty will be foremost, and I hope that you will gain a real insight into using a PSD to XHTML tool.

PSD to XHTML Services

PSD2HTML are one of the first companies to provide this service (you can see their original press release), but there are a huge number of competitors in the area today and a Google search for “psd to html” brings back over half a million results. Here is a table summarizing the main players in the industry (a more in depth list can be found at Most Sliced):

We’ll be focusing on PSD2HTML, taking you through the process and showing you the final resulting design.

The Process

The ordering process at the site is very simple. There are several options available, starting with either a basic or professional package. We opted for the professional, as semantic, search engine friendly coding was a must have. Other optional additions are:

• Flexible width
• Stretching the header and footer
• Rollovers and dynamic menus
• sIFR flash replacement
• Commented CSS and XHTML code
• Load speed optimization
• Integration with CMS software (e.g. WordPress, MT, Drupal, Blogger, CubeCart)

After submitting the order, we were contacted at the start of the following working day with a request to clarify some of the features in the submitted PSD file. By the end of that day, some 7 hours later, the markup was provided through their online ticket system. The speed of the turn around was incredibly impressive – it would take even an experienced designer far longer than 6 hours to code a relatively complex site such as the one we submitted. If you need results quickly, this service would seem to be a great resource.

Speed isn’t the only factor, however. We’re going to show you, in full, the code created by PSD2HTML for the new layout.

The Results

This is the original 13 Styles design:

And this is a screenshot of the new version which we created in Photoshop:

You can see the full website through the following link. It is essentially the exact code which we received back from PSD2HTML, and will still require customization before being integrated into the real 13 Styles site.

View the design

Please feel free to take a look and judge the quality for yourself. We found it to be great – well laid out with the correct separation of content and presentation and semantic coding. We aren’t incredibly easy to impress, but this was certainly not a rushed, second rate effort. The process takes web design to a level of ‘mass production’, and high standards can be achieved through having a huge catalog of code examples and snippets to work from.

Do We Recommend Them?

The service was fast, efficient, inexpensive and of an outstanding quality. PSD2HTML would definitely be worth considering if you:

• Are short on time
• Are a skilled designer, but not a coder
• Require high quality, semantic and valid code
• Want to have a personal, well trained contact creating the design

It can be argued that design does not come from the ability to write code, but rather the ability to create an intuitive user experience which is simple to operate and gives the desired message. Using a service such as this ensures that you are free to focus on these aspects without being bogged down in small issues such as cross browser compatibility.

PSD2HTML impressed us in every area when coding the 13 Styles site, and we would not hesitate to recommend using their service. Be careful, though, that you don’t lose the passion for crafting your own HTML and CSS.

PSD2HTML by psd2html.com

Springloops is a unique source code management tool focused on web development teams. It allows you to code in parallel and share your code safely concentrated on results, not on lost changes or overwritten files. You get rapid collaboration in protected space.

In addition, using innovative deployment features, you can get rid of uploading files via ftp and overwriting others files on the server. It only takes one click to update several servers (both staging and production) in seconds. It can be a real problem solver – take a look at see if it’s for you.

Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:

Title tag

Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.

Headings

It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.

Tables and Forms

By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.

Images

It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.

Seems straight forward… but why?

Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.

Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!