Why is Responsive Web Design Important?

What is Responsive Web Design?
RWD is a design trend term coined by Ethan Marcotte in his article on A List Apart. The basic concept of RWD consists of having a flexible fluid layout that adapts to the different viewing modes of various web browsers. The end results are beautifully tailored layouts with scaled images and dynamic re-flows of web content.

There are three key technical features, that when composed together will enhance the viewing environment:

  1. tailored style sheets using CSS3 media queries and media query listeners
  2. flexible grid-based layout that uses relative sizing (percentages and ems)
  3. dynamic scaling of images, media, and web content

Why is there a need for responsive designs?
The ability to communicate creatively via the web has forever changed the print industry. Creative minds are no longer bounded by specific dimensions of paper. With the expanding number of web browser dimensions, static design layouts are not enough anymore to accommodate the growing users of modern electronics. From the familiar computer desktops and popular tablets to mobile devices and tv/game console browsers, there is an increasing need for a layout that is fluid and responsive for this changing web landscape.

What are media queries?
CSS2 allowed web developers to specify style sheets based on different media types of screen and/or print. CSS3 took a step forward and allowed developers to render layouts based on additional media queries using expressions to check for specific conditions. For example, a media query would check a device browser’s screen min and max width before changing the background color of the wrapper.

@media screen (min-width:320px) and (max-width:720px)
{
.wrapper { background: #ccc; }
}

Responsive Grid Layouts
There are many responsive CSS frameworks out there. These flexible grid layouts are based on a number of fluid columns with predefined style sheets and media queries that can be used for your future responsive layout needs.

The trend of Responsive Web Design is catching on in popularity. Many sites are now getting a redesign so their layouts can adapt for a better user experience.

Print style sheets. Yes we still need them!

With technology and media heading towards a print-free lifestyle, we still need to style the web for print media. If there is a large amount of information viewed on a webpage, some people still enjoy the option of printing a “hard copy” and taking it on-the-go with them.

There are currently ten defined CSS media types: all, aural, braille, embossed, handheld, print, projection, screen, tty, and tv. Each media declaration allows web layouts to be presented differently to users, from handheld devices to web screens.

The main focus of today’s topic is print. Developers should keep in mind how to restyle for print as they are creating their designs for a new website. A web layout may look great on-screen, but it may not be print friendly. The print style sheet overrides the normal screen layout styles without adding anything extra to the screen layouts.

Tips and best practices:

  1. A simple rule of thumb is to display only what is needed.
  2. Remove headers, top navigations, sidebars, images, footers. display: none; works wonders. The logo and contact information from the footer should be the only exception.
  3. Enlarge the content area by expanding the width to 100%, resetting the margins and floats to 0 and none.
  4. Reset the background color to white and content area to transparent.
  5. Reset text colors to dark gray, especially after resetting background colors. Light colored text will be invisible or harder to see on a white background.
  6. Reset font size to 12 points. Default browser font size is 16 points.
  7. Reset font family to serif fonts since it’s easier to read on paper. Georgia or Times New Roman are preferable.
  8. Make links bolder, underlined and declare it to have a blue or red color.
  9. Display link destinations so the reader can see what the urls are on paper.
    a:link:after a:visited:after { content: " (" attr(href) ") ";}
  10. If there is a blog with pages of comments, you can break the comments into pages.
    #comments {page-break-before: always;}

How to set it up?
Declare your print style sheet in the head section of your html page as you normally would. Add the media = “print” to the declaration for print only specification.

Basic Overview of Web Typography

Typography as an art form has come a long way from its usage in print. As web technology continues to advance, so has typography in its role on the web. Knowing the fundamentals of typography is important to designers because effective designs stems from good typography practices. Since typography is a the complex subject, I will focus on some basics of typography, web typography and its usage on the web.

What is the difference between a font and typeface?
The terms font and typeface are often used interchangeably in design. A font means one style or weight (Arial Bold or Arial Regular). A typeface refers to a family of fonts (Helvetica Regular, Helvetica Bold, Helvetica Italic, Helvetica Black, etc.)

Two of the more common typefaces classifications are serif or sans-serif. Serif typefaces are distinguished by a short line of finishing stroke at the end of a letter’s stem or stroke. Sans-serif letters are the opposite, no finishing strokes or lines.

Understanding the basic anatomy of a letter is the beginning of what typography is. Some terms in which you will often encounter include: ascender, baseline, cap height, descender, stem, stroke, and x-height. Some definitions that web designers should also understand are: weight, line height, rag, alignment, widows and orphans. Knowing these terms can help designers/developers choose a typeface and how to effectively style content on the web. Fonts.com provides a collection of typographic terms in their glossary section.

In the past, designers could only use web safe typefaces to display their content. Web safe typefaces vary on different operating systems. For example, this list of web safe typefaces is my go-to guide for font comparisons in windows and macs. Now, there are many ways to display custom fonts. Some popular practices include standard image replacement techniques like Phark Image Replacement and advanced image replacement techniques like sIFR and cufón.

Phark Image Replacement:
This standard technique is accomplished by using a defined height and width to set a container element (example: DIV) that also has a background image set to it. Setting the CSS property of text-indent to -9999px will push the start of the text off the visible area of the screen. Some pros of this widely used technique are 1) it does not create unnecessary scroll bars and 2) successfully makes the text disappear onscreen for viewers, but remains accessible for search engine. The only con to this technique is that when images are turned off and CSS is still enabled, viewers would not be able to see anything.

HTML:
<div id="logo">
Website Logo
</div>

CSS:
div.logo {
width: 200px;
height: 100px;
background: url("images/logo.jpg");
text-indent: -9999px;
}

To compare the pros and cons of the other standard and advanced CSS image replacement techniques, please check out this excellent post by CSS-Tricks.

With the launch of CSS3, embedding high quality custom fonts has never been easier with @font-face. However, you must own or have purchased the license of the fonts before you can embed them.

Basic syntax for @font-face:
@font-face {
font-family: Chunkfive;
src: url('Chunkfive.otf');
}

You can then build a font stack using the new embedded font.
font-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;

Designers can find and download free custom fonts on websites such as Font Squirrel or through Google’s new directory of web fonts. One of the first websites to team up with font foundries to provide font embedding services is Typekit. There is a trial plan for those interested in checking it out and prices per year start at $24.99 for licenses to 5 fonts.

For more details about @font-face, please check out this SixRevisions’ resource page.

There are many resources on the topic of print and web typography. Learning the basics of typography will help you understand how to effectively design and develop the content of a web page.

What’s New In HTML5?

Being a good web developer means keeping up with the constantly evolving technology. One of the most fundamental building blocks of a webpage is HTML, HyperText Markup Language. Web browsers use HTML elements, written in the form of tags (open and close angle brackets) to interpret the content of the page. HTML is used to create forms, embed images and objects, and structure content. With the help of CSS (Cascading Style Sheets) and Javascript, webpages can be presented in clean, organized, and interactive eye-catching ways. Currently, the specifications of HTML4 are being used to render webpages across the web. As we transition into using HTML5, new semantics and elements are being added to the specifications. The biggest benefit of HTML5 is being able to help bridge the gap between the back-end principles of Javascript to the front-end layers of HTML.

Below is a brief look on what’s new in HTML5.

Starting from the top. The original DOCTYPE declaration of a website has been shortened to:
<!DOCTYPE html>
It’s so much easier to remember!

Some new structural elements have been added to replace some of the more commonly used DIV IDs and classes.
<header>
<nav>
<section>
<article>
<aside>
<footer>

Markup Examples:

<header>
<h1>Hello World and HTML5!</h1>
<p>Lorem ipsum….</p>
</header>

<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>

HTML5 is breathing new life into web apps, from tablets to mobile. By extending the API, HTML5 gives web apps the capabilities of application caching and offline data storage. By specifying the manifest attribute to the html element. <html manifest=”manifest.cache”>, developers are able to control which files a browser should cache. Viewers can now avoid the hassle of reconnecting to the internet to browse a page that was previously displayed before. For more information on application caching, check out the Webreference site.

Video and audio APIs allow for easier embedding of such files.
For example, the simplest way to embed a video is to use the new video element and allow the browser to provide a default UI with the controls attribute. The poster attribute is optional and allows for an image to be displayed in place of the video before playing. <video controls width=”250″ height=”150″ src=”file.mp4″ poster=”poster.jpg”>
Audio is just as simple, minus the attributes of width, height, and poster. <audio src=”audio.mp3″ controls></audio>

Probably the most interesting feature of HTML5 is the canvas element. One can finally dynamically generate graphics on a web page! The possibilities of using the canvas element is endless. Developers can now use canvas to build graphs, charts, animations, games, etc.
<canvas id=”myCanvas” width=”200″ height=”100″>Display this text if browser doesn’t support canvas.</canvas> is the code used to create a canvas element.

By using Javascript, the code below draws out a red rectangle.
<script type=”text/javascript”>
var example = document.getElementById(‘example’);
var context = example.getContext(‘2d’);
context.fillStyle = “rgb(255,0,0)”;
context.fillRect(30, 30, 50, 50);
</script>

Visit w3school for a tutorial on the new canvas element.

This post was inspired by the new features of HTML5. Developers are already experimenting with HTML5. Not all browsers will display HTML5 content correctly. It’s just a matter of time when the majority of developers will code with the newly added features and when all latest version of browsers (even IE) will support it. For more references to HTML5, check out W3C Web Developer’s Guide to HTML5.

Design for Emotions

Last November, I was very fortunate to have been able to attend a web design and development conference hosted by FOWD (Future of Web Design) in NY.
The topic of “Designing for Emotions” was given by Aaron Walter, a user experience designer at MailChimp. His knowlege had left a deep impact on my thoughts as a web developer and designer. What I should be doing is creating quality designs and interactions that provoke positive emotions.

These are some notes that was taken from the seminar.

Why should we design for user emotions?
There has been a shift in focus in the functionality of design. Usability was ignored in the past, but now it’s getting more attention since emotions are being recognized as an essential part of user experience. It’s not enough anymore to simply design our interfaces to be usable. We need to design to evoke emotions, to make user experience pleasurable. Design for emotional engagement so we can create that powerful bond with our targeted audience. It’s the connection that makes users come back to a website.

How do you define a good quality design?
A pleasurable design generates good feelings. A delightful experience is memorable. Walter mapped the Maslow’s hierarchy of human needs to a collection of web users needs. Understanding how non-technical humans relate to computers is important. Functionality is at the fundamental base of pyramid. Then comes reliability and usability. Pleasurability exists at the top layer of the pyramid, but it is often forgotten, and thereby missing in the design process. Trying to design usable interfaces is like a chef making edible food, but is that enough? Humans need more than just edible food. It has to taste good and satisfy our refined palettes. Likewise, a design not only needs to be functional, reliable, and usable, but it has to reward users with a positive emotion. Walter provided the audience some design tools to create a pleasurable experience. He provided examples of good and bad quality designed websites to support his discussion.

Example:
Basecamp is an online project management tool with a simple interface and some shortcomings. It is functional, reliable and usable. It’s all about getting tasks done, but the interface takes us no further.

Personality
Personality is a collection of behaviors and emotions unique to each of us. It is a platform for emotions. Personality is the key to what is most important in what we do. It’s the way we connect and feel. Humans are often logical, but everyday we use emotions to make decisions. When designing, think of the products, services, websites, etc. as “people” too.

Examples:
VW beetle. Herbie the lovebug. The old car design resembled a smiley face. The VW beetle was the most successful automotive design in history because it had anthropomorphic traits. It possessed a strong human connection that transcended through history. When we see ourselves, we see personalities. Personality invites empathy and we can connect with the design.

Wufoo is a form builder with a fun, fisher price style and use of primary colors. It’s whimsical with an easy to use interface. Most importantly, personality is injected into it. It’s less intimidating for those who don’t build forms/database everyday. This website satisfies the hierarchy.

Treats
A little treat can make a day fun. It can change the course of a day for someone.

Example:
MailChimp. There are witty jokes from the mascot monkey on the top of main pages that doesn’t interfere with the user interface/workflow. An emotional treat creates an enjoyable and more usable experience, especially if users are going through tedious tasks. However, there are risks when personality is involved in design. Some users don’t like personality injected into designs.

Conditioning
Create emotional cycles so users can trust your website over others by using a stimulus. Conditioning can train people to have positive tones. People remember emotional experience in their long-term memories. Users keep coming back if it’s a positive tone or they will stay away if it’s negative.

Discovery
Another helpful tool is the discovery of a fun feature, a great experience, or unique interactions. The discovery in itself makes the user want to continue using the interface and return to the website.

Example:
Photojojo is a website that sells photo gifts and gears, shares photography tips and gives DIY tutorials. In the storefront interface, smiley and sad faces are seen on the cart depending if it is filled or not. There is also a “Do Not Pull” lever that triggers a delightful experience. Many people click on do not pull lever regardless and are more likely to purchase the items because of their fun discoveries.

Skeptics
Humans are doubtful when it comes to security. Need to create a sense of trust in a design suitable to the audience. “Trust is a gut feeling more than a rational process, and visual design affects emotions in a very powerful way, perhaps more than any other stimuli.”

Examples:
Mint.com is an example of a successful interface design that earns your trust. It makes you want to hand over all your financial credentials because the modern looking interface design was compelling enough. They didn’t use humor like MailChimp. Subconsciously, users think: if the design is designed well, then the interface must be built well.

Forgiveness
Emotional collateral is created. After users have gone through the trust cycles and have established a strong connection with your brand, they will forgive you even if something goes wrong. If the users are willing to stand behind your website because they think it’s worth it, then you have developed a successfully captured their emotions.

Examples:
Flickr thought they had lost people’s data awhile back in 2006. They added something extra fun during their downtime. On their homepage, Flickr had 2 empty circles and asked users to fill it with something, take a picture and post it up when the site came back online to win a free pro account. The number of submissions showed that people still believed in them. Flickr provided an extra incentive to bring people back even though they were experiencing back-end problems.

CssDrive is a website that fails due to clutter. The user is unsure on where to focus. They can’t boil it down to making a simple decision so there is frustration upon going through the site. People don’t visit the site due to poor layout design and a negative user experience. Humans have limits and attention in finite. We tend to try and find the path to least resistance.

“Attractive things make people feel good, which in turn makes them think more creatively. How does that make something easier to use? Simple, by making it easier for people to find simpler solutions to the problems they encounter.” – Donald Norman

Other examples of great interfaces and designs mentioned were Dropbox, Twitter, and Tumblr.

Walter sums it up with this emotional design principle.
People will forgive shortcomings, follow your lead and sing your praises if you reward them with emotions.

Keyword Research

Earlier this month, I was assigned a video keyword research task at work for our Dreidel-Palooza event. In celebration of Hanukkah this year, Yeshiva University students, alumni, faculty, and staff will attempt to break the Guinness Book of World Record for most dreidels spun at one time.

What are keywords and why are they important?
Keywords are the actual terms and/or phrases people type into search engines (Google, Bing, Yahoo!, etc.). Internet users are usually doing two things when they are online: 1) looking for information or 2) seeking to purchase something. It is important to generate appropriate keywords because they can help improve rankings of your website on the search result list. The bad and overused keywords can trigger search engines to mark your website as spam.

How do you effectively research and generate keywords for your website?
Keyword selection is fundamental to the success of search engine optimization. Keyword research is not a quick 30 minute process, but rather a long-term and ongoing effort. Once the keyword research process is complete, it is not the end! The process should be repeated with the knowledge accumulated from previous researches, optimization results, and traffic results in mind. Effective research can be broken down into three parts.

Part 1) Create your initial list of keywords. Do not assume that your users are already searching for your keywords. Users could be searching with other synonyms or different terms. Look into the keywords list of similar successful websites. Ask yourself these questions: What is your target audience is? What products or services do you sell? What is the purpose of your website/campaign? How many other similar sites are competing for the same keywords? How strong or successful are the rankings of your competitors’ sites? Knowing these answers will give you a good indication of how competitive your keyword choices are.

Part 2) Finalize your list of keywords. A spreadsheet is a great way to start. List the keyword/phrase with their conversion rate, search volume, competition rate and the type of keyword (long, medium or short tail). Repetition of keywords are fine if they describe different contents in your webpages. Do not try to trick search engines with keywords that do not have any relevancy in your content. Highlight the terms that applies to your website/campaign. Let keywords guide your overall content strategy. Successful keyword research will help you see what users are searching for and how search engine crawls your website. Use this keyword research knowledge to provide a better user experience and that will hopefully reward you with higher rankings and increase traffic.

Part 3) Adding keywords to your website. After you have narrowed down your list, you should have 20 to 30 focused keywords. If the initial research was done correctly, the list should already appear in your content. Current best practices for SEO keywords are 3 to 4 related terms per page. Title tags, meta description tags, headings, alt text, anchor and navigational links are some examples of where your keywords should already be.

Popular Keyword Research Tools:
Google Wonder Wheel – Google’s Visual Representation of Grouped Keywords

Google External Keyword Tool

Google Website Optimizer

KeywordSpy

Spyfu

Wordstream Keyword Tool – Bing’s Keyword Tool

Wordtracker

Yahoo! Site Explorer Tool

YouTube Keyword Tool

Typography Lessons

I attended a free web/print seminar called Expert Typography for Print and Web taught by Noble Desktop in NYC last night. Check out the other free seminars they offer. Since typography had so many facets to it, I was pretty overwhelmed by the amount of information shared. For my first time there, the instructor did an amazing job at showing us tips and tricks on InDesign, and explaining typographic concepts/trends. This seminar came in handy since I am working in web development field.

Some things I learned:

  1. find a versatile and fleshed out OpenType fonts that has a variety of weights and styles to increase creative options
  2. font licensing is important, especially when you need to embed them in your websites
  3. design tips, tricks, and preferences to stylizing text within InDesign
  4. keyboard viewer shortcuts, CSS encoding, type embedding techniques
  5. the difference between a dash, endash, and emdash, smart and dumb quotes, the use of hyphens
  6. general typographic sins such as no double spaces after sentences (check out Ray Elder’s post about more typographic sins)

These types of seminars and refreshers remind me how much I still have to learn! 2 hours was draining, but I will go to the next seminar well prepared — by bringing a snack 😀