Domain7

5 Awesome Things About www.regent-college.edu

We are so pleased to launch a brand new, industry-defining site for Regent College. The site truly raises the bar for higher education on the web. The Regent team are fantastic clients—we can’t say enough about how forward-thinking, open and collaborative they were through this process.

Nearly 15 months in the making, the site was touched by more than 20 of our team members in various stages of strategy, content, design and development. We’re incredibly proud of it.

There are so many cool/smart/delightful elements of this site which will have to wait for future blog posts, but to celebrate the launch, here are five things we think are particularly awesome about it:

1. Client-centric

Often agencies are so concerned with bells, whistles and winning awards, that they put actual client needs second. We made Regent’s goals our first concern. That meant building the brand, attracting new students, and communicating with students and alumni. The site is still gorgeous, but form followed function.

2. Mobile friendly

We built the site responsively, so it shifts and resizes for optimal browsing according to what device you’re using. No pinching or pulling required.

3. First class functionality

Our development team got to flex some technical muscle with fun animation and powerful tools like Regent’s course search—students can now find courses by name or course number, and sort by seven different criteria. And thanks to some clever coding, the results load instantly.

4. Lots of personality

One of the biggest challenges of putting Regent online was conveying their blend of rigorous academics and vibrant warmth. We did lots of listening to develop a site that is as fresh, smart and forward-looking as Regent—including visual references to the College’s distinct architecture. The brand shines throughout.

5. Incredibly versatile

Regent needed a platform they could easily replicate for future microsites. We created an additional template they can adapt and reuse for campaigns, conferences, departments, summer school, their library, bookstore, including custom donation and conference registration platforms.

See what we’re talking about! Visit www.regent-college.edu

Responsive Web is the New Black

Recently, Domain7 made a bold decision.

We’ve been talking about the centrality of the mobile web for a long time, and it was time to put our media queries where our mouth is. Domain7 is now actively developing every new site responsively, and responsive design is a standard offering on every proposal we put out.

Responsive websites are built on a flexible grid that shifts and adapts, depending on the device used to access it. A responsive site will scale just as gracefully for a smartphone as it does for a tablet or a desktop browser, and the user will never have to pinch, pull, or scroll to the right. It negates the need for a separate mobile site and means you only need to develop your site once, for all platforms.

In the last few weeks we’ve launched four responsive sites. Resize your desktop browser window to see the layout change depending on the width of the browser window.

• Pacific Restaurant Supply
• Sentinel Wealth Management
• Langley Event Centre
• Dot Kiwi

Responsive web design is quickly gaining a following as one of the most practical, expedient and economical ways of building a site that is both backward compatible and future-proof.

The World Wide Web Consortium (W3C)—the web standards organization—held its first developer conference in November 2011. Notice that the conference site, featuring major sponsors, Microsoft, AT&T, Adobe, and Nokia, features a responsive design.

For designers, one of the most exciting aspects of this approach is the prospect of leaving old Internet Explorer behind. Because of the proliferation of browsers and devices, the expectation that a website should look the same in every browser is highly unrealistic and practically impossible. Given that reasoning, it makes more sense to design a site to use the latest features of modern browsers, yet still provide an experience for older browsers which is appropriate to the capabilities of that browser.

To ensure this approach works well, regardless of the device, the focus becomes quality content that meets the needs of your audience: simplify, streamline and adapt.

• Simplify and focus on key messages and user actions
• Streamline content to optimize load times
• Adapt the layout across a wide range of devices

Responsive web design represents a sea change in the way the web industry engages in building and designing sites. The change is akin to the adoption of web standards when everyone was building Flash sites and table-based layouts.

We used to talk of separate “mobile” and “desktop” sites. Now we talk about responsive sites and the open web platform. When you see a well designed responsive web site, you realize that it not only makes sense, it changes everything.

Hurdles

There’s no question that, to be successful, web designers and developers have to continuously learn and refine their craft. The web is a very different place than it was five years ago, and what’s expected of us today is different than it was then. Learning on the job is a no brainer. But what is the most effective time to learn?

I was working on a fun personal project in Rails for a few minutes before dinner last night. In the time span of about 30 minutes a bunch of concepts, conventions, and principles that are essential to understanding Rails clicked. It was a serious turning point. I’ve been trying to learn Rails off and on for a few years, and nothing was really sticking. At that moment I understood that in most cases, I approach my work and my learning wrong: I train while I’m running the race.

Wikipedia says this about hurdling technique: Generally, the efficient hurdler spends the minimum amount of time and energy going vertically over the hurdle, thus achieving maximum speed in the horizontal race direction.

Designers and developers should approach projects like a well-trained hurdler: thoroughly equipped for the race, able to go from start to finish with ease, prepared and anticipating the hurdles he needs to jump without slowing down.

Since forever, I have instead approached projects like this: Run as fast as you can, and when you get to a hurdle, stop to analyze it and figure out how best to jump over it. I’ve always thought it was a good thing to learn during a project, and I’ve always enjoyed accepting challenges for the sake of learning them.

I think I was horribly wrong in this approach for two reasons:

1. It’s easier and faster to train/learn when you’re not already out of breath. If you’re trying to train in the middle of the race, you’re already tired from running. When I was learning Rails last night, I wasn’t in the middle of a project… it was at my leisure, in my own “gym”, and because of that my training was far more productive.
2. Anticipation alone isn’t enough for accurate estimation. You can look down the track and see all the hurdles, but you’re still going to make guesses at the level of effort to jump over them if you haven’t already done so in the past.

Given these reasons, there emerged a few practical outcomes for work:

1. Projects are not always the right place for training. Clients need you at your peak performance to run the race without stopping.
2. Set aside dedicated training time. If you’re unencumbered by deadlines, requirement documents, feedback cycles, etc., the learning process is vastly more productive.
3. To the best of your ability, only take projects where you’re familiar with the hurdles. Swallow your pride. Few projects will be completely exempt from challenges, but don’t take on something you have no previous experience with at all. The fun part of engaging in a challenge should be in the time you’ve set aside for training. Tackling a challenge unencumbered by the various aspects of a real-world project will free you up to be more creative, flexible and innovative.

Is Drupal Hard to Use?

Recently a prospective client mentioned she had heard Drupal is difficult to use, and asked to see a dummy Drupal backend to explore the interface.

It’s surprising how frequently this “Drupal is hard” myth pops up. True, Drupal is very robust compared to some simple Content Management Systems, but from a management standpoint, it’s super user-friendly and makes it nearly impossible to mess up your site.

I enlisted the help of my Drupal-savvy teammate Kevan to accomplish the task, and he one-upped me when he created this handy little video.

Without fail, once our clients see their websites in action they quickly learn just how easy Drupal is to use, but we thought we’d share Kevan’s tutorial with you, to settle any question in your mind.

The bottom line: Drupal is easy!

Open Systems vs. Open Source

I often get asked about my philosophy on technology, and over the years my simple answer has always—confidently—been: “Open source!” According to the all-knowing font of wisdom (ahem, Wikipedia), Open Source is defined as: “practices in production and development that promote access to the end product’s source materials.”

This definition certainly holds true. But more recently, as we’ve been privileged to create websites and systems for a huge variety of clients, I’ve realized that we need broader terminology for our development philosophy.

Now my answer is: “I believe in Open Systems.”

I would define Open Systems as products that feature:

• Open Source technologies. All foundational technologies—like application frameworks—are open source whenever possible.
• Web Standards. The software is comprised of publicly vetted, web-standards-based technologies.
• Integration. Software is architected towards integration—not lock-in—whenever possible
• Transparent data. Data is exposed to technologists and non-technologists as much as security and budgets allow
• 100% customer-accessible code base
• 100% customer-owned data

Why is this important? Take the example of templating a website: In a Content Management System (CMS), templating looks at how the markup (HTML/CSS) combines with the deeper functionality of the CMS. In some cases, templating an open source CMS can be cumbersome, with specific nuances that are quite proprietary. Often, it’s challenging to do anything unique or different with the content and information stored in the CMS, without the significant technical debt of creating new templates.

A fantastic example of an open system for templating is the open source project, Symphony. Symphony’s content model is based on a standards-based data model of XML, and templating is also standards-based through XSL. Considering the non-proprietary way data is accessible and interoperable, I sometimes wonder whether other best-of-breed Open Source tools have lost the heart of Open Systems through the cumbersome and non-standard templating models.

Domain7 designer/developer, Stephen Bau is a leading contributor within the Symphony community. He is currently working on a project entitled xpathr to show how a standards-based approach to templating enables collaboration with teams, using best practices of software development. xpathr gives teams the ability to collaborate with code repositories in Git and co-solve development problems in the managed XML data store and the respective XSL template transform.

So where does that leave Domain7? I know we’ll continue to carefully scrutinize the Open Source tools we recommend, based on the open nature of their architecture. My hope is that the communities that govern Open Source projects embrace a standards and the Open System approach and that we’ll see content and client liberation through these tools.

Introducing KeyPunch

Like many companies, Domain7 deals with a lot sensitive information that needs to be shared securely across the entire organization. Wi-fi keys, social media passwords, analytics accounts, clients’ Content Management Systems (CMS)—on any given day our team members log in and out of at least a dozen online accounts, and every single one needs a user-name and password.

For some time, we puzzled over finding a centralized spot for all this information without blowing the bank on licensing costs. There are some pretty good solutions out there (for a fee) but none of them upheld both of our essential criteria for a great tool:

1. open source
2. web based

Plus, with team members in every corner of North America, we needed an affordable solution that would give access to multiple users across many locations.

So we took it into our own hands! The D7 Labs team has developed Keypunch with the following Domain7 team members: Stephen Bau, Shane Davies, Tom Fast, and Andrew Hawthorne.

Keypunch is an open-source, web-based, multi-user system that allows organizations to manage secure information across multiple users and groups. Keypunch has launched internally at Domain7, with an eye to public launch in early this year. Watch for more news in coming months!

The Christmas Cheer Generator

Sometimes, deep in the midst of interactive wireframes, prototypes, style boards, database configurations, css-ing, and brand implementation scrums, our team likes to step back and play with the web, old-school style.

So, after a few hours of keyboarding, some clever wordsmithing, and a flurry of instant messages between offices, we whipped up a simple bit of Christmas cheer for you.

And when we say simple, we mean it. As an homage to our founding 15 years ago, we bring you a toy that harks back to the novelty that was the World Wide Web circa 1997.

Ladies and gents, behold the Christmas Cheer Generator! Everyone needs to feel the love this time of year, so just give us your name and let us shower you with holiday joy.

But oh wait, PS: what makes this decidedly un-1997 is that it is—awesomely—responsive (aka mobile-friendly). If it were solidly 1997 this little web toy would be locked into position with tables and scrolly bars and if you tried to pull it up on your “mobile device” (otherwise known as your nifty lead-weighted Nokia 9000 Communicator) you would have been, in a word, sad.

5 Awesome Things About HTML5

HTML5 is the latest standard for structuring and presenting content on the web. This latest version of HTML gives developers new features we can use to enhance and simplify the web. Here are five things that make it great:

1. Semantic Headings

HTML5 adds a bunch of new semantic tags that give more meaning for parsers and spiders (like Google) when reading your content. Among the more exciting uses for these headings are screen readers for the visually impaired. They use parsers to determine what content is most important for their users. Then they push away everything else, making a clean easy-to-read document. Added tags will make these screen readers far more useful.

2. Video embedding

With download speeds increasing and nearly every phone able to stream content, video usage has grown tremendously over the last five years. Previously Flash was the best way to provide streaming video—using loads of memory and slowing desktops considerably. On mobile devices, Flash was so cumbersome, Adobe has now abandoned it altogether. HTML5 adds a tag so video can be embedded into websites allowing them to stream across the latest smart phones and browsers.

3. Canvas

At its simplest, the canvas element can be used to draw graphics, like images, lines, shapes or text on the screen. A canvas is particularly useful for drawing dynamic content that will be constantly changing or different for every user. Older versions of HTML forced developers to rely on third-party plugins (like Flash) to display this content, and we know Flash doesn’t play well with mobiles or search engines.

4. Local Storage

Traditionally, websites have used Javascript cookies to store user data across page loads. Cookies have worked great for a long time, but are limited by space and storage. HTML5 allows websites to save dramatically more data, upping the limit from 4kB to 5MB by shifting the storage source to the computer rather than online.

5. New Input Fields

HTML5 has new input fields to help with content entry. These input types include email (which prompts Mail in iOS), a date field (which uses a calendar to pick a date), and range (which provides a slider to set a number between two different values). Most of these functions were already available but required Javascript to work. HTML5 makes it easy to add these input fields, and they also make it simpler for developers to quickly improve usability for their users.

Using libraries like Modernizr you can start using HTML5 today without worrying too much about cross-browser incompatibilities. The web is an exciting virtual world to live in and HTML 5 is a great next step in its evolution.

For a well written, comprehensive look at HTML 5, check out “Dive into HTML 5” by Mark Pilgrim.

A Designer’s Guide to Personalizing Your Site

The Power of Personalization: Part 3 of 3

When it comes to design, those responsible for building brands have tried desperately to maintain control over the way their message is presented on the web.

The Web is a New Medium. It is Not Print.

In the past, designers and developers tried to mold the web to their will through tables-based design and Flash—enforcing a structured grid system and trying to control typography and visual elements.

However, these attempts to enforce control were a major set-back to web development because designers and developers tried to impose a design aesthetic borrowed from one-to-many mass media. More often than not, this approach only corrupts or overcomplicates the underlying code or tries to bypass the code completely. In the end they made their data less usable, or in some cases, completely unusable. The web is a new medium. Designers need to stop trying to make it work like print.

Artificial Intelligence for the Web

Computers should make finding and using information easier. The web should provide easy-to-use tools to help manage our work flows and information systems. We want devices and applications that integrate easily into our lives and help make our work more creative and productive and our lives more enjoyable.

So, what if we were able to design a system that was able to learn from our daily habits?

The last thing we need is a gigantic web-form to collect a ton of information from us before we can use an application. But users should be given choices, and as they make choices—whether it is the pages of a site they visit, the links they click on, the items they buy, the applications they use, or the files they download—those choices are aggregated into a profile to set some preferences:

• browser preferences
• language preferences
• layout preferences
• content preferences
• location preferences
• purchasing preferences

Data on the Web is Fluid

Designers need to acknowledge that data on the web is fluid. We don’t know how people access that information, whether it is on a phone, a tablet, a laptop or a desktop computer; whether the information is accessed from an iOS application, an Android phone, a WebKit browser or an “ancient” (decade old) web browser like Internet Explorer 6. Do websites need to look exactly the same in every browser? No. Things will never look exactly the same in every device or application.

New Approaches to Web Design

But, web browsers are becoming more capable, and new web standards allow sites to adapt and serve a user experience that matches the capabilities of the browser. Ethan Marcotte, in an article on A List Apart, coined the term Responsive Web Design to refer to an approach that uses CSS media queries to serve the same content, but a different layout to different devices. He also was involved in the much-celebrated redesign of the Boston Globe. Now, there are gallery sites, like mediaqueri.es, that showcase sites that are using this responsive approach to serve appropriate layouts to different devices.

The appeal of this approach is that you don’t need a separate site or application for each device. You build your site once and it works across all platforms. This approach helps you focus on what’s necessary. Luke Wroblewski advocates a Mobile First approach, as mobile devices will likely be the dominant means of accessing information on the web sooner than later. You’ll find that the same principles apply to the experience of using websites on desktops and laptops as they do on mobile devices: focus on content and avoid overcomplicated layouts and interfaces.

Adapt to Your Audience

As you think about how your site can adapt to your audience, focus on the content your users need, and pay special attention to the underlying code. Make sure your information is as accessible as possible. Then you can think about how the presentation can change. Give up control and focus instead on giving your users what they’re looking for instead of what you think they should see. There’s a big difference.

Why Treat All Web Customers the Same?

The Power of Personalization: Part 1 of 3

Wouldn’t it be nice to go to a place where everybody knows your name, and is always glad you came? Frankly, most websites aren’t as neighbourly as the Bostonian bar in Cheers, but they should be, and they can be.

Usually, when we work through content strategy with clients, the key questions we want answered are: - Who uses your website? - What action do you want them to take? - Who gets priority?

These are important questions, but they can lead to compromise—a specific group of users will always gain priority over the rest. Some segments of your audience won’t get a targeted, warm welcome on their arrival.

In a typical business-to-consumer website, the categories are prioritized like this: 1. Prospective Customer 2. Current Customer 3. Interested Parties like media, potential employmees, etc. 4. Internal Users

When a brand is on its game, it speaks specifically to all target audiences and evokes the intended action from each of them. Wouldn’t it be nice if you could speak specifically to all of your visitors?

Personalization allows websites to deliver a tailored message to each category, removing this hierarchy and delivering a tactful homepage message and call-to-action for each user segment.

For example, you could set your page up to respond in these ways to your groups:

New customers:

• We noticed you recently submitted an inquiry. Does your question require follow-up?
• We noticed you reviewed this product on our website. Would you like to talk to someone about it?
• We noticed you are visiting from the following State or Country. Did you know we recently did this… in your area

Current customers:

• We noticed you visited our client extranet. Did you find what you were looking for?

Interested public:

• We saw that you visited our news and media section. Would you like to sign up for our newsletter?
• We noticed you visited our careers area. Would you like to sign up to our email list for notifications of updates?

Employees:

• Just a reminder that organizational updates can be found our intranet: intranet.yourcompany.com

The options extend as far as your (or our!) imaginations can stretch—and we know that’s pretty far. With website personalization there is simply no reason to treat all your visitors the same.