Tuesday, February 24, 2015

Effective Web Typography: Rules, Techniques and Responsive Design

Effective Web Typography: Rules, Techniques and Responsive Design

Responsive Web Design isn't just about columns, grids, images and icons. All of this will not make sense without text for content. As Bill Gates once said "Content is King".

When it comes to content, we need to talk about web typography. Looking at modern web design trends, having responsive typography is a big factor every web designer and web developer shouldn't miss.

Here, we will discuss creating responsive web typography and factors you need to know about it.

Typography Basics

Good typography is all about selecting the right type for web or printed media. From font type, color of the text to the length and font-size on different viewports, good typography ensures that the final letter forms generate the highest quality end result.

Before we dive in to the process of creating successful responsive web typography, here are a few terms that you need to understand.

Typeface

Typeface

Also known as font family. This is a collection of design of characters with a complete set of letters, numbers, symbols, special characters and weight.

Font

Font

This is the actual computer file that contains information about the lettering used, such as typeface, weight, width, style and so on.

Baseline

Baseline

This is the line where the letters rest and where descenders extend.

Cap Height

Cap Height

This is the height of the capital letters above the baseline.

X-height

X-height

Also known as corpus size. This to the distance between the baseline and midline (half the distance from the baseline to cap height)

Descenders

Descenders

This is the part of a letter that extends below the baseline.

Tracking

Also known as letter spacing. This is the consistent increase or decrease of space between letters uniformly.

Kerning

The process of adjusting the space between individual characters in glyphs of varying widths.

Leading

Also known as line height in CSS. The distance between the baselines of successive lines or types.

Points to Consider on Web Typography

Words, phrases and sentences have meaning but each character can have emotion. Aside from being responsive, you must also consider presenting better web typography to your audience.

The complete design will not make sense if your audience will not understand or is not attracted to your content. In web typography there are four basic elements:

  • Type
  • Color
  • Texture
  • Image

All of these will have a big effect to your typography end-result but the type will magnify the expressiveness of your message.

There are five factors that can help you create presentable web typography.

1. Choose the best typeface that corresponds to your topic

Most sites nowadays are using the same typefaces. Yeah, you guessed it right; I am talking about Arial and Helvetica. However, it would make a lot of sense if you could align typefaces with your message.

For instance, your web pages talks about a children's book would it be good if you'll use something like DK Crayon Crumble or Little Miss Priss in your header text?

I am not suggesting you need to do this all of the time but the point is make sure that typography aligns with your target audience and the text is clear and readable.

2. Use web fonts

One of the greatest improvements of web design nowadays is the support for Web fonts on all modern browsers via @import command and standard link tag. Check out the demo below.

Using @import tag:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Using the standard link tag:


This means that you can use any font that is available on the hosted web font site such as Google Font, Typekit and Fontdeck. Here are the following the advantages of using web fonts:

  • It saves money. You don't need to purchase fonts online.
  • It saves time. While you can integrate fonts manually in your folders file, using web fonts can be done with a line of code.
  • They are compatible on all new versions of web browsers and are SEO-friendly.

3. Use proper color combinations

One of the major issues web designers commit nowadays is throwing unnecessary color combinations to their sites. Remember good web design can be identified by how well the site functions and how good the design is.

Speaking of design, you don't just design your web pages randomly and throw a lot of colors that doesn't mix especially with your text and background of your site. This will make your text unreadable and will bring pain to your visitor's eyes.

But how do you use proper color combinations? While there is no general rule, there are some guidelines.

  • Use proper contrast or distinction colors between text and the background as suggested by W3C. Colors that have the same value but different hue may be easily read with a person with a good vision but not on color blind person. It is important to check the contrast before applying it to your design. You can use this great tool to simulate contrast.
  • Use flat UI colors if possible. These colors are light and have great combinations that are not painful to the eyes. Check out flatuicolors.com for more information, based on Flat UI.

4. Use text instead of images

As we all know images make web pages slower. Most often images are the only way to force the web browser to display a preferred font and the exact layout you want. However this might not work. Using real text is the best way to go especially with responsive web design. Remember, search engines can't read images but they can read text.

5. Use fallback text style when clipping text

There might be a time wherein you need to clip text on images to create a textured or image text. The problem here is that not all browsers support this technique.

The best way to do this is using Paul Irish's CSS Browser Selector plugin. This is a lightweight plugin that detect the browser and manipulates the styles you want to appear on specific browsers. Here's how to use this cool plugin.

  • Download the plugin here and then link it to your head section:

  • Set CSS attributes (either id or class) with the code of each browser you want to change specifically on your stylesheet.

    .opera #header { margin: 20px; }
    .webkit #header { margin: 30px;  }
    .ie #header{ margin: 10px; }
    .ff3 #header {margin: 15px; }

For more information about this cool plugin check out this site.

Responsive Typography Ground Rules

Most of the fundamental typographic elements can be manipulated with CSS. However, it actually more than just adapting or optimizing the size of the text on each viewport. Now that we've discussed how you can achieve presentable web typography, it's now time to talk about the basic ground rules that we can apply to achieve better responsive typography.

1. Use rem instead of pixels and ems

The use of both pixels and ems is popular. While pixels are fixed, ems are relative units to the parent element. This means when you resize the browser it's hard to figure it out the size you need to set to achieve the output you want to attain.

A better option is using rems. Rems or also known as "root em" are always equal to the font size of the root HTML element and what's more exciting with this is that it was being supported by modern browsers.

html { font-size: 16px;   // 1rem = 16px }
h1 { font-size: 1.9rem // 19px }
h2 { font-size: 1.8rem // 18px }

In this example I'm defining a base font-size of 16px which is the reference of the font-size of the other element. The size of the h1 and h2 will change as the viewport changes.

For older versions of Internet Explorer, we can specify the font-size in px units first and define the rem units along with it and we can have a resizable text on all browsers.

html { font-size: 16px;   // 1rem = 16px }
h1 { font-size: 19px; font-size: 1.9rem; }
h2 { font-size: 18px; font-size: 1.8rem; }

2. Experiment rem units on different viewports

Now that you know how to use rem, you need experiment on different sizes of screens via @media queries. The output will depend on the typeface. You need also to use actual font sizes and see if you'll get the result you want.

@media (max-width: 640px) {
h1 { font-size:1.7rem }
h2 { font-size: 1.6rem }
}
 
@media (min-width: 480) {
h1 { font-size:1.9rem }
h2 { font-size: 1.8rem}
}

Notice that on smaller screens the font size is a bit bigger compared to the wider screens. This will make text more readable as users read via phone or tablet.

3. Use CSS3 pseudo-classes to specify specific styles

One of the great features of CSS3 is that it can target a specific letter, line or paragraph and give it a different style. This gives designers the freedom to resize or adjust the text on different sizes.


As you can see on the example below, we use the following the CSS3 pseudo-classes:

  • first-of-type – selects the first child of the paragraph tag
  • first-line – selects the first line of the the paragraph tag
  • first-letter – selects the first letter of the paragraph tag

4. Control your measure

As suggested by Robert Bringhurst, the most ideal measure or line-length is around 45 to 75 characters per line. For responsive web design, the measure is not that easy to control especially on smaller viewports. If you can't control measure, you can't control legibility of your text.

There is a good article by Elliot Jay Stocks that talks about this topic on how to use media queries to achieve a desirable line height and measure.

Using Plugins

While there are a lot of jQuery plugins that we can use for responsive web typography online, the most popular one is the FlowType.js. This jQuery plugin counts character per line and set font sizes at definite line length at any viewports.

Let's take a closer look on how this works.

Step 1: Set Typography Values

Start adding CSS basic set up for FlowType.js.

body {
   font-size: 16px;
   line-height: 20px;
}
 
h1,h2,h3,h4,p {
   font-family: inherit;
   font-size: inherit;
}
 
h1 {
   font-size: 3em;
   line-height: 1em;
}
 
h2 {
   font-size: 2em;
   line-height: 1em;
}
 
p {
   font-size: 1em;
   line-height: 1em;
}

These values will be used by FlowType.js and change each values as the viewport resizes. Setting up font size and line height will enable you to access and set up your web pages when JavaScript was disabled.

Step 2: Link FlowType.js to your head section

Download FlowType.js and include it the head section of your html document.


Step 3: Call FlowType.js

Activate FlowType.js, we just need to add the following codes just before the closing tag.


Step 4: Customize FlowType.js Settings

There are some values that FlowType.js has by default, however you tweak them to the settings you want it to be set up. To do this, you just need to include some other options on your jQuery code.

$('body').flowtype({
   minimum   : 500,
   maximum   : 1920,
   minFont   : 16,
   maxFont   : 40,
   fontRatio : 34,
   lineRatio : 1.50
});

Aside from flowtype.js there are some other jQuery plugins that might help to create responsive web typography. Check out the following jQuery plugins:

  • FitText – A jQuery plugin that makes font-sizes flexible making text and headlines fluid or responsive.
  • js – A great plugin for radical web typography. It helps control the kerning of text in a just a line of jQuery code.
  • Responsive Measures – A simple script that enables you to create ideal measures for a container’s text.

What's Next?

Responsive design is becoming more and more advanced. We may think that images, layout and grids are what matters. However, we must not forget that the content or the text is what’s read by people and search engines.

Just like putting effort on layouts and images, you must also put some effort on how your text will appear. After all what matters most is that your text is readable, understandable and is easy for eyes on all viewports.


Wednesday, February 18, 2015

4 tips for a smarter CSS workflow

CSS workflow
Creating fancy CSS effects is great, says Shopify's Jonathan Snook, but it's more important to craft code that's fast and efficient.

You've only got to look at the amazing things people are making with CSS to know that, as a language, it's changing. People are creating stunning animations, and amazing images.

Whether you've been coding for years or just getting started, the landscape for CSS development has changed dramatically in the last few years too. Now, we have plenty of tools at our disposal that can help us to build lean, performant CSS.

Here Shopify's Jonathan Snook gives four top tips that will help you craft light-weight and fast CSS.

01. Identify unused code

Over time, projects change and your CSS may not have gotten with the times. Unused CSS impacts performance by sending needless code to the browser and making the browser work harder to identify what styles should be applied.

UnCSS will take a list of files and URLs, checks that each CSS rule is found in the HTML, and then spits out a CSS file that only includes the rules that are being used.

UnCSS requires compiled HTML & CSS and therefore may not be as helpful depending on your dev environment.

02. Identify duplicate code

As you build out a site, you'll set your sights on individual chunks of the design. When all is said and done, you may not have realized that many of the styles for the modal dialog were actually very similar to the styles for the drop-downs.

Using csscss, a redundancy checker, will help identify duplicate properties across all of your CSS rules. You can then consolidate your code into a single CSS rule.

03. Identify poor code

You've removed unused and duplicated code. What other improvements can we make to our CSS? Parker and analyze-css are two tools that analyze your stylesheets and provide metrics on the quality of your code.

Both Parker and analyze-css can help unearth parts of your code that you can simplify and refactor. Run these tools on a regular basis to help keep your CSS in check.

04. Write better code

Getting rid of bad code is one thing but writing good code to begin with is even better. Recently, a couple of guidelines have been written to help guide you to better code: CSS Guidelines and Sass Guidelines. Tooting my own horn, you should also check out SMACSS for ideas on how to write lean modular code for your project.


Tuesday, February 17, 2015

The When, Why and How of Designing in Browser

Designing in Browser

If you're a designer in the tech industry, you've probably been exposed to or read articles about a hot topic in design today: designing in browser. The concept is as simple as it sounds. Rather than spending hours, days, weeks and months designing those pixel-perfect comps in Photoshop, a mainstay in a waterfall-oriented development process, designing in browser allows you to take whatever sketches and preliminary work you've conducted and enables you to jump right into the text editor and emerge with shippable code.

But how do you design in browser effectively?
How do you know when the project calls for it?

Let me walk you through when, why and how you might decide to design in browser vs. doing it a more traditional way. Which, for the sake of this article, will be designing in Photoshop.

To start, my version of "designing in browser" is less "designing" and more "hacking in browser to get what you want". To me, design is solving a problem for your users. The "in browser" is just another tool in your arsenal, the fastest way to ship clean code that has a considered design via a series of collaborative meetings and sketching.

When do you design in browser?

There are many articles in the tech community that sing the praises of designing in browser — it's future of web design, we should Kill Photoshop — to name a couple. I agree that while designing in browser can be your go-to when kicking off a design project, there will be times when factors — client needs, nature of deliverable, time constraints, for instance — don't allow you to work that way. Here are some potential scenarios where you wouldn't:

The client's needs aren't suited for designing in browser. You may tell yourself, "well, just don't work with them!". But we all know this can't always be the case. Maybe the client's priority at the time is to present a highly polished website to stand out from their competitors or to get more capital from their investors. Perhaps their feature backlog is ever-changing, or they have many fundamental issues with their vision. In this case, traditional wireframing, then comping, may be the most efficient way to prototype their needs for their users.

Many clients see visuals as results. Sometimes it's more effective to deliver 10–20 high fidelity comps in one week as opposed to 1–5 working, but uninspiring, pages.

The system and layouts of the website in question are too complex to visualize and code at the same time. We're human. Most of us have limited brain capacity to think in two spheres. Whereas some may tell you that coding and designing go hand in hand, it's really tough for me to envision a complex layout with many moving parts while writing divs for it at the same time. Studies show that we suck at multitasking, and designing in browser often feels that way. Granted, time and experience will definitely make you better at visualizing faster and writing cleaner code. So keep at it.

This sometimes happens. Like, whaaaaaa?


You're in the "refinement" stage of design. Let's say you're past the point of MVP with your project. You have a working website with a decent layout, and you're ready to add more features. If your users have expressed pain points over certain design decisions you made in browser, like maybe that call to action wasn't clear enough, or they don't know what to read first on the page, it could be an opportunity to jump back into Photoshop and revisit those pain points in a thoughtful, refined way.

To me, the biggest challenge of designing in browser can be summed up by Andy Budd:

As the best design tools are the ones that put the smallest barrier between the creator and their creation (the pencil is a good example of this) designing in the browser adds an unnecessary level of cruft to the process.

Andy Budd

To add onto that: You actually enjoy the process and craft of pushing those pixels around on the artboard. Many web designers come from formal graphic design backgrounds. Taking it slow and scrutinizing over every detail is in our blood.

The reasons why we design in browser vary greatly, and the approach we take highly depends on the task that is called upon us. That being said, when the situation does call for designing in browser, here's my take on it.

How do you begin designing in browser?

There are so many ways to begin a project. Let's say for this article, I use the way philosophie typically begins a project with the product owner(s) of a newly incorporated, newly funded startup: a kickoff. Many thought leaders in design, Dan Mall for one, detail ways to facilitate a successful kickoff, so I won't go into the details here.

During our kickoff, let's say we've determined a set of users and their pain points for our product, a brand statement defining the what, why and how, a hypothesis statement that we intend to solve with our first sprint, perhaps even rudimentary wireframes or a feature list. At this point, we've gained a vague understanding of who we're designing for and what the client wants to convey to them.

I like to start off with moodboards. They help to paint the picture of the brand expression without wasting too much of my time and effort. For this, I tend to trawl Pinterest, Dribbble, whatever designer fodder I can find to curate visual options for the client.

Designing in Browser
Even if the visuals change over time, moodboards are easy to create and can act as a quick win to get the client in your favor.

From here, I pick a framework, the skeleton for which to quickly markup the layout and paste in the UI. For marketing or consumer-facing sites, I tend to prefer Foundation because the options are presented to you in the code. They're more rudimentary, in my opinion, and easier to override than Bootstrap. Bootstrap is a robust framework ideal for admin-facing applications. There's less work out of the gate with Bootstrap, but more options to painstakingly overwrite in the CSS.

Next, the style guide. Beginning with a style guide, or a series of "style tiles" is pretty important to keep your design elements organized and succinct within a design system. I won't go into the importance of style guides because the reasons have been well-explained by others, but I will say that a style guide is the easiest way to make sweeping design changes as they come down the pipeline. And that's one of the biggest reasons we design in browser in the first place. I'm accustomed to building style guide UI elements manually on an as-needed basis, but you can use KSS methodology, or even a gem like Hologram to help you automate the generation.

Designing in Browser

Finally, the composition. Something I try to keep in mind: don't lose sight of your design principles. Eye movement, hierarchy, contrast — it's easy to get lost in code. When I used to exclusively design in Photoshop, it enabled me to think more conceptually and granularly about the design: I could experiment more with new ways to call to action, a new layout, a compelling animation. Designing in browser fundamentally prevents you from thinking outside the box in that regard. The easiest way for me to do it is to go from lowest fidelity to highest. That means, plain text, then html markup, then add framework layout, then add selectors, then style selectors in CSS.

Designing in Browser
Plain text, then html markup, then add framework layout (Foundation in this case), then add selectors, then style selectors in CSS.

Using browser tools

So you've gone and created the first iteration of your site in browser, and it's time to review with the client. This is where the magic happens. Rather than the typical unending back-and-forth design loop, you can potentially take care of most to all design feedback in one meeting. Here's how I use the inspector in Chrome:

Designing in Browser

We decide to add a new content column in a section on the page. Open inspector, "edit HTML", copy and paste column. Boom, new column. Screenshot the change.

Designing in Browser

We need to increase the size of a radio button, tucked inside a form. Click magnifying glass, right click the button. The magnifying glass hones in on an element nested inside a parent. Make the changes in the styles. Screenshot.

Designing in Browser

We need to change the color of something, make something bigger, anything related to style. Edit styles, screenshot screenshot screenshot.

Designing in Browser

Note that I prefer taking screenshots over using Chrome tools to save the code. This is because using the inspector is not the way to generate the most beautiful, semantic code; it's just a cheat to experiment with a design decision or get approval from a client. Using screenshots, however, lets you preserve the change and figure out the best way to integrate that with your code base later.

Working in teams

Disclaimer: philosophie uses Pivotal Tracker as the project management tool of choice, and usually Ruby on Rails as our go-to stack.

Rather than a typical waterfall-oriented design process I described in the beginning of this story, designing in browser allows you to work in sprints with the rest of your team. The first sprint may consist of chiefly foundation or bootstrap styles. This is merely the MVP design. From there, the second sprint can slowly work on the branding, revisit typefaces, improving hierarchy, and other improvements you and your team have decided. You can even enter the refinement period here and use Photoshop, which I mentioned earlier.

As for how we integrate design stories into Pivotal Tracker, I've found that it's been effective to create user stories for front-end tasks, separate from back-end stories. This way, you can let design run ahead of development, or let the engineer create models and controllers first, leaving you to style the view. It's interchangeable.

For instance: while you as the front-end dev can create and style the static pages such as the homepage, a contact form, or text page, the back-end dev generates inputs and views for the login. Then, the front-ender can jump on the login pages and style them.

Designing in Browser
The same user story, but the view layer (front-end) is tagged and separated from the other part of the story

How has this worked in the "real world"?

On a recent client project, we determined that designing in browser was the best way to keep within budget but still deliver a fresh, clean look. I quickly mocked up layouts and pages in using Bootstrap as my framework and Sublime Text as my text editor, making low-hanging-fruit improvements where relevant. I also worked in tandem with developers as I mentioned in the previous section, taking on front-end stories and bugs while they worked on the back-end.

Midway through the process, the client wanted to explore new home page directions. Not wanting to limit myself on design, I decided that Photoshop was the best way to execute several well-composed iterations of the home page. It was relatively painless to go through a couple of rounds of feedback on just one page.

With these new styles composed in Photoshop, and with my UI elements in place, I merely had to change the styles in one place, and the whole site conformed to the new homepage design.

Concluding thoughts

There is no end-all-be-all to designing for the web. Just because you mostly design in browser doesn't mean you should give up Photoshop.

For me, the most valuable aspect of designing in browser is to curtail the pain that comes with traditional design process and to work with your team in the leanest way possible without having to sacrifice of your own design principles.

Tuesday, February 17, 2015

Frequently Used Functions in Magento Development

Magento Development
Magento is a very powerful and thus slightly difficult to tame CMS. It is built on the mighty Zend framework, and it often becomes a difficult task to create or edit Magento templates. Here in this article, I'll try to compile a brief list of useful Magento template development functions, which are used frequently during theme development. We have to cover a lot in this article, so without further ado, I'll start explaining the functions.

Sunday, September 28, 2014

All You Need To Know About Vertical-Align

Vertical-Align

Often I need to vertically align elements side by side.

CSS offers some possibilities. Sometimes I solve it with float, sometimes with position: absolute, sometimes even dirty by manually adding margins or paddings.

Tuesday, July 29, 2014

Hot User Input Design Patterns for Mobile

Hot User Input Design Patterns for Mobile

A Deeper Look at Patterns Designed by the Hottest Apps Today

In this article, Chris Bank of UXPin – The UX Design App discusses the importance of user input design patterns and details examples from some of the hottest mobile apps today – more examples of these patterns and over 45 additional mobile design patterns are covered in detail in UXPin's free e-book, Mobile UI Design Patterns 2014.

Tuesday, July 29, 2014

HTML Imports: Import HTML Files Into Another HTML Files

HTML Imports

Most of us are familiar with <script src> which we use in loading JavaScript, <link rel="stylesheet"> for CSS, <img> for images, <video> for videos, and <audio> for audios. But we don't have a more declarative way to load HTML. Whilst It's possible to load HTML with iframes element or the JavaScript method XMLHttpRequest(). HTML imports provide a much cleaner way to load self-contained components into web pages.

Sunday, July 20, 2014

How to Create Your Own HTML Elements With Web Components

Web Components
Web Components are currently and excitedly being talked about as an upcoming "tectonic shift for web development" with the promise of permanently reshaping the web design landscape. Big players are moving forward to bring web components into reality. Both Google and Mozilla are already gradually rolling out native browser support.

What are web components you ask? In a nutshell, web components give you a way to create your own custom HTML elements which can do just about anything you need them to. Instead of loading up your sites with verbose markup, long scripts and repetitive code, you wrap everything up into nice, neat little custom HTML elements.

Wednesday, July 16, 2014

Optimising for 60fps everywhere

Optimising for 60fps everywhere

With the latest update to GoSquared we set ourselves the target of achieving a smooth 60 frames per second for all the core UI and animation, across all devices.

Tuesday, July 01, 2014

15 Must-Have Mobile App Development Tools

Mobile App Development Tools - Corona SDK

A lot has changed since 1995, literally anyone with almost no technical capabilities can crank out a web or mobile app with ease. So I thought I'd take the opportunity to share some of the more interesting app development platforms I've discovered recently.