New site: REA Software

simpledream web studio announces a recent project that has gone live.

It is my pleasure to announce a recent project that has gone live!

Together with Western Sky Communications, I worked on a redesign for
REA, a commercial Real Estate contact management software developer. Martha Retallick of Western Sky Communications designed the site, and simpledream took care of XHTML, CSS, and getting the code up to speed with current web standards.

Was: gorea.com (site is not available as of April 1, 2014)

Meaningful Updates for Blog Posts

Lance discusses how to update your blog post in a meaningful way based on suggestions by Tantek Çelik at WE05.

Have you ever posted a blog entry, read it back to yourself, and found that you made some errors? Happens every day to most people!

I was listening to Tantek Çelik’s talk at WE05 entitled Meaningful XHTML and he talked about a meaningful way to update your blog posts.

The basic ideas is this: instead of updating a post by going in, editing, and then saving, Tantek recommends using semantic markup to show what has been updated.

The roots of this idea are in the trust and accountability of blogs and bloggers: once it’s posted, it stays. It goes along with the idea of permalinks, which are truly intended to be “permanent links”. If you use them what you are really saying is: this is up here and I am going to take responsibility for it.

Mistakes and errors occur often, of course. How to show that you aren’t changing the original post except to update it’s content? When you update the blog post, simply wrap the old content in <del></del> and wrap the new content in <ins></ins>.

Then apply some CSS (for example):


p ins,p del { display:inline }
ins {
  background-color: #ffc;
  font-weight: bold;
  text-decoration: none;
}
del {
  text-decoration:line-through;
  color: #999;
}

If you did this on my site, this is what an updated post would look like:

AJ took a great picture of a Monarch Queen butterfly in Arizona this week.

The blog post doesn’t change, it just gets updated with new information. I love that Tantek brought this up in his podcast because I haven’t been good myself at putting this into practice.

It’s a great idea because it not only reinforces using semantic markup but also helps promote honest and responsible blogging practices.

If you are interested in hearing his whole talk, go to the WE05 podcast page and download the audio file there. Then link to the slides (see above), listen, learn, and enjoy!

TopStyle, the Ultimate CSS and HTML Editor

Lance extolls the virtues of his favorite CSS and HTML editor: TopStyle.

Do you work with CSS and (X)HTML all day long? If you do, then you need to use TopStyle for your coding. Written and maintained by Nick Bradbury of HomeSite and FeedDemon fame, TopStyle is the best CSS editor out there. It isn’t bad for HTML, PHP, JavaScript, and other languages, too.

Even if you don’t code CSS and (X)HTML all day, it’s worth having TopStyle around for the occasional blog post or web site update. It integrates nicely with HTML Tidy for clean code, and has lots of the built in features that users of HomeSite and later versions of Dreamweaver are already used to. In fact, Dreamweaver ships with a lightweight copy of TopStyle for CSS coding.

For those of you that already use Dreamweaver for your web coding needs, check out this great article: Working with TopStyle – Part 1 (on CommunityMX). It explains how Dreamweaver and TopStyle can be used together for top-notch web design and development. A lot of features that people ask for in TopStyle exist already in Dreamweaver; it’s a great combination in my opinion.

If you already have a copy of TopStyle, improve your skills by following Nick and company’s TopStyle Tips from Pro Users blog. I just learned recently about extending TopStyle to validate PHP with a TopStyle extension called “Lint“.

I have used TopStyle for over 2 years and can’t be happier with it’s ease of use and efficient features, especially for CSS. Check it out if you haven’t already!

WE05 PodCasts

If you can’t be there, make sure to download the full list of podcasts from Web Essentials 2005 in Sydney. I just downloaded 12 podcasts, and am looking forward to listening and learning. One in particular: Molly’s first keynote!

Link to WE05 podcast page: WE05 PodCasts ».

Via: Veerle.

HTML Emails and CSS

Much like Roger Johansson, I don’t like getting HTML emails. They don’t show well in Gmail, which I use exclusively, and often are buggy and spam-related.

Recently, though, a simpledream client asked me to design an HTML email for their monthly newsletters. At first it seemed to be an easy task , but the further the project went the more complicated it became. “HTML emails shouldn’t be this tough”, I was heard muttering as I tried my first efforts. As I found out, they are not difficult but do require some careful coding and attention to detail. Testing is also essential to make sure that the major email software programs are treating the HTML design well.

First of all, there are lots of different email programs (Hotmail, Outlook, AOL, etc) and they all render HTML emails differently. Some respect your HTML code, others like to strip off certain important tags. To add complexity to the problem, I was bent on using Cascading Style Sheets for the presentation even though I knew from experience that a table would have to be used as the layout container. Email software support for CSS is even more spotty than its support for HTML rendering. I also wanted the design to match the online version that was already formatted with CSS.

After some initial frustration, I went to Google to find out how other designers were dealing with the problem. I didn’t find very many articles, to be honest. One great article was on A List Apart: CSS and Email, Kissing in a Tree by Mark Wyner. This is a good start if you are thinking of designing HTML emails with CSS. Mark explained a lot of CSS issues, which was nice. He also wrote another article recently that is worth reading: Optimizing CSS presentation in HTML emails. Another good resource was on Site Point: How To Code HTML Email Newsletters. It offered practical advice on improving HTML email delivery and also had some sample code that was very useful.

All in all, HTML emails are worth doing well if you are asked to. By using the tips and tricks in the above articles I was able to get a reasonably good-looking HTML email template built. I am assuming that most folks wouldn’t use HTML emails voluntarily, though. What do you think? Also, if you have any tips regarding HTML emails with CSS, leave them in the comments. Thanks!

More Lessons from SXSW

Two design-oriented panels at SXSW 2005 really made an impact on this web design studio.

If you have read more than 1 or 2 posts on simpledream.net than you will know that SXSWi 2005 was a big hit for this web design studio…

The biggest lessons learned in Austin are just now starting to hit home as new projects roll in. Since the experience of good and bad design is essential to this business, I wanted to share some brief design lessons that I learned on web design from SXSW panels this year.

Panel: Does design matter?

Important question #1 posed in the panel: why do sites with ugly/bad design enjoy great success?

This is a great question! Many times I've assumed that spectacular, cutting-edge design would automatically boost a site's success and therefore the business behind it. Not so fast, Mister!

The key answer that was aired in the panel was that the target audience is the key to a good use of design. The design should match that particular group or person that is being targeted by the site or print material. The example used in the panel was that of a bland consumer design on a cereal box – it works perfectly for what it is intended for! So even a very simple and seemingly boring design can be very successful if used in the right way.

Important question #2 posed in the panel: What can we do for current sites with bad/ugly design?

Answers include:

  • Turn bad design into a comfortable experience for the customer by keeping a tight and simple approach to design
  • Redesign with new typefaces and make the overall design appropriate for the audience
  • Try to change bad design into a more successful one

My take on these answers is usually something like: “a better looking and working web site equals better success for the business.” Just like with the cereal box idea, though, the design has to be appropriate for the goals and audience of the site.

Panel: How to inform design?

Surprisingly, this was a great session on how to improve your site by learning from usability, statistics, and other web-based metrics.

Good ideas I gleaned from this panel include:

  • Research much and early, as the cost of change goes up as the project progresses
  • Match user needs and business needs : "use your own site"

This is a very superficial touch on the material covered in this great panel. But these two really made be think about how I approach the analysis and brainstorming stage of a project. The goal is: “work very hard at this part of the project and it will pay off later!.” Secondly, the “use your own site” idea is also great and makes sense. The key here for me is to remember that I am not a typical web site visitor; I have to not make the assumptions that the true site visitors will know what to do and when to do it. I know these things by default because I designed it that way!

Both panels opened my eyes to techniques and ideas I hadn't considered before, and also helped reinforce practices simpledream was already doing on most projects. If you were at either of these panels, let me know if I missed anything important!

Design for the Rest of Us

Tips from design greats Doug Bowman and Dave Shea.

Two things that I get asked a lot are: “What makes good design?” and “How do I learn good design?”

I spend a lot of my own time thinking about these questions, both personally and professionally. While going through some notes from this year’s SXSW festival (Austin, TX last March) I realized that I had a few good answers tucked away from the “Hi-Fi Design with CSS” panel. If you want to see the full slide shows from the panel (and ignore the rest of my post!) go to:

» Doug Bowman’s presentation
» Dave Shea’s presentation
» Dan Cederholm’s presentation

From Dave Shea’s panel session, I learned about important design concepts to master if you want to learn and practice good design:

Color theory

  • Typography
  • Form and shape
  • Spacing
  • Texture
  • Dimension

But, how to grasp these concepts? Some very good practical tips from Dave Shea:

  • Know your tools
  • Find imagery sources
  • Practice
  • Study inspiring design
  • Keep your eyes open
  • Study typography

From Doug Bowman, more great advice: Spend time looking for beautiful examples of design in nature.

I hope that I can improve my existing design skills and learn more as the year goes on. As far as inspiration, look no farther than the Garden.