Redesign the Web

If you are into Web design/development, I recommend reading Redesign the Web #3, a Smashing Magazine book written by numerous authors experienced in fields relating to the Web. You can order the book online at Smashing Magazine. I’m not going to go over the whole book here, but I’ll highlight a few parts of it that I thought were insightful.

Collaborative Approach to Redesign

• Include the client in every part of the process.
• Take a more active role in decision making yourself.
• Work alongside the client by showing and discussing.
  • There are sketches, wireframes, mood boards, and design comps.
  • The design won’t come as a surprise to the client.
  • The client will feel a sense of ownership over the design.
  • The client will be able to understand where the design came from.

The Right Design Process

1. The idea stage consists of looking at inspiring Web sites, discussing color, typography, imagery, and personality.
   
2. The mood boarding stage consists of creating mood boards that reflect different design directions.
3. The wireframing stage consists of sketching out different layouts for key pages.
4. Refining the design composition involves creating HTML prototypes.
5. Presenting the design involves defending your design so the client will know the reasoning behind the design.

Dealing with Feedback Through Testing

• Survey with multiple choice questions
  • Choosing between two subtly different design approaches.
  • Getting feedback, asking the user which limited set of options they’d click on, conduct close card sorting.

Getting Design Feedback

• Design testing
  • Emotional response test
    • Busy or spacious, classic or modern etc.
  • Usability testing
    • Test from sketches to mood boards to final build.

Client Feedback Questions

• Do you agree that the redesign reflects the organization’s brand?
• Does the redesign meet our agreed business objectives?
• Is the redesign in line with the personality we discussed?
• Will this redesign encourage users to complete the agreed calls to action?
• Does the redesign reflect the approved mood boards and wireframes?
• Have we accommodated all pertinent feedback from the user testing sessions?

Redesigns that last

• Ongoing working relationship with clients rather than one-off engagements
• Follow web standards and validate code.
• Use HTML5 and CSS3 as they will be future proof for the years down the line.
• Support for mobile and other devices

Suggestions

• Become more than an implementer.
• Prepare before jumping in.
• Test everything.
• Plan for the future.

Technical Considerations for Your Redesign

• Evaluate the old system
  • What works already? What are the pain points?
• Gather technical requirements
  • Check and make sure to cover all the desired features the client wants on their site
• Content management
  • Are user permission levels needed?
  • Is the content management done by dedicated editors or others?
  • Are multiple languages needed?
  • What type of content is edited?
  • What kind of editing environment is needed?
• Version Control
  • It’s a good idea for saving your work so you can go back to an earlier version if you need to, even if you’re working alone.
• Moving your Web site
  1. Set up the new hosting environment.
  2. Transfer the files to the new host.
  3. Transfer the database to the new host.
  4. Set up the mailboxes.
  5. Change the name servers or re-point the domain.
  6. Sites with live databases may need to go down temporarily to avoid losing data during the transfer.

HTML5

• It’s broken into many pieces with distinct areas of specialization which include HTML, CSS, and JavaScript.
• Develop specialized skills that others do not possess by focusing on “non-core” technology.
• With HTML 5, HTML is now defined as a version-less technology but browsers cherry-pick which features to implement so browser support varies for features.
• W3C does not create standards but makes recommendations.
• The type attribute can be omitted for link and script.
• Yepnope.js can help load only the JavaScript you need, only if the browser supports it, such as JSON, which is not supported by IE 6 and 7.
• Compress your scripts such as with Uglify.
• Use HTML 5 shiv for IE 8 and below.
• Reset default HTML styles.

Restyle, Recode, Reimagine with CSS3

• Sites don’t have to look the same on all browsers.
• Provide fallbacks.
• Rems are easier to use than ems but aren’t compatible with some browsers such as IE8, Safari 4, iOS 3.2.
• Use @font-face.
• You can hyphenate text by using hyphens: auto; but it doesn’t have good browser support.
• You can specify columns using something like this:

  article > section > section {
  

column-count: 2; column-gap: 2.6rem; column-width: 30%; }

• Felxible Box Layout

  body {
  

display: flexbox; flex-align: center; flex-pack: center; margin: 0; height: 100%; }

Personality in design always carries some risk but “distain is always better than apathy”.

Design Persona

1. Brand name
2. Overview
3. Personality image
4. Brand traits
5. Personality map
6. Voice
7. Copy examples
8. Visual lexicon
9. Engagement methods

Use outside in approach, not inside out approach. Don’t approach your project with which server-side technology you want to use, but approach it with the user in mind first.

Structured Content First: Platform- and Device-Agnostic Thinking

• Purposely ignore the destination and focus on where we are going and whether it is indead where we want to begin.
• Technology often influences decisions more than it should.
• Focus on problems not the solutions initially, then find the appropriate solution for those problems.

Content Inventory Questions

• Why would people use this Web site in the first place?
• If only one browser existed in the world and it rendered only HTML, with the default styles and functionality handled on the server, what should all users be able to see and do in all situations?
• Must pass the purpose test.

Responsive Web Design

• It represents a fundamental shift in what it means for us to design for the Web.
• Responsive Web design affects everyone who thinks up, designs, builds, and pays for or uses the Web
• It asks more questions than it offers answers as it challenges how, when and why.
• We should always design for the flexible nature of the Web.
• There are many facets, one experience.
• Design and layout must be separated from each other.
• Design atmosphere includes typography, color, texture, and layout.