Plan B for newspaper designers: web design

A magnifying glass on the newspaper industry would no doubt reveal a fundamental shift towards technology. The internet, combined with a variety of gadgets that even Spock would be jealous of, may present an opportunity to propel news publishing into it’s next form.

These days newspapers are scrambling to find a way to generate revenue through a channel that’s notorious for putting the ‘free’ in freedom of speech. Squeezing water from a stone might require a little more muscle than anticipated.

A couple of years ago I decided that it would be a good idea to start learning web design. Just in case.

I figured it was a win-win situation. With the new skills I could help my newspaper to develop its online endeavours, and if the industry ever does go all the way belly-up, I would have something else to fall back on.

I found that one of the most difficult parts about learning web design was not knowing where to start. The internet provides us with seemingly endless amounts of information and options, but from there you’re on your own. Deciding what to concentrate your efforts on can be tough.

If you think web design might be in your future, here are a couple of things you might want to think about when getting started.

HTML & CSS or Adobe Flash?

This is one of the first decisions that new web designers are faced with, and for some reason, I feel that it requires being explained in legend form:

Once,
in a galaxy far far away,
there was an interstellar war so devastating,
that it divided an entire universe.

Of course, by ‘interstellar war,’ I mean ‘a rift in popular opinion.’

And by ‘entire universe,’ I mean ‘the web design community.’

And you might have guessed by now that by ‘galaxy far far away,’ I just mean ‘earth.’

It just didn’t have the same punch.

Since 1996, Flash has been the preeminent tool for creating simple web animations. Somewhere down the road it became trendy to create entire websites using Flash. Search engine friendliness and speed was sacrificed in favour of simple animations designed to impress first time visitors.

Loading…

The trend seems to be slowly disappearing. Still, there are some that insist on making entire sites in Flash, convinced that the animations are still a great way of impressing visitors.

64%…

James Cameron’s Avatar is an amazing showcase of technology melded with computer animation and story telling. Flash, on the other hand, is not.

As the complexity of web sites evolved, so too did the need for flexibility and database integration that Flash simply could not deliver. For many large-scale, content driven web sites, HTML & CSS paired with PHP (used to incorporate databases) is the best way to go. They rank higher in search engines, load quickly, and are flexible enough to be gradually expanded and developed over time.

Ideally, Flash can be used as a component to emphasize or highlight areas of content on a page. And for that purpose, Flash is still a valuable tool.

However, learning HTML & CSS first will give you more practical skills for the newspaper world. Learn both, and then how to use them together, and you’re aces.

cms comparison chart

Content Management Systems

The ability to harness the power of a content management system is one of the biggest advantages to HTML & CSS based sites. They allow you to edit and manage content online, and they also store and archive everything in a database automatically.

Here are three content common content management systems worth exploring:

There are lots of different content management systems available, but these three are open source (free), with plenty of documentation and support online. I have worked with all of them, and would highly recommend starting with WordPress.

If you host your website with a company like Bluehost, all three can be installed with a few clicks through the host’s control panel.

front vs back

Front-end Vs. Back-end

When you open a new page on a site that operates through a database (like this one), it communicates with a server. The code of the website specifies what information to pull out of the database according to what you are looking for. So when you use a content management system, you are working with a framework that organizes all of your content on the back-end.

Learning how to write code completely from scratch wasn’t something that I was interested in doing right off the bat. I’m more of a visual person, and I was initially interested in playing with the graphic side of things (aka, the front-end).

Content management systems save the day again. Many of them allow you to work with templates that have a completely functional, existing structure. Once you pick a structure that you like, it’s up to you to use your design skills and HTML & CSS to create great looking website.

Oddly enough, I found that as I explored the inner workings of content management systems, HTML, CSS, PHP and Javascript became so familiar that it made reading and writing code much more intuitive.

programs and tools

Programs & Tools

There are a number of tools that you’ll need to familiarize yourself with to get started: markup editors, photo editing software, and ftp clients.

Most people in the newspaper industry are no stranger to Adobe software. And if you have access to a full version of the Creative Suite, you already have some of the best software out there.

Adobe’s markup editing software, Dreamweaver, will make HTML & CSS seem much more intuitive for new web designers. One of it’s best features is the ability to preview your code on the fly. There are numerous alternatives to Dreamweaver, and some of them are even available for free on the internet. Ultimately, it’s a matter of preference, and finding the right markup editor for you.

Most newspaper designers are fairly intimate with Photoshop. But if you dig a little deeper into it’s capabilities, you’ll find that it has some advanced features geared towards the web. Again, there are other alternatives, but working with Adobe products will make your life a lot easier. There are way more learning resources available online.

FTP clients, often used in there newspaper world to send final PDFs to the press, are crucial for web design. They allow you to access and upload the files that make up your website to your host. Ipswitch, Fetch, and Transmit are all pretty good. Core FTP is also a great freebie alternative.

web design style

Design & Style

One of the greatest resources available to web designers is the online community. As trends come and go, the input and discussions generated online help to progress web design forward.

If you get stuck on anything, rest assured, you aren’t the first. And nine times out of ten, a quick Google search will provide you with a detailed set of instructions to follow. Forums and design blogs/websites will usually have the answers you need. If not, posting your question on a high-traffic support forum will do the trick.

Web design blogs and gallery sites are a great way of keeping your finger on the pulse of the design community. It will help you to pick up on trends and cheesy fads, to avoid cliches and inspire you to try new things.

warnings

DANGER Will Robinson!

Whenever I learn something new, I have a tendency to miss a crucial step at the beginning of the process that comes back to bite me in the ass. Web design was no exception.

One of the most important gauges of the success of a website is the amount of traffic it sees. So, giving yourself every advantage possible to increase visitors would appear to be a no-brainer. But how?

There is an entire field of web development known as Search Engine Optimization (SEO) that focuses on just that. Search engines are an excellent way of driving traffic to your site, but getting your page to the top of the list requires continuous effort. Make sure that you know everything you can about SEO before you start developing a large website. You’ll make it a lot easier on yourself by applying SEO techniques throughout the development process rather than as an afterthought.

Most search engines, like Google, use a mathematical logarithm to determine how search results are displayed for certain keywords. This is often referred to as “Indexing.” It takes a number of variables into account when determining how your page ranks, such as how many sites link to yours, how relevant your site is to the keywords, and whether your page uses standard practices.

Not too long ago, web design was incredibly chaotic. There were very few standards, and every designer (and browser) had a different way of doing things. The World Wide Web Consortium (W3C) was started by Tim Berners-Lee (co-inventor of the internet) in 1994 to get everyone on the same page.

Conforming to W3C web standards will not only help your site to index better, it will also ensure that your design looks the same on all browsers. Cross-browser compatibility is undoubtedly one of the most frustrating parts of web design. Imagine developing a site for several months, only to find out that it looks absolutely terrible (or doesn’t work) if you view it in a different browser. Test on any browser you can get your hands on, or use a cross-browser compatibility tool like Browsershots.org.

As a further warning Microsoft’s web browser, Internet Explorer 6, was developed at a time when web standards were still going through their awkward teen years. Although Microsoft is now on their 9th version of Internet Explorer, number six just won’t die. Many large corporations still use IE6 as their default browser on work computers, so many web designers are forced to accommodate the antiquated browser. Consider yourself warned.

It all starts with a host

One of the first things that you’ll need to do to get started is choose a web host.

There are endless alternatives available for hosting, but in my experience, Bluehost has got to be one of the best bangs for your buck. It’s cheap, the service and support is great, and the control panel makes installing content management systems simple.

Matthew French

I'm a graphic designer at Sun Media's 24 Hours, a national daily commuter paper based out of Toronto.

Comments

Matthew C. French 6 May 2010

Just as an update to this post, the web design blog Smashing Magazine put together a great article discussing the functionality of WordPress and Joomla.

http://www.smashingmagazine.com/2010/05/03/joomla-and-wordpress-a-matter-of-mental-models/