Taking Print content to the Web

Yes, it’s been months since I’ve posted here. And haven’t been that active in my Live Journal or Facebook pages either. The Studio’s been busy, folks. And have been shoving a number of projects through the house.  And when you’re a self employed Creative Pro, paid bookable hours trumps blogging. I had been tempted to rant on about the evolving throwdown between Adobe vs Apple vs Google (sort of) vs Mircosoft, centering around the mobile market, web standards, web video, HTML5 and Flash. But the simmering war of words, with flaming fanboy camps tossing off on each side has grumped me out, and it can wait.

So I decided to talk about some of the under the hood tech that makes contemporary web sites work, with a bit of diversion about bringing print content online.  I’m going to pitch this to the web user and business reader, so my fellow web pros will probably be bored to tears. But for the rest of you, we’ll demonstrate the main idea of the marriage of HTML and CSS by taking a look “backstage” with a print and web design project called, Living in The Petri Dish.

The past few years, over the winter I have been designing and Art Directing an annual calendar for an Interfaith Sanctuary, and in the 2010 Edition of the Wheel of the Year Calendar, I wrote a short Editorial Article for their Earth Living/ Earth Spirit section, focusing on global environmental, sustainability and climate issues. I wrote Living in the Petri Dish under my “spiritual” name, referring my Native American (among others!) Ancestry.

The Print Version from the Institutional Calendar

PDF

In times gone by, the most direct way to get print content online was to post a PDF version of the document. This is quite straightforward in layout tools such as Adobe InDesign, with a powerful export PDF function. But many applications, including Microsoft Office now have similar capability. In Mac OS 10, any document that can be printed, can be output to a PDF file. And here is the PDF version of the article. which is the print version of the Calendar Page. Depending on your browser settings and capabilities, the file will open in a new window, or download to your local drive. While PDF files preserve the formatting and structure of the original print document, and does not require the recipient to have the creating application, graphics or fonts, it does have some limitations for the web.

Web Coding, Old and Modern.

The “Old School” method of laying out a web page involved rather intricate coding, and creating tables to arrange elements on the page, like a mosaic, which were not their intended purpose. In more contemporary coding, the HTML page contains the content, and it’s information structure. And the display and presentation information is contained in a separate CSS style sheet. CSS refers to Cascading Style Sheets, which is a powerful method for marking up how a page is displayed. The main advantage is that you can have a separate style sheet for every page in a site, or just one for ALL the pages in a site. Or individual style sheets for unique elements, such as the home page, and a general one for the site’s content. The HUGE advantage is that if you need to alter an aspect of the site’s visual design, I make the change in the style sheet, and the change will appear in the entire site, or every page that accesses that style sheet. This is a much more efficient approach than painstakingly re-coding every instance of the design element in every page individually!

I recently had occasion to demonstrate the capabilities of CSS for a user group, in this particular  case, I took the SAME page, and used three different Style Sheets to radically alter the layout and appearance of the page. So let’s build a web page version using XHTML and CSS. As the author, I have the original text of the article, and was able to quickly code it into a basic web page, and collect some relevant links.

Coding HTML and CSS

The text is organized into paragraphs and headers. And I divided the page into logical sections using “Div” tags. Otherwise there is no layout markup.

Original images for the "Petri Dish" article.

I also had the original images used for the article, so I sized them for the web at 72dpi, and we’re good to go.

Take a look at the “pure content” version of the page, without any CSS Styling.

it’s all there, but it’s sooooooo  1998, and kind of boring.  So lets build a CSS Style sheet and connect it to my HTML document.

This is where the magic happens...

The highlighted code is where the HTML page refers to the CSS style sheet file that tells the browser how to display the page.

The CSS that will style the Petri Dish article page.

A portion of the CSS file.  As you can see, I have started to define the look of the page. The overall typeface and size, background colors and the styling the headers. You can look at the full coding here, if you’re geeky and curious.

And the completed page now looks like this. Living in the Petri Dish.

As you can see, it’s much cleaner and feels more like a contemporary web page.

“Presto-Changeo”

But I am well aware that clients might want something different. So why not? I created another CSS document, and went back and changed just one line of the HTML to implement it.

<link href=”styles2.css” rel=”stylesheet” type=”text/css” />

I added some alternate graphics and the page takes on a radically different appearance.

Some clients might want a little more IMPACT… happy to make it “Pop”.

<link href=”styles3.css”…

I call this version “Hot Head Red”. It’s probably not the most tasteful design, but it was meant to show variation for the demo. Also for the sake of the demo, I added the navigation bar across the top to easily swap across the versions. Note that I’ve set the nav bar to pick up the link styling in the three versions.

Remember, no other code was changed in the HTML page other than the single line referring to the style sheet. Now there are a few caveats, older versions of some browsers have uneven support for CSS, most notably Internet Explorer Version 6 which handles CSS in a non-standard manner. But modern browsers support CSS very well. IN the near future, we’ll be seeing the deployment and support in browsers of HTML 5 and CSS3 which will bring additional enhanced capabilities and features.

Links

Living in the Petri Dish variations:
No Styles
BlueWhite Clean
GreenWorld
HotHeadRed
PDF of Print Version

Four Quarters Interfaith Sanctuary
Earth Living~Earth Spirit Complete Supplement (PDF)
Union of Concened Scientists
Rolling Stone: As the world Burns
Rolling Stone: The Climate Killlers
UCS: “It’s Cold and My Car is Buried in Snow. How Can Global Warming be Happening?”

Now this blog is powered by WordPress, WP hacks can tell from the very lightly modified default Kubrick page design. But one of the things I love about WP is that there is not only an abundant supply of themes, but also a HUGE zoo of plug-in to perform all manner of digital legerdemain. Since I have been manually posting notifications on FB about my Blog Posts here, I figured, with the rising popularity of Facebook, there was probably an app or plug-in that would allow Me to post notices to the page automatically. So after a bit of research, I’ve installed the  WordBook Plug-in on the blog. This was literally it’s test flight.

Alas was not to be. WoodBook does not work on Fan or Business FB Pages. See below for comments on keeping my personal and Pro/Biz bloggage separate. So I am trying another application, a bit more involved, but we’ll see if it works. It may have the virtue of earning the blog a little more exposure.

I am also looking at adding “Share on Facebook” functionality. Yes, there’s plug-in for that too. Which is probably the next thing I’ll be testing. If a “Share on Facebook” link turns up on my posts, I got it working. Of course there are equivalent tools for Twitter, but I am seriously dragging my feet about getting into that. I do have to spend some of my time actually working on client’s projects. Imagine that, so demanding. But the ability to buy groceries is a compelling argument for discipline.

The emergence of Social Media as an important Web trend for both individuals and businesses, due to it’s particular reach and ability to connect individuals TO businesses and organizations, means that Creative pros like myself have to pay increasing attention to an ever widening array of venues, and techniques for leveraging them. What makes this interesting is becoming a net.schizo. I have this blog for the Studio, where I can wax-on, wax-off on themes relating to my profession and related tech subjects. I have a personal Live journal since about 2003 or so… If you know it, you know who you are. My personal rantage. I’m on Facebook as me, but then have a Page for FRS. The twitter account… like 4 tweets (Ha!) is me, and I should make a separate one for the Studio… Keeping my personal and professional lives separate is an interesting exercise in information management. Not withstanding that as a self-employed creative pro, with a studio in my home, my professional life is pretty darn personal! But the overall approach is that I’ll refer to my professional live from my personal side, but I’ll be keeping the personal from the professional side.

That didn’t stop a client from trying to call Me at 7PM on a Friday, looking for a project and a quote. Not that I don’t work evenings and weekends, like many creatives and self-employed, that’s a choice, not an expectation. But seriously, WTF?

He can wait… till Monday.

Fantastic Realities Studio on Facebook
WordBook Plug-in
NetworkedBlogs

HTML code in Text Wrangler. Want a piece of this action?

Hello everyone who may or not be paying attention.

I know it’s been a while but I was a bit distracted by some very consuming system issues with my workstation. But that cautionary tale is a subject for another post. Seriously. Cautionary. Tale. But not now.

One of the requests that I often get from clients is that they want to know how to do simple revisions and update their web site content for themselves. Of course they are concerned in this difficult economy about paying my fair, but non-trivial designer’s rate for what might be a trivial update or minor correction. I do have a minimum quarter hour charge. Which is seriously, just about how long it takes to read the email, take the call, jot a note or two, fire up Dreamweaver or a text editor, an FTP client, log into the hosting provider’s Control Panel, upload the fix, revision or update and then log it on the timesheet. So I do see their point. Or you might just want more control of your own content.

Let me diverge for a moment, and mention that there are do-it-yourself options out there if your needs and design requirements are relatively straightforward. Many of the Hosting providers out there have relatively simple, template based, drop-in-your-content web site plans, such as GoDaddy’s “Web Site Tonight” feature. There are also services like Microsoft’s FrontPage, Apple’s iWeb, and Yahoo’s Small Business Web Sites… etc. But these ARE template based sites and they can be perfectly adequate, but they’ll look like a LOT of other sites out there without a lot of distinction.

Another approach is to construct a web presence around a blog, either through your hosting provider and your own domain, or use one of the well rounded services such as WordPress, Blogger, Typepad, Live Journal and the like.

But if you’re working with someone like me, you’re probably wanting something more custom designed and distinctive in the first place; really marrying your branding and message to the site design. You might want to have more complex functionality or technology on your site. Perfectly fair, and how I make a respectable chunk of my livelihood. But you might not want to bug me about changing one paragraph in your Mission Statement, or correcting a misspelling in your bio. Or you’d like to toss up a news item, and I am off in a tent in the woods that week, or buried with other client’s projects at that moment. Hey, it could happen.

Anyway, there are three general approaches to getting into the guts of your site.

Learn Web Coding

The first is the cheapest, since it can be done with any text editor and an FTP client. That would be litreally learning enough HTML and web tech to actually edit the underlying code of your web pages and upload the changed pages back to the hosting server. As you can imagine, this does imply the heaviest learning curve. And of course, depending on just how intricate the site’s design is, getting into the designer’s code could be problematical. If you’re not careful and meticulous, its real easy to break stuff. And then you’ll be calling your Webmaster or Designer and tossing a bit more than a quarter hour for cleanups. Of course with more modern coding techniques, particularly CSS, and XML, sites can be much more modular and the site’s content and its design can be separated. This makes updates and revisions much less tedious.

Use Web Access Software

Another approach is to use an end-client piece of software that allows users to access the site from their own computers, and make their edits in a more understandable format. One example is Adobe Contribute. This application allows access to a web site, but also lets the Designer/Webmaster restrict access to parts of the site that ought to not be messed with. The application even allows users to generate new pages and links, upload images and documents, while maintaining the site design and structure. Different users can be assigned different roles and levels of access. The interface is similar to Microsoft Word, so it’s a familiar way to work and training is much simpler.

This approach is a bit more costly, as you have to buy specialty software, and it requires the Site Designer to set up the site for access. There is also some training time involved, but not as much as learning full blown web coding. A mid-line solution for moderately complex sites, and reasonably tech-comfortable users.

Use a Content Management System

For more sophisticated sites, or for dead simple access, or both, is the use of a Content Management System. Using a CMS, the end user typically has a web based interface to add or modify content on their site. The software keeps the design elements and the content separated, and the user content is stored in a database on the server. This is the most costly up-front approach, as the site has to be configured from the ground up to use the technology, and set-up is more involved than a basic HTML, XHTML and CSS, site.  All the back end software is stored on the hosting server, and all the user needs is a web browser and the access credentials. This can be a very attractive solution where there is a lot of time sensitive or dynamic content, and the site gets frequent updates.

More and more, business sites are using CMS technology and more hosting providers are offering open source Web Application Software to Web Developers and Webmasters as part of their hosting packages. It does take more than a bit of specialty skill to set up, but once in place, can be very effective and easy to maintain. The initial cost may be a bit more than a basic HTML or CSS based site, but maintenance and updates can be cheaper over time. If you have a shopping cart or an e-commerce site, this is a form of Content Management, with software running on the web server tracking buyers, products, transactions.

However, none of the above typically allow the end user to significantly revise or alter the site design or graphic style. That type of work would require the re-involvement of the Web Designer and Developers. Of course, if you had that skill set, you would BE the web Designer or Developer, and you would already know this.

Still the whole point of hiring graphic or technical professionals is to free up your time to focus on your own particular vocation or specialty, and let us do our thing for you.

Next time, losing the works.  I hope I don’t keep you waiting so long for that one, its frakkin’ crazed…

Stufz (Resources):

GoDaddy Web Site Tonight:
http://www.godaddy.com/hosting/website-builder.aspx

Microsoft FrontPage:

http://office.microsoft.com/en-us/frontpage/default.aspx

Apple iWeb: http://www.apple.com/ilife/iweb/

Yahoo Small Business Web Sites:
http://smallbusiness.yahoo.com/webhosting/

WordPress: http://wordpress.com/

Blogger/Blogspot : https://www.blogger.com/start

TypePad: http://www.typepad.com/

Live Journal: http://www.livejournal.com/

Adobe Contribute: http://www.adobe.com/products/contribute/

Wikipedia: Web Content Management System:
http://en.wikipedia.org/wiki/Web_content_management_system

Open Source Applications at Godaddy:

http://hostingconnection.godaddy.com/AllApplications.aspx

(Crikey! I’m not even sure what all this stuff does… )