Rev Software has completed design and implementation of the Screen Smart organizations new website. The site, which will be hosted by Rev Software, can be found at http://www.screensmart.ca and is a product of the hard work of all the Screen Smart organization members, including Andrew Sykes, Anne Cooper, Jane Morris, and Linda Chell, to name just a few of the volunteers who have contributed to the sites content.

The Screen Smart website will be dedicated to providing families the information they need in order to make informed decisions about screen time. This website is loaded with high quality, well cited information on all aspects of media awareness, and the effects of screens and the media on health, education, and internet safety.

As Rev Software’s lead web designer I created the site using structured W3C validated XHTML and CSS integrated with the PHP content management system, ModX. This design will ensure the Screen Smart organization members can update and maintain their website within the safe and user friendly ModX system, while enjoying fast, streamlined, XHTML & CSS code.

I highly reccommed you check this website out, and I guarantee you will learn something new.

If you are a freelance developer or designer of pretty much any flavour you have probably encountered this issue. You are working on a project at your day job and you come up with some wonderful design that you are really proud of.  After patting yourself on the back, you start to wish that you had come up with this design outside of work so you could add it to your portfolio and use it to advertise your amazing skills. This thought usually leads to a pondering of the ethics of listing a design on your site that despite being created by you, technically belongs to the company you work for.

There are several ways you could approach this but my suggestion on this one is simple, talk to your boss. Explain how you feel and indicate that you only wish to show on your site that you were indeed responsible for the design, but in no way wish to imply ownership. I would consider offering up some form of link from the work to the company and be clear that you will make no attempts to hide the fact that this work was produced by your employer.

This is just my opinion on this rather touchy subject, and I would love to hear how you feel about this issue.

When coding a new website, most of us begin by laying out the page and writing the CSS and generally working from what I consider to be the “outside” inwards. Once the layout is complete and we are happy with our design, we then begin to fill the various containers we created with the content. I recently came across an article by Aaron Gustafson on the topic of Understanding Progressive Enhancement. In this article Aaron brings up some good points about why designing this way might not be the best option.

What’s the Alternative?

Designing from the content out, and when you think about it this kinda makes some sense. People come to your website with one goal, to consume content. Whether your content is text, audio, or video it cannot be disputed that people are there for the content. With this in mind it seems only logical that content should be the foundation of your design, on which you will layer the decoration and interactivity. An easy way to visualize this is using a peanut M&M, where the content is represented by the peanut, the presentation is the chocolatte dip, and the client-side scripting is the hard candy shell.

Structure of a Website Using an M&M

Using this analogy an “inside out” approach to design would imply that we start with our content, the peanut, marked up with XHTML. Then coat this with some CSS, the chocolate. Finally, add on some hard candy goodness in the form of some Javascript interactivity.

The Peanut

The peanut represents content in it’s undecorated XHTML state. It is the cornerstone of your website and, in the case of search engine spiders and some mobile browsers, it might be the only part of your site that is accessible. Keeping this in mind it becomes apparent how important it is to have your markup describe to the highest detail the content that it contains.

Tasty in it’s own right, this little bit of spider/human food could be served up all by itself but it’s not all the snack it could be without a little help.

Chocolate Coating

If your browser supports it, CSS is the graphic chocolatty indulgence that turns plain content into dazzling web pages. Despite the apathy of search engine spiders to the “attractiveness” of a web page’s presentation, your human viewers are far more inclined to have a positive reaction to your website after it has been drizzled in chocolate.. erm.. CSS.

Hard Candy Shell

Finally we can wrap up our content and css in some Javascript to really provide a an interactive web experience. The Javascript, just like the candy shell, is not really necessary but it’s presence can really improve the user experience for those users having the browser setup that supports it. Your website should be able to function and appear “whole” even when the Javascript has been disabled, much as an M&M without the hard shell is still a delicious chocolate covered nut. Designing websites from the inside out aids greatly with achieving this, as it forces you to think about the content first and foremost.

Putting it Together

Putting it all together requires a relatively simple workflow, and the steps that follow are just one way of doing it.

1. Open up Textmate (or your favourite editor) and code up your index page using only your content and semantic XHTML. Be as descriptive as possible in your markup. Code as if there was no second step and this was it.
2. Save your file into your htdocs folder and fire up MAMP (Mac Apache MySQL PHP). Once Apache has finished starting go ahead and open up your page in your browser. At this point it should look mighty plain, but still readable and organized.
3. Open up CSSEdit and browse to the local html file we just wrote in TextMate. Get out your tongs and prepare to dip that plain webpage in some chocolate CSS goodness.  Once you are done with the chocolate you can head back over to TextMate and top it all off with some client-side scripting.

Original Content Credit to Aaron Gustafson

Rev Software has been working with the Revelstoke Community Social Development Committee on a new website for past month and with their final approval the site has officially gone live.

The new website features up to date information on social services being provided in and around Revelstoke. The website uses the ModX CMS to enable the committee members to create, edit, and delete website content, and even goes so far as to allow the creation of new website pages, adding all the linkage and maintaining the template throughout.

One of the goals at the outset of the project was provide a website that could be maintained by members of the committee who might have limited computer knowledge. The solution provided by Rev Software provides a standards compliant XHTML and CSS web template where content can be created and edited through the MODX WYSIWYG editor without the need to understand code and without risk of breaking the CSS layout or website look and feel.

Rev Software has been commissioned by the Revelstoke Screen Smart association to design their new website and build their online presence. Just to give you a little background on the Screen Smart organization; Screen Smart is a Revelstoke community based initiative that encourages families to better manage the ways in which TV, computers, and the internet influence their lives. They hope the website will prove a valuable resource for people looking for information about managing screen time for themselves and their families, and I am happy to be a part of this project.