Why Relpost?

Huge number of articles are written every day on various subject but its hard to read all of them at once and hard to find quality content. When we google for content and articles, most of the times the results are based on keywords than on actual content. It’s hard to know about the quality of the article without reading it. At Relpost, we make sure that only quality posts are included.

Who gets the pass?

As to maintain the quality of content at Relpost, I add 1-2 related posts a week. After deciding the topic, I collect 10-15 posts and skim each article. Shortlisting 5-7 articles from those, I choose and categorize final 5 posts based on the value of content.

Content precedes Design

At Relpost, Content precedes Design. Being a content-oriented site, I’ve tried to focus more on clarity and simplicity of design for Relpost. The Relpost logo and headings use Calluna while rest of the text is set in Museo Sans via Typekit.

Relpost went through couple of design revisions before this finalized design. I was looking for something simple, clean and more focused on content where the related posts are easy to scan. The source for a particular article is provided on extreme right. Each post is accompanied by popular sharing mediums like Twitter, Facebook, Delicious and Digg.

My wife—Harjot Grewal—customized WordPress as to help me build this dream resource website.

Suggestions

Feedback and suggestions are accepted via Get Satisfaction. Feel free to suggest related posts and features you want to see at Relpost. I hope Relpost will help all my designer friends out there while serving them with fresh content from the hottest web designers and the coolest blogs.

Share the posts you like and give rating to each post you find valuable. Follow Relpost on Twitter and feel free to comment what you feel about Relpost.

Nice Belgian design skills in the new http://gowalla.com by @maxvoltar in collaboration with @keeg, @andrewdupont.

I opened Gowalla.com to see Tim’s input, and as per expectations, he has really done a great job. After browsing through, I landed on the Sign-up page with a few input fields for quick sign up. The last statement, just under the nice Sign-up button:

By clicking on ‘Get Started’ above, you confirm that you accept the Terms of Service.

I looked up the page for the Get Started button but it was nowhere on the page. Soon I realized it’s the Sign-up they are referring to. Another thing which seems a little confusing to me is the Sign in link under Join Gowalla. According to the placement of the labels: Join Gowalla and Already using Gowalla? Sign in, it might create doubt about the form, whether it is for Sign-in or Sign-up.

Suggestions

• I would recommend moving the Sign-in label to extreme right, as shown in screenshot below.
• Replace www.gowalla.com/users to a more user-friendly label Your URL: www.gowalla.com/username as it appears on Twitter sign-up page.
• Replace Get Started with Sign Up which is there on the sign-up page.

Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.

“… font stacks are ultimately design factors, and should be scrutinized as such.”—Nathan Ford, Better CSS font stacks

Pre-installed fonts

Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. —Nathan Ford, Better CSS font stacks

Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. But, there are a few other typefaces which haven’t been tried earlier. Code-style font survey revealed some other common fonts installed on Mac and Windows which can used effectively.

I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. By considering the font-share % statistics in the following table, we can try some other typefaces, but with care.

Font Stacks—Reviewed

1. Microsoft

   Tahoma, Verdana, Segoe, sans-serif;

   Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Segoe (45.04%) has less font share % than Tahoma and Verdana on Windows and will seldom get a chance to render. So, I believe its better to shift Segoe to the front of the stack. I have added Geneva (98.84% on Mac) to the revised font-stack, which is quite similar to Tahoma.

   Suggested font-stack:

   "Segoe UI", Segoe, Tahoma, Geneva, sans-serif;

2. Yahoo

   arial, helvetica, clean, sans-serif

   According to Jens Meiert, using Arial before Helvetica doesn’t makes much sense and he suggest of using Helvetica before Arial.

   Many high traffic websites like: Adobe, LinkedIn, Aol, ebay, You Tube, CNN.com and Mapquest use: Arial, Helvetica, sans-serif;

   99.71% Macs have pre-installed Helvetica and 99.15% PCs have Arial. While building our font-stack we should consider each of these platforms before pointing our finger to default sans or sans-serif typeface. Many designers agree that Helvetica looks terrible on Windows (but only if we specify it below 16px). Here is a comparison of Erskine Design on Mac and Windows, where Helvetica is being rendered at 12px.

   

   Suggested font-stack:

   Arial, sans-serif;

3. Facebook

   "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;

   Facebook, Twitter, Wordpress, Newswine and Basecamp have set Lucida Grande as their primary choice for Mac but missed Lucida Sans Unicode for Windows and Lucida Sans for Linux.

   Lucida Grande (99.13% share on Mac) is a common choice these days. For Windows and Linux, Lucida Sans Unicode (with 98.25% share) and Lucida Sans (with 77.78% share) can be used, but they are missing (intentionally or unintentionally) in Facebook’s font-stack. So as to strengthen the font-stack comprising of Lucida, we should use both Lucida Sans Unicode and Lucida Sans for Windows and Linux respectively.

   Using Arial after Verdana and Times New Roman after Georgia is a very common practice. In both cases, x-height is different and the text varies at a given font-size. Richard Rutter—production director at Clearleft gave the following statement at Skillswap 09 on this issue.

   Verdana appears much larger than Arial, so Arial is not a suitable back-up for Verdana. If it’s not suitable, don’t specify it.

   Suggested font-stack:

   "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;

4. I Love Typography

   Georgia, Cambria, "Times New Roman", Times, serif;

   Cambria is a part of the suite of fonts that come with Microsoft Windows Vista, Windows 7, Microsoft Office 2007 and Microsoft Office 2008 for Mac, specifically designed for on-screen reading. With 54.51% share on Windows, Cambria can be a good choice over Georgia and Times New Roman. However, it makes no sense of using Cambria after Georgia, which has share of 94.20% and 98.55%, on Mac and Windows respectively. Now if ILT is serious about using Cambria as a primary choice, then the revised font-stack should be:

   Cambria, Georgia, serif;

5. Jon Tangerine

   baskerville, palatino, 'palatino linotype', georgia,serif;

   Jon Tan—an expert web designer known for his beautiful web typography—uses Baskerville as a primary choice for his blog’s heading (pith & pulp …), followed by Palatino and Georgia. I’ve added Garamond (23.84% on Mac, 86.24% on Windows), Hoefler Text (88.70% on Mac) and Times New Roman (93.62% on Mac, 98.60% on Windows) to his font-stack and tested in Firefox on Mac so as to find the best possible choices.

   Following are the results in order of decreasing similarity in size and weight (results are ordered to the best of my judgment).

   Baskerville

   Garamond

   Times New Roman

   Palatino

   Hoefler Text

   Georgia

   From the above comparison and after considering the font-share %, we can choose Baskerville (88.60% on Mac), Baskerville Old Face (49.10% on Windows), Hoefler Text (88.70% on Mac), Garamond (23.84% on Mac, 86.24% on Windows), Book Antiqua (86.09% on Windows), Palatino (79.71% on Mac, 98.04% on Windows) and Times New Roman (93.62% on Mac, 98.60% on Windows). Georgia is left out and replaced by Times New Roman as a generic font because Times New Roman is clearly a better replacement for Baskerville while considering the x-height and weight.

   So the revised FS will be:

   Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;

6. Sushi & Robots

   "Hoefler Text", Baskerville, Garamond, "Palatino Linotype", Georgia, "Times New Roman", serif;

   Sushi & Robots is having a nice font-stack crowned with Hoefler Text (88.70% on Mac) which renders beautifully and the site looks amazing on Mac. Garamond and Palatino Linotype are good choices for Windows. However, the typefaces used in above font-stack differs based on x-height. E.g. Hoefler Text, Basekerville and Garamond has comparitivly less x-height than Palatino and Georgia. Based on the difference in x-height, I’ve divided these typefaces into two groups keeping Hoefler Text at driver seat. Following images will help to clarify the matter further.

   Hoefler Text
   Hoefler Text
   Constantia
   Garamond
   Palatino
   Baskerville
   Georgia
   Times New Roman

   If we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond. So, I’ve divided the basic font-stack into two separate groups that can be used while keeping Hoefler Text at the driver seat. You can choose the suitable font-stack among these two.

   "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;

   or

   "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;

“Make sure your font stacks make sense and are useful.”— Richard Rutter, [Skillswap 09]

Revised Font Stacks

I’ve created a font-stack for each typeface while considering the font share table statistics.

Notes:

• Some of the fonts, like: Garamond, Baskerville and Didot are not as readable on screen as Georgia. Feel free to make your own selection.
• Due to smaller x-height; Caslon, Didot, Garamond, Baskerville and Hoefler Text should be set at minimum of 14 pixels or above.
• Lucida Grande, Futura and Tahoma are mechanically obliqued to fake an italic.
• Geneva, Baskerville Old Face and Big Caslon has no bold and italic. They are faked to bold and italic.
• Avoid using Helvetica or Helvetica Neue for body text, especially below 14px.
• Futura, Gill Sans and Franklin Gothic Medium should be carefully stacked and used because of their unusual weight.

Serif font-stack

1. Garamond

   (23.84% on Mac, 86.24% on Windows)Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;

2. Lucida Bright

   (64.90% on Mac, 33.84% on Windows) Huge x-height "Lucida Bright", Georgia, serif;

3. Palatino

   (79.71% on Mac, 98.04% on Windows)Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

4. Big Caslon

   (85.10% on Mac)"Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;

5. Didot

   (87.72% on Mac)Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;

6. Baskerville

   (88.60% on Mac, 49.10% on Windows)Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;

7. Hoefler Text

   (88.70% on Mac, 1.16% on Windows)"Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;

8. Bodoni

   (47.89% on Windows)"Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;

9. Goudy Old Style

   (51.30% on Windows) "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;

10. Constantia

    (53.81% on Windows)Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

11. Cambria

    (54.51% on Windows)

    Cambria, Georgia, serif;

12. Book Antiqua

    (86.09% on Mac)"Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

Sans-serif font-stack

1. Optima

   (90.14% on Mac)Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;

2. Futura

   (91.01% on Mac) Futura, "Trebuchet MS", Arial, sans-serif;

3. Gill Sans

   (91.52% on Mac, 51.74% on Windows)

   "Gill Sans", "Gill Sans MT", Calibri, sans-serif;

4. Trebuchet

   (94.20% on Mac, 99% on Windows)

   "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

5. Helvetica Neue

   (94.74% on Mac)

   "Helvetica Neue", Helvetica, Arial, sans-serif;

6. Verdana

   (96.81% on Mac, 99.40% on Windows)

   Verdana, Geneva, sans-serif;

7. Lucida Grande

   (99.13% on Mac, 98.25% on Windows)

   "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;

8. Geneva

   (98.84% on Mac)

   Geneva, Tahoma, Verdana, sans-serif;

9. Segoe

   (45.04% on Windows)

   Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

10. Candara

    (54.31% on Windows)

    Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;

11. Calibri

    (54.76% on Windows)

    Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

12. Franklin Gothic Medium

    (97.89% on Windows)

    "Franklin Gothic Medium", Arial, sans-serif;

13. Tahoma

    (99.30% on Windows)

    Tahoma, Geneva, Verdana, sans-serif;

“Think about typefaces beyond the core web fonts.”—Richard Rutter, [Skillswap 09]

It’s time… revise your font-stacks

These font-stacks are created after considering the font-share percentage on both Mac and Windows platforms and then checked in browser for x-height and other issues (like: readability). These font stacks are created as per my own understanding and may vary from designer to designer depending upon their choice, judgment and preferences. Any suggestions or improvements will be appreciated. I would love to see some interesting, but meaningful, font-stacks build on my research. Best of luck!

Thanks to Phil Shaw for Code Style and Font survey.

Among the best

Recently, I had this experience. A Way Back was published among the best work of some great web designers: Jason Santa Maria (Bobulate), Andy Clarke (forabeautifulweb), Tim Van Damme (Maxvoltar), Dan Cederholm (Simplebits), Jina Bolton (Sushi & Robots), Andy Budd (Clearleft), Elliot Jay Stocks, Jasse Bennett and more…

Featured in:

Popular Design Blogs

• Web Designer Wall
• Specky Boy
• Outlaw Design Blog
• Web Design Ledger
• Abduzeedo
• Specky Boy
• Wordpress Blue
• Siiimple
• Infinity Style
• Vandelay Design

Famous CSS Galleries

• Best Web Gallery
• Creattica
• CSS Mania
• CSS Based
• CSS Star
• Pattern Tap
• Minimal Exhibit
• Design Fridge
• Make Better Websites
• Best CSS Design
• W3C Sites
• Web Gallery
• CSS Showcases
• CSS Loggia
• CSS Coffee

About this website

The main feature of this blog is its simplicity. I have concentrated more on typography and CSS. Keeping it to the minimum got good results. So, now onwards I will be designing sites powered by CSS and not graphics. I am sure that you must be wondering about the newly introduced— ‘Web Design Oscar’ when you first read the post title :). Hope this will inspire my fellow friends to win the Oscar that I just presented myself with.

With over 173,900 subscribers and 90,300 Twitter followers, Smashing Magazine is well known among designers as a source of high-quality content. Recently, it has been redesigned and Smashing Network has been introduced. But the site needs better Information Architecture and there are a few usability issues as well.

Here are some famous web designers whose work inspires me.

Jason Santa Maria

Graphic Designer/Speaker living in sunny Brooklyn, New York. Serving as Creative Director for A List Apart, recently transitioned from long-time position as Creative Director for Happy Cog Studios. Member of the Board of Directors for AIGA/NY. Stan maintains balance between design and usability.

Favorite work

• Jason Santa Maria
• Theme Magazine
• A List Apart
• Typedia
• AIGA

Inspiration

Simple, clean and intelligent designs enhanced by simple and symmetric layouts, beautiful typography and efficient use of markup & style.

Andy Clarke

Freelance Web Designer/Speaker/Author and founder of tiny studio Stuff and Nonsense in North Wales since 1998. He has been called by various names like: ambassador for CSS, industry prophet and inspiring. He loves making designs for the web, writing about design and teaching it at workshops and conferences all over the world.

Favorite work

• For a beautiful web
• New Internationalist
• Tweet CC
• Liverpool University (site realigned)

Inspiration

Innovative markup & style, beautiful color choice and unique page layouts.

Khoi Vinh

Design Director for NYTimes.com where he leads a full design team in user experience innovation.

Favorite work

• Subtraction.com
• Basic Maths (Wordpress Theme)
• Craigslist Re-design

Inspiration

Grids and simplicity of design.

Other Favorites

• Cameron Moll (elegant and simple designs)
• Dan Cederholm (for simple and bulletproof designs)
• Tim Van Damme (for unique layouts and innovative ideas)
• Jon Tan ( for impressive web typography and minimal designs)
• Mark Boulton (for beautiful typography and symmetric layouts)
• Elliot Jay Stocks (for creativity designs and beautiful background images)

These are some of the best web designers who feed my inspiration every day. Who inspire you the most?

Fun

It was a great experience living and working in Canada. First of all I bought new 24″ iMac (for which I wished for 2 long years) and just within a week I was all set with my small home-office to work in full flow. I worked and stayed at Leamington — a small coastal town near Windsor — and enjoyed the beach, visited Pelee Point, Pelee Island and Niagara falls.

I have already expressed my love for books. It was a great opportunity for shopping (I ordered 32 books from Amazon). While coming back I had a baggage full of books (22kg), all design books, all those books I once wished for.

Opportunities

Around mid of October, I was offered a  job as an intermediate designer at Jonah Group for $40-60. What an offer! But by that time I had my seats reserved for India and by no means I could postpone this trip back home. I had to decline this  but offered my services as a freelance designer.

Future

I have no doubt about future opportunities in Canada. If I would have lived in big city like Toronto, I would definitely have had more offers. There is no doubt that Canada is much more promising and I can have great opportunities which I can never have here in India but again, it depends. So right now I am living relaxed life at home in small village (Mishriwala, near Ferozepur).

Ask the right questions, understand the problem, and explore lots of possible solutions.

— Bruce Mau

Navigation

Navigation is the most important part of any site and one can’t afford to be ambiguous here. Each navigation item should project its meaning correctly. Web design here sounds as a service and Community feels like some group of people at woorkup, which are actually blog categories. As to Submit News a wordpress login screen appears. That’s weird! As a first time user how would I know where and how to register to submit news. RSS Feeds should be RSS Feed. I don’t think that main navigation should take me away from the main site without giving me any hint. RSS Feeds and Advertise do that. The main navigation of a site is supposed to present me with a navigation within the site and not outside. In comparison A List Apart navigation has been designed intelligently and purposefully.

Sub-Navigation

Tags for the posts form sub-navigation at Woorkup. Names like: Apple, Browsers, Documentation, News, etc. makes little sense as navigation and displaying all your tags as navigation doesn’t seem a good idea to me. I’ve read Designing web navigation by James Kalbach and he has given very logical explanation about how to design navigation.

Emphasis

Woorkup has brought new style of emphasizing text in its redesign. Highlighting text with color and border. Creative, but  its too much of emphasizing. Its taking my eyes off from other text in para and forcing me to look at it. Why not use Italics and bold which are specifically made to serve the purpose and are widely recognized.

Call-to-action

Nice call-to-action buttons inviting users to click. But I never thought that Request an invite will launch my email program and I’ve to write a request email with no instruction about what to write. For Add a new post, an unexpected wordpress login screen shows up. Both these actions provide no background about why to ‘Request an invite’, because I can read the posts without being a member via feed-reader and for ‘Add a new post’, I wonder what username and password to enter and how to join (since I am not a member yet). Both these action buttons should explain more, like, why to request an invite, what is its procedure and benefits; if I have to send an email as request invitation, what info I need to provide. These call-to-action buttons should be made more logical for users.

Single post

Now coming to the actual content of the site. Posts. Every post is accompanied by an author picture (most of them are Antonio’s). Do we really need that? What is more important for a reader? Post title or author’s picture? I think post title will be lot easier to scan without author’s picture. Comments link under posts is surprisingly no more a link in woorkup. Rather Tags and Share on twitter which are actually links don’t feel so after I tried clicking on comments. Links should stand out and feel more like links.

RSS link has been placed at all main sections of the site: header, content, sidebar and footer. Come on this is too much of asking for subscribing RSS. Again I would refer A List Apart (which is undoubtedly the best design community site) where they have mentioned Feed just once.

These are few points I have noticed in woorkup.com which I think needs improvement.

Everybody is eager to earn money, more and more money. But do we ever think if we deserve to earn yet, are we eligible for earning. I don’t think one should expect results without efforts. If they (results) come, be grateful to God. In college when companies came for campus placement I never thought myself eligible even once. Because I knew I have nothing to return, at least nothing productive and valuable. These companies are good at making you money making machine but what about you, are you satisfied with what they are doing to you? Like, they take precious time out of your life and put you to do something which, most of the times, you don’t enjoy and this is what happens most of the times.

I never knew I will be designing for the web one day. Never. While in school,  we are pushed to choose either medical science or engineering as a best trade, then commerce and arts for the rest. Arts for those who are not good at studies. Means this is all you have to choose from. I think myself as one of the luckiest person in India, because I am doing what I love to do — design (beautiful and easy to use) websites. I love HTML/CSS. I love typography, grids, beautiful designs (but usable).

I’ve been designing for almost 2 years now and worked with dozen of clients from around half-dozen countries. But I still feel I know nothing about good design, I have lots and lots to learn yet. When I look at work of great designers, I find myself nowhere. But you know, I’m satisfied with what I know and what I have. Because that gives me the power to learn more without being disappointed. Everybody can’t learn every detail of even a single particular subject. As the saying stays true, “The more I learn I come to know how less I know.”

I’m gifted with some really good things. One of those is my approach towards things. Every time I start to learn something new, I research about it online and try to get best possible resources. Same happened when I started web designing. I loved designing before I started it full-time. After college I started to think about designing websites. My friend told me about CSS, I looked around the web and tried to find some e-books, downloaded them, and studied these books for 6 months before thinking about designing for a client.

Now, being in Canada, I have had golden opportunity to buy books which I didn’t have while being in India. Though these books are costly for an average Indian like me but I love books and I’ve bought most of what I need. I’m thankful to God who has shown me the way. Remember, learn before you (expect to) earn.