Web Sites That Focus On Readability

I am gathering sites that put the emphasis on reading experience. If you have any suggestion, please send them my way. Here are a few I have collected:

A List Apart

With its latest redesign, A List Apart dropped the sidebar and focused on the contents. The pairing of Franklin ITC Pro and Georgia Pro makes the reading experience so damn pleasurable. Unlike most sites with long articles, A List Apart is to be read on its own domain rather than through an RSS reader or Instapaper.

iA

Oliver Reichenstein doesn’t write often, but his articles are must-read when he does. “Learning to See” is one of my favorite reads on design. Furthermore, the blog section is crisp and beautiful with its own iABC typeface.

Mark Boulton

Mark Boulton’s blog is set in sensational slab serif Sentinel. The line-length and the leading are perfect for reading pleasure.

Medium

In addition to good contents, Medium puts emphasize on readability. The paring of JAF Bernini Sans and Freight Text Pro makes Medium a fantastic place to read on any device.

Rand in Repose

The pairing of Sentinel and Ideal Sans makes Michael Lopp’s blog gorgeous, legible and readable.

Stuff & Nonsense

Despite its closed aperture, slab serif Jubilat looks surprisingly good as body texts, especially at a very thin weight. Other than the line-length, which is a bit too long at full screen, the site looks delightful.

The Great Discontent

Get past the striking photos and you’ll get to read inspiring interviews of artists and designers from various creative industries. I am not too crazy about the thin Stratum as heading, but FF Meta Serif as body text isn’t so bad.

Trent Walton

This is one of my favorite art-directed blogs. Even though each post has a unique look and feel, the body text is anchored in FF Meta Serif Web Pro.

How Fast Can You Make a Site?

From a potential client:

Do you use Word Press as your open source to customize the website as per your client’s needs? Are you familiar with e-Commerce Zen Cart or Joomla? and what would the cost be using of any e-Commerce open source package with Content Management System? Can you finish the website within a few days? Pls advise.

Obviously I didn’t get the job. Although I replied to the request and wanted to learn more about the project, I couldn’t pull something like that in a few days. Even if I have a team of designers and developers, it would not be possible. The complexity of an e-commerce site needs time to work out. The user experience needs to be well-thought out and the security needs to be tight.

Truth be told, I have never missed the client’s deadline. The holdup is mostly from the client. From the beginning of the project, I try to get as much contents as I could, but that’s not always possible. Without contents, I can’t get the project rolling. If I don’t get anything after a three or four reminders, I have to put the project aside until the client is ready. When that happens, my passion for the project is somewhat weakening because I feel as though the client’s heart is not in it. A client should care about her project more than I do if not as much.

How fast I can work on a site depends on the client. I have a rule that I won’t start a project until I get at least 50% of the contents. Like most things in my life, I don’t follow my own rules from time to time.

Latest Podcasts

Lately I have added more podcasts that aren’t related to web design and technology. Terry Gross’s “Fresh Air” has been one of my favorites at the moment. Really like her interviews as well as the diversity of topics. The one that I was trying to go through as many episodes as I could when I was on vacation was Grammar Girl’s “Quick and Dirty Tips for Better Writing.” She has so many great tips on grammar. I get a taste of latest music through NPR‘s “Music Interview” and the New York Times‘s “Music Popcast.” I am also subscribing to “TEDTalk.”

New Toys

I am now rocking with a brand new MacBook Pro with Retina Display and a 27-inch Thunderbolt Display. The Retina quality is simply stunning. Spent all day at work transferring all the software and files. Using the Migration Assistant would have been much faster, but I wanted to start fresh rather than bringing all the old junks over.

I had the old MacBook Pro for almost two years, but I actually don’t have much in it. I tried to keep my baby as clean as possible; therefore, starting from scratch isn’t a big deal. Google Chrome rocks. All I have to do was logged in and everything I had from the old laptop are there on the new one. As far as softwares go, I only had a handful. My IT man installed Office and Adobe Suite for me; therefore, I only had like a few programs to install.

The performance of the new MacBook Pro is doubled my previous one in term of memory, processor and storage and yet, the new laptop is even lighter. Very impressive.

About six months ago, I took my computer bag out of the trunk and accidentally dropped the old laptop on the driveway. One of the corners has a dense. I thought I broke it, but it still works great to this day. I am still glad to have it replaced though. My boss rocks, too.

Preliminary Process for Client Projects

After clients and I agreed on our contract, I would go through the preliminary process with them to get the project started. Although I have been doing this with each of my client, it only occurred to me last week, as I as doing the same thing with a new client, that I should put together a list of tasks my clients must complete in order for me to do my part. From now on, I just refer them to this post.

Do you have a domain name?

If not, you need to register your domain name. I use GoDaddy for all my domains. Even though I have heard not-so-good stories about GoDaddy, I haven’t have any problem with it. If you don’t trust GoDaddy, use Network Solutions or Hover. I heard good things about them.

Do you have a hosting provider?

If not, you need to sign up for a hosting plan. I highly recommend Lunarpages. I haven been with the company for over ten years and very happy with its service. For most of my clients, the Lunix basic hosting is sufficient. At the time of this writing, the plan is starting at $4.95 a month. The only extra add-on you need is “Premium Restore Service.” The extra cost of $1.50 a month is definitely worthwhile just in case something goes wrong with your site and needed a quick restoration. If you need other plans or services, we can discuss first before making the purchase.

Do you want to track your web site?

Tracking your site is optional, but I highly recommend it. Google Analytics allows you to see how many people visited your site. Where they are coming from and so much more. If you already have a Gmail account, signing up with GA is very easy.

Disclaimer

I am not affiliated with any of the companies mentioned above; therefore, I am not responsible for their services. The recommendations are based my own experience. You should feel free to sign up with any company you feel comfortable with. Regardless of which company you go with, I will work with them on your behalf to make sure your web site functioning as I have proposed in our contract. If you have any question or concern, do not hesitate to contact me.

What’s Visualgui Anyway?

Visualgui turned 10 last week. When I registered this domain at GoDaddy on April 8, 2003, I didn’t expect the site to last this long. At that time, I faced with bad hosting providers and domain services. Prior to Visualgui, I lost D3studio.com, which was my first site. D3, which stood for Donny Digital Design, started when I was still in college as my web design portfolio and studio. After the site went down for a week, I could no longer contacted my host. The company, which also registered my domain, went out of business. As a result, I lost everything. Lesson I learned from that experience: never put all of my eggs into one basket.

In April 2003, I decided to start from scratch again. I separated my domain from my host and did an in depth research of hosting providers. I am so glad I chose Lunarpages and been happy with them ever since. Although GoDaddy has a bad rep for its services and commercials, I don’t have any problem in regard to domain registration.

While searching for my new name, I came across a web site that listed the latest domains that became available. I can’t even recall which site it was. One of the names stood out to me was ChunkyGui.com and I immediately thought of VisualGui. The name was still available and I took it. Though I refer to it as the “Visual Guy,” the pun was Visual Graphical User Interface.

After ten years of associating with this brand, I wanted to make it more relevant to my current design direction and sensibility. Rather than referring to my design as “Visual Graphical User Interface,” the new brand refers to design “Visual” that “Gets Users Involved.” Whether reading a blog, buying a product or using a service, users are involved in the process; therefore, I want my design to focus on the involvement of the users first and foremost. My goal is to provide an easy, pleasant experience for users to accomplish their tasks no matter which device they are using on their hands. User-centered design has played a major role of my work for many years; therefore, the change is a natural fit.

Last week, I refreshed this site making it a seamless experience across multiple devices. The redesign was also to quietly celebrate its 10th anniversary. I was not planning on making the announcement, but the rebrand needed the background history to see how the name has evolved.

Happy Monday

I have been fan of the Happy Monday podcast. Josh Long and Sarah Parmenter are doing a fantastic job of brightened my Monday commutes. The latest episode with Rachel Andrew is quite nice. I have listened to Rachel in other podcasts and I am a fan of her work, but I really love her voice. Something about her British accent and perfect enunciation sound very soothing. I actually caught up with all of the Happy Monday episode. Keep up the good work, Sazzy and Josh.

Learning to See Material Honesty on the Web

Two exceptional essays on web design and user experience. Oliver Reichenstein’s “Learning to See”:

In general, more advanced design is also less visible unless you’re looking for it. The customer doesn’t need to be bothered with the sketching and production of the object in order to use it. What the customer wants to understand is how the product is supposed to be used. There, the designer should aim to be as transparent as possible.

Kevin Goldman’s “Material Honesty on the Web”:

After the concepts are resolved through pen sketching, designers can work honestly with clients and design in the browser to bring the visual ideas and prototypes to life.

The Jazz Board Game Rules

Players: 2-6
Age: 12+ years

Contents

Game Board
100 Question Cards
50 Music Samples
6 Movers
1 Dice

Object

Answer questions about jazz to advance along the board. Player who reaches the final destination first wins.

Set Up

Each player selects a mover and sets it on the board’s start space.

Cards

There are four sets of cards. Each set has its own color and category.

  • Album: Questions related to jazz albums
  • Artist: Questions related to jazz artists
  • Style: Questions related to jazz styles
  • Terminology: Questions related to jazz terms

Audio

A jazz application that plays 10-second sample of a jazz tune. A smartphone or a computer with internet connection is required to access the application.

Board

The path is made up of spaces with the same colors as the cards with the exception of black and audio color. For the black space, the player gets to choose which question he wants to answer.

How to Play

Each player rolls the dice to determine who goes first. The highest roller starts. The first player rolls the dice and moves according to the number on the dice. The color of the space he lands on determines the question he would be asked. If the player provides the correct answer, he gets to roll the dice again and advanced until he misses the question.

Challenge

If one player lands on the same space as another player, he has two choices to make.

  1. He could answer the question himself. If he answers the question correctly, he gets to advance and the other player gets sent back to the beginning. If he misses the answer, he gets sent back to the beginning.
  2. He could challenge the other player to answer the question. If the other player answers the question correctly, he is safe and the challenger gets sent back. If the other player answers the wrong question, he gets sent back and the other player stays.

Bonus

For each audio challenge, each player only has to answer either the artist or the title of the tune. Once he answered the first part correctly he could answer the second part for a bonus point. If he answers the bonus point correctly he gets to advanced one space. If he misses the answer, he moves back one space.

To Win

A player must land exactly on the last red space. Once he is on the last red space, he must answer both parts (the title and the artist) of the audio challenge correctly to win.

Once the player reaches near the winning zone, he must roll the dice until he lands exactly on the last red space. Even if he couldn’t land exactly on the last red space, he could still answer the question related to his current space and roll again. If the player in the last red space gets the question wrong, he stays there and play continues as it is a normal turn.

Security Challange

My lovely wife wears many hats. In addition to taking care of me and my boys, she’s my only usability tester and browser checker. Every time I make some front-end updates to this site, I would call her up to ask how is my site looking on her IE8.

For the past few weeks, she said that the homepage banner doesn’t show up on IE8, which is intentional if I am using an SVG banner. A few days ago, she called me and said, “Is your site hacked? I keep getting the CAPTCHA box.” I then realized that I set the security on CloudFlare really high. As a result, if CloudFlare thinks you’re a spam, it will ask you to fill out CAPTCHA.

I went back into CloudFlare today and turned down the security setting down a bit. You still need to fill out CAPTCHA, but it won’t expire for a month. I apologize if it is causing you any inconvenience of accessing the site, but I rather be safe than sorry.