Archive

Archive for the ‘Graphic Design’ Category

The Design and Development Benefits of CSS

August 14, 2009 3 comments

August 14th 2009 | Tom Lerchenfeld & Josh Frankel

Tables belong in living rooms, not HTML

Long term sustainability of code is the biggest challenge and central concern to building an application. It’s what the cyclical “O” in the Thycotic logo represents (and you thought we were into recycling), and it’s the ultimate goal of every application we build.

The first challenge encountered when building a Web site or application is to do with keeping the architecture lean while anticipating changes that may arise years down the line. Anyone who has worked with a mature Web application knows the horror of making a ‘minor’ change to something that is within a series of nested tables. Nested tables are like Russian dolls, with each table yielding a smaller table inside. This is cute in crafts, but debilitating in code.

Nice UI, let’s use it for the next 10 years

Tables present just one example of designing without future flexibility in mind. Inline styles can also make it nearly impossible to change or even tweak a UI.

Cascading Style Sheets (CSS) has been implemented in many Web sites and Web apps, but its true potential lies in a back-end architecture that anticipates change and involves minimal back-end development, yet affects the UI in a profound way. That was quite a mouthful, so let me use these two Web pages to illustrate my point:

Want to guess what they have in common? They are both using exactly the same HTML and content.

Seriously, go check it out www.csszengarden.com.

For a back-end developer this means that generic classes and specific ids allow the overall UI to be completely controlled through CSS and other front-end techniques.

Keeping team code the same
A common problem in many businesses is that everyone works on a separate aspect of a project and then brings it together and tries to make it look uniform. Inline styles, BRs, and HTML tags can make a page look the way you want it to, but when you want to change the look of your site, you’ll find these methods can be a real pain. The problem will be even greater for your designer. Each page will be a single design, too complex to change easily and cost-effectively.

Checking for uniformity
I recently came across a test that uses a simple file reader to check Web pages for uniformity. The reader grabs all the .aspx files from the source, identifies ‘bad’ tags, and recommends changes. This solution saves hours of trawling through code manually. If you’re daring, write the method so it changes the tags on its own, saving even more time. If you’re using unit tests, this test will fail every time, alerting a new programmer not to use the bad tag.

Coding for your designer
If you use Master Pages in ASP.NET, you already know the benefits. Other languages have similar templates you can use or make. But how far should you take them? Our designer has suggested splitting our Web site into three different types of pages. This way we won’t have to recreate the layout every time we add a new page.

* Login, logout, and and other similar unauthorized pages will have one template
* Configuration and site maintenance pages will have another
* Content pages for every user will be the third template, with specific ids making them unique

The benefit to this is that when your designer writes the CSS for these pages, he can change them all at once. Of course every page will be slightly different, but that’s where specific ids come in. With this method, when you change your site layout in the future, you don’t have to do it page-by-page.

Adding to your site
If you think this sounds like too much effort to apply, think about the time it takes you to create a brand new page. Each one will most likely have to be designed to match the look of your other pages…adding tables, spacings, BRs, inline style… the works. If you are set on your site and you don’t see much expansion in your future, you’re probably ok for now. But if your Web site is in an expansion stage, consider the time it takes you to create a new page, and how drastically a templated page would decrease the effort.

Maximizing usability
I can’t walk down the street without seeing someone looking at a Web page on a 4″ phone screen. Many people now have phones that can browse the internet to one extent or another. Some Web elements show up better on phones and PDAs than others. Lists, divs, and paragraph formatting all show up great. With CSS, your site will show up effectively on a variety of small wireless devices. But tables, Flash, and images that act as spacers don’t scale well, and show up as bits and pieces of an otherwise functional Web site.

As you can see, with CSS there are no losers. It’s not really a case of whether or not you should embrace the language—it’s simply a case of how soon you can do it.

Tom Lerchenfeld  is interning as a TDD / .NET Developer and Josh Frankel is a graphic designer. Both work for Thycotic Software an agile software services and product development company based in Washington DC. Secret Server is our flagship password management software product. You can follow Josh on Twitter

Review: Kelby Training, Down and Dirty Tricks D.C.

Josh Frankel: Review of Photoshop Down and Dirty Tricks

April 30th 2009 | Josh Frankel


To ensure Thycotic team members remain leaders in our areas of expertise we are encouraged to attend classes and seminars offered by experts in our various disciplines. To this end, I attended the “Photoshop Down & Dirty Tricks” seminar at the D.C. Convention Center.

The seminar teaches Photoshop techniques at all skill levels and appears to be one of the few large-scale designers’ conferences to come to D.C. Having already attended two Photoshop Worlds where training focused on issues specific to professional photographers, this seminar was much broader and the emphasis was on practical applications.

A Positive Commercial Shift

There was a shift towards Photoshop in a more commercial sense with references to popular trends in advertising and commercial typography. The main presenter, Scott Kelby, gave an awesome demonstration involving working with type in Photoshop – one of my favorite and most helpful classes. I was impressed with a lesson that dealt with working with limited source material – in this case one football player – and using various techniques to make an interesting and appealing poster. Having limited source material is rare for me, but I do enjoy the problem solving process that this sort of challenge presents.

On the Negative Side…

A minor negative aspect to the commercial focus of the class was that some of the looks and styles felt a bit played out. And one segment of the seminar covered the popular “shiny reflecting floor” which already has about a billion online tutorials, so I felt that time spent using this look in all of its variations was simply wasteful.

That being said, the value of training for me has always been to see which experiments and fortunate accidents are guiding other peoples’ work. These seminars serve as a constant reminder that as much of Photoshop as I learn, I’m really only using about 3% of its capabilities at most.

Find out more about the Kelby Training Seminars at www.kelbytraining.com/seminars/index.html.

And if you’re in the D.C. area and are in the field of design, there is an Adobe User Group that has meetup events, as well as a NetSquared meetup event that brings together individuals from various fields related to web presence.

Josh Frankel is the junior graphic designer and marketing team member at Thycotic Software Ltd, an agile software consulting and product development company based in Washington DC. Secret Server is our flagship enterprise password management product.
On Twitter? Follow Josh