Doug Avery, ON THE TOPIC OF CSS

While working to make these blogs as flexible as we could for fancy stuff like images, blockquotes, and etc, we ran up across an issue (especially on Viget Extend): long lines of code don't play so nice with our relatively narrow columns. Turns out the pre tag (of course) preserves all spacing and linebreaks, and by nature has difficulty wrapping nicely.

All is well, however, since I stumbled across this little hack:

pre {
   white-space: pre-wrap; /* css-3 */
   white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
   white-space: -pre-wrap; /* Opera 4-6 */
   white-space: -o-pre-wrap; /* Opera 7 */
   word-wrap: break-word; /* Internet Explorer 5.5+ */
}

It's a little clunky (maybe more than a little), but it gets the code inside pre tags breaking nicely.

Leave a comment ( 2 )

Rob Soule, ON THE TOPIC OF Opinions/Reviews

For me, one of the most anticipated panels this year as SXSWi was EllisLabs’ ExpressionEngine (EE) 2.0 preview. After having our team’s flight delayed due to weather, we finally managed to make the last of three panels where EllisLabs revealed what they have been working on so diligently for months now. In my opinion, they didn’t disappoint.

I’ve been an EE user for more than a year now and have quickly grown to love it. The flexibility it offers is far superior to most every other CMS (Content Management System) on the market. But as in every great product, it’s not without quirks. What is encouraging to me is that it seems EllisLabs has really made an attempt to tackle most of these issues head-on, having taken the user’s feedback into account for their next release.

Here’s a list of some notable things mentioned:

2.0 will now run off of CodeIgniter, their open source PHP framework
While I don’t fully comprehend the intricacies of this announcement, I can understand its benefits. CodeIgniter will now be an open-source project giving PHP gurus the chance to submit patches and make updates. This, much like most open sources projects, creates a more stable and community-driven/backed project. EllisLabs’ Derek Allard also mentioned features such as abstract querying, better session support, html, and form generation.

2.0 will now have jQuery built in. (my personal favorite, w00t!)
When this new feature was announced, I actually cheered. (I’m such a dork). I was encouraged because I’m a huge jQuery advocate, so the possibilities here are endless. Much like the way Rails seamlessly works with Prototype and Scriptaculous, we’ll now be able to create complex jQuery actions, both visual (DHTML effects) and functional (Ajax), with a few simple lines of code. jQuery will also be fully supported inside the control panel, enabling geeks like to me to customize their experiences by writing plugins. I also assume that they’ve cleaned up a lot of the extraneous JavaScript that currently clogs processor power, slowing your CP loading times. Once 2.0 is released, I’m certain it will only be a matter of time before we see some extremely innovative plugins and extensions leveraging the power of jQuery.

2.0 will include a brand new control panel (CP) interface and layout
The majority of the preview time was dedicated to showing users around the new control panel. This included some very dramatic and much needed changes. It’s apparent in the redesign that EllisLabs is very concerned with streamlining some of its time consuming actions. This includes things like sorting, searching, and custom field creation. Actions that now use ajax, meaning no long page loads? Sweet!

My only criticism is about the design and layout of the control panel. (The official screen shots have generated some heated conversations). I think the design should be more neutral and utilitarian than its new playful self. I was a bit surprised that EllisLabs hadn’t given the CP redesign to Jesse of 31Three, who designed the current EE site. His talent in wireframing and architecting complex data is evident. I would think hiring him for this redesign would be a natural extension of the great work he has already done for EllisLabs.

With that said, Rick Ellis, the CEO, had a great response to some of the criticism the design has received. This is _just_ a preview after all and I’m sure we’ll see numerous custom themes before long. Maybe even one from Jesse?

All-in-all, I’m stoked for the 2.0 release. EllisLabs has addressed flaws in EE and is moving forward. I can’t wait to see what else they’ve got in the pipeline.

Leave a comment ( 10 )

Peyton Crump, ON THE TOPIC OF Favorites and Tips and Tricks

Viget works with a wide variety of clients with varying depths of web knowledge. Some simply have a business plan based on a strong idea, while others have designed, built, or maintained sites themselves. Regardless of this level of understanding, there’s one thing we all “opinionate” and iterate on — the look of the site. Aesthetic is typically unique in that all of the stakeholders in the project can and want to have input. After all, if we can see, we tend to have preferences for colors, layout, photo selection, font styles, etc. So the visual design of sites is typically an iterative dance between the subjective opinions of those involved, the established goals of the site, and the more objective “rules” of good web design.

Hopefully, the client is involved in or aware of all of the planning (sitemapping, wireframing, defining of audiences and actions) before the look is ever approached. Occasionally, even when they are involved in the planning, clients lean toward an unproductive and over-iterative focus on aesthetic. Many times, this is simply because we as designers allow the client to see visual decisions as a separate “phase” of the project, and they unconsciously become detached from the rest of the site goals for a short time.

So, a simple suggestion to keep a healthy, balanced perspective toward aesthetic — at the beginning of any visual evaluation (competitor site reviews, mood boards, comps), simply take two minutes to clarify with the client that visual design is much more than preferences/decisions on color, photos, and layout. Remind her that visual direction must always be evaluated in the light of:

Users/Actions

How will intended users perceive this design? Are the actions they’re meant to take apparent?

Aesthetic

How does it look? What feeling does it evoke? Are colors/fonts used appropriately? How is the brand being used/reflected?

Content/Data

What information are we offering through this design? What are we collecting? Are the content areas being given proper design attention and priority?

Functionality

Is the content/data/technology that we have available being leveraged to create appropriate and interesting features?

Usability

How easy or hard is it to use the page/site? Is the content visually prioritized, is it easy to find, and is the user effortlessly able to take intended actions? Is usability suffering because of other poor decisions?

These simple ground rules for evaluating the look of a site tend to get everyone more healthily engaged in making design decisions. Decrease subjectivity and iterations, increase objectivity and communication, and maintain focus on the larger site goals.

Leave a comment ( 5 )

Samantha Warren, ON THE TOPIC OF General and Opinions/Reviews and Tips and Tricks and Trends

When I asked Doug, the Viget Designer behind the typography on the Inspire Blog ,why he used Avenir he replied “because it is the greatest font ever”. Doug is not the only one to have such an opinion of the geometric sans-serif typeface, in 2004 Avenir was named one of Typographica’s favorite fonts. When Andy Budd asked Cameron Moll what fonts would he choose if he could only have 6 his first reaction was “ Avenir, Avenir, Avenir. I’ve abused this typeface in both web and print work, and it’s held up to the abuse with flying colors.”.

In French “avenir” means “future”.  This hidden definition makes it a perfect choice for the Viget Inspire Blog because web designers are innovators who are always looking to push the boundaries and limitations of their medium.

Adrien Frutiger designed Avenir in 1988 and is best known for his typefaces Univers and Frutiger. Frutiger explained his reasoning for designing the San-Serif in an interview with Linotype:

“Looking back on more than 40 years of concern with sans serif typefaces, I felt an obligation to design a linear style of sans serif, in the tradition of Erbar™, Futura®, and to a lesser extent Gill Sans®. These have purely constructed characters from which the element of a handwriting movement has been removed. Obviously this could not be an outstanding new creation, but I have tried to make use of the experience and stylistic developments of the 20th century in order to work out an independent alphabet meeting modern typographical needs.”

Avenir has become very popular in web, print, identity, and environmental graphic design. As part of their national identity the Netherlands uses Avenir on their site amsterdam.nl as well as in signage and brochures about their country. You can find Avenir playing a key part in the branding systems of the Reuters and Dulles Fort Worth Airport. On the web a customized version of the font is used in the logo for Shutterfly and the book and medium weights on purevolume.com.

Frutiger describes his typeface as “modern and at the same time humane” but I find Avenir to be an inspiration.

Leave a comment ( 7 )

Erik Olson, ON THE TOPIC OF Events

As a designer and presenter at this year’s DC Design Talks, I couldn’t have been happier with the way it went. It was full of great speakers, great people to meet, and it was on my home turf not just at our office but in the DC area itself.

Based on the overwhelming popularity of the one-day conference (90 seats sold in a few weeks), it is obvious that talks like this one are important to the community.

The day started with Viget’s own Samantha Warren speaking about web typography.The topic came easily to her; as a self-proclaimed “font-geek,” she at one point actually confessed “I could talk about fonts all day.” She urged us all to think about which fonts to use and why to use them beyond stereotypical, “because they look cool” reasoning.

Later in the day Robert Goodlatte gave an inspiring talk called “Justifying Design.” He emphasized the notion of using the grid for making layouts more effective and distinguishing designers from decorators; decorators are the ones who make the site look “pretty” while the designers make the site as a whole more usable.

As a first-time speaker at one of these things, I was happy with the reception I received. My thanks to organizers Jackson Wilkinson and Jason Garber for successfully creating an open and receptive vibe for everyone involved.

Leave a comment ( 1 )

Samantha Warren, ON THE TOPIC OF Events

This past Friday, Viget Labs hosted DC Design Talks, the first of a conference series called DC Talks that promote collaboration and creativity in the web community. Jason Garber and Viget’s own M. Jackson Wilkinson did a fabulous job of organizing the event, which was smaller than Future of Web Design, more organized than Barcamp DC, and as inspirational as many of the panels at SXSW.

With an entire day of first-rate speakers, the amount of information I absorbed was overwhelming. “Coming to Terms with Sociality,” the talk given by Thomas Vander Wal of InfoCloud Solutions, was fascinating.  He referred to “online interactivity” as being the engagement amongst participants in an online community, rather than the interaction a user has with the site. “Finding Design Inspiration” by Alex Giron of n’clud reaffirmed my belief that investment in creativity and inspiration will pay off in the quality of design work produced.

In “Speaking in Styles: The Importance of CSS for Web Designers,” Jason Cranford Teague (of AOL) articulated the importance of CSS through a humorous demonstration that both dispelled its myths and illustrated its advantages. He compared a web designer who knows CSS to a print designer who knows press specifications and explained that a designer needs to:

• understand the limitations of her medium.


• take ownership of her design.


• create accurate specifications.


• be able to talk to developers.


• triage problems.

Viget’s own Erik Olson spoke on “Sane User Experience in Flash,” during which he said, “just because you can make it move, doesn’t mean you should make it move.” Many people don’t realize that anything that movement in peripheral vision dominates awareness. Too much animation on a page can distract the user from making the decisions necessary for her to find a site useful.

Overall, DC Design Talks was a marvelous community event that brought together very talented designers. It’s fantastic to play host, and I look forward to attending (or maybe just peeking into) all of the DC Talks in the future.

Leave a comment ( 2 )

Clinton R. Nixon, ON THE TOPIC OF Events

As a web professional, it is very exciting for me to see the continued growth and vibrancy of Refresh the Triangle. The February meeting happened last Thursday (February 28th) and we had more than 40 people show up, packing first-time sponsor iContact‘s meeting room.

After the traditional meet-and-greet, Rob Goodlatte gave an excellent talk entitled ”Justifying Design,” which was challenging to the designers in the audience while being accessible to the developers and others in the audience. The principles he shared were good guideposts for designing within the rapidly-changing aesthetics and building blocks of the web.

iContact was gracious to let us have a longer social hour after the meeting in their office. The Refresh after-talk is quickly becoming one of my favorite conversational and networking opportunities in the Triangle. If you haven’t been yet, I definitely encourage you to join the mailing list and come to the next meeting.

Leave a comment ( 1 )