Sarfaraz A. Hanfi

How LESS can make your life easier

sarfarazhanfi — Tue, 27 Jul 2010 21:37:42 +0000

I’ve started using LESS a few months ago on a Tribune News projects. LESS allows you to extend the way you write CSS, letting you use variables, nested selectors, operations and mixins. It sounds great — and it is great — but there are a few things that can make it work against you. These are some of my thoughts on LESS.

What is LESS?

LESS — Leaner CSS — is, in the authors’ own words, a “new version of CSS” (better yet, of writing CSS), that is then compiled into “traditional” CSS using the LESS compiler.

There are 4 main things you can do with LESS that you can’t with normal CSS:

1. Variables

You can define a variable, such as “@text-color”, and use it throughout your stylesheet. If the colour of your text changes, you only need to change it once in your CSS — where the variable is initially defined.

2. Nested selectors

With nested selectors, instead of doing this and repeating yourself:

.top-story h1 { font-size: 24px; } .top-story h2 { font-size: 18px; }

.top-story { h1 { font-size: 24px; } h2 { font-size: 18px; } }

3. Operations

You can add, subtract, divide and multiply using operations. Here’s a quick example:

@content: 468px; .top-story { width: @content; }

4. Mixins

Mixins work a lot like variables, but you can specify a whole class in one. For example:

.b-radius { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .box { .b-radius; }

This is not a “how to” guide

The official LESS documentation is very clear on how to install it. I have to admit I usually stop reading instructions whenever “Terminal” is mentioned (and I know more people do), but I guess most CSS authors will be OK with it — if not, ask for help to your nearest web dev (or email me and I’ll give you the phone number of one).

After it’s installed, you’ll have two files: the .less file — this is the file you’ll be working with — and the compiled .css file.

There’s also LESS app, that makes it easier to use LESS. And I suppose that some CMS and servers let you use LESS directly, but the point of this article is not to teach anyone how to install it — it’s to go through its good and bad points.

How many does your news site do?

sarfarazhanfi — Thu, 22 Jul 2010 00:00:52 +0000

Here are some ways to improve your news site.

Take a look and then add your own great ideas to the list…

Post a form at the end of a breaking news story asking witnesses to send in details of what they saw — and then add the information you can verify to the story.
Invite anyone in your community to write Weblogs for your news site
Take the best content from Weblogs on your news site (now that you’ve got so many) and publish them in your newspaper.
Integrate headlines from your competition into your Web site
Give everyone in your company one day off a month to work on whatever project they want or simply just brainstorm new ideas
Build a real estate database and section so detailed and useful it becomes the MLS for your community. (realestate.nytimes.com)
Create a staff development plan so that everyone in your company gets pertinent online news training within the next 12 months.
Design your registration system so that you have an easy way to get updated information when people move, so your data stays more valuable to advertisers
Give people who register for your site incentive to keep giving you updated information.
Ask readers their interests when they register and only serve them ads related to them when they visit your site.
Offer a subscription where people can view the entire site ad-free for an extra charge.
Double the size of all photos on your site for a week. See how readers react. Wanna bet you decide to keep at least some of them larger permanently?
Don’t just add “Discuss story” links to stories — include the comments at the bottom or on the right rail of the page and make them part of the visible story
Put only local news and content on your home page
Create RSS feeds focused on niche topics your site covers.
Let your readers post certain classifieds for free.
Build a feature into your site enabling readers to add notes to any stories on your site, like Amazon’s new A9.com site does.
Offer free access to all your archives to newspaper subscribers — but only to subscribers.
Have readers send in photos and make slide shows from them
Pick the best posts on your message boards and highlight them in separate features — or on your home page — so readers don’t have to dig through
Use the Weblog format to cover a breaking news event
Figure out which writers or TV reporters always write too long for air or the paper and offer them an online column
Have popular columnists supplement their regular column with an e-mail extra… Only let newspaper subscribers get it
Let readers vote on their favorite local school sports player and give winners a symbolic award
Have newspaper or station top editor send e-mails to all e-mail subscribers occasionally to let them know how the newspaper or TV station is improving
Hold short story contests and print winners online
Tell an entire story that would normally be written in plain text entirely through a slide show
Sell prints of your front pages online, plus current and back issues
Offer special fan e-mail newsletters for local sports teams
Send readers news alerts through instant messenger tools
Allow advertisers to put photos online with classified ads and signal to newspaper readers to go online to see them
Create special news alerts for whatever topics are hot among local readers
Create topic-specific photo galleries on random, fun topics (dog slide show; smiling people slide show; etc.)
Use the Web to ask readers for fresh ideas. Actually read them. Choose at least one and actually do it.
Rotate content on your home page based on dayparting usage.
Make sure all ads are clearly labeled. For real.
Create a reader-appreciation week and have no pop-ups or animated ads all week.
Offer readers an ad-free version of your site for an extra cost
Give local politicians or newsmakers or experts Weblogs on your site.
Link datelines on all stories to pages with maps and information about the location (perhaps on a partner encyclopedia site)
Create a site-wide disaster coverage plan
Cut the number of links on your home page in half. See if your traffic and page views change at all.
Offer readers a way to save articles they like on your site for later reading and create a personal page for them with all of those stories
Let readers vote on their favorite stories and photos and post those lists online

@font-face tutorial and user guide by Milton Bayer

sarfarazhanfi — Mon, 28 Jun 2010 10:30:13 +0000

@font-face tutorial and user guide by Milton Bayer.

@font-face file types

We need the following file types in order to have the full 92+% support. (as per: http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/ )

Internet Explorer (all versions): EOT
Safari (3.2+): TTF / OTF
iPhone (3.1) SVG
Chrome (all versions): SVG (TTF/OTF added 25th Jan 2010)
Firefox (3.5+): TTF/OTF (.WOFF added 3.6)
Opera (10+) TTF/OTF

So, .eot + .ttf /.otf + svg + woff = best support possible.

Best Use CSS Font-Family Samples

sarfarazhanfi — Mon, 21 Jun 2010 18:09:51 +0000

I often have to scramble to try and find just the right font-family for a site I am working on, so I created this little cheat sheet for myself. I decided it might be useful for others as well, so I’m sharing it here. Included are the various font-families that are typically used, along with a representation of what they look like. Keep in mind that not every computer has every font, so any fonts you don’t have will display the default generic font family instead (sans-serif, serif, or monospace). I just cut and paste the code in gray when I want to use one of these in my CSS.

Sans Serif

Sans serif is generally best for most text on screen.

Common Version:

font-family: Arial, Helvetica, sans-serif;

» Arial – The quick brown fox jumps over the lazy dog. 1234567890

» Helvetica – The quick brown fox jumps over the lazy dog. 1234567890

More Choices:

font-family: Verdana, Arial, Helvetica, “Trebuchet MS”, Tahoma, Geneva, “Lucida Sans Unicode”, “Lucida Grande”, “MS Sans Serif”, sans-serif;

» Trebuchet MS – The quick brown fox jumps over the lazy dog. 1234567890

» Verdana – The quick brown fox jumps over the lazy dog. 1234567890

» Tahoma – The quick brown fox jumps over the lazy dog. 1234567890

» Geneva – The quick brown fox jumps over the lazy dog. 1234567890

» Lucida Sans Unicode – The quick brown fox jumps over the lazy dog. 1234567890

» Lucida Grande – The quick brown fox jumps over the lazy dog. 1234567890

» MS Sans Serif – The quick brown fox jumps over the lazy dog. 1234567890

My Favorite:

font-family: “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

Serif

Serif is generally best for text designed to be printed.

Common Version:

font-family: Times, “Times New Roman”, Georgia, serif;

» Times – The quick brown fox jumps over the lazy dog. 1234567890

» Times New Roman – The quick brown fox jumps over the lazy dog. 1234567890

» Georgia – The quick brown fox jumps over the lazy dog. 1234567890

More Choices:

font-family: Times, “Times New Roman”, Georgia, Garamond, “Palatino Linotype”, Palatino, “Book Antiqua”, “New York”, serif;

» Garamond – The quick brown fox jumps over the lazy dog. 1234567890

» Palatino Linotype – The quick brown fox jumps over the lazy dog. 1234567890

» Palatino – The quick brown fox jumps over the lazy dog. 1234567890

» Book Antiqua – The quick brown fox jumps over the lazy dog. 1234567890

» New York – The quick brown fox jumps over the lazy dog. 1234567890

My Favorite:

font-family: Garamond, Georgia, Times, “Times New Roman”, serif;

Monospace

Monospace is generally best when representing code or typewritten text.

Common version:

font-family: Courier, monospace;

» Courier – The quick brown fox jumps over the lazy dog. 1234567890

More Choices:

font-family: “Lucida Console”, Monaco, Courier, “Courier New”, monospace;

» Lucida Console – The quick brown fox jumps over the lazy dog. 1234567890

» Monaco – The quick brown fox jumps over the lazy dog. 1234567890

» Courier New – The quick brown fox jumps over the lazy dog. 1234567890

My Favorite:

font-family: Courier, “Courier New”, monospace;

PNG Solutions for Web

sarfarazhanfi — Mon, 14 Jun 2010 14:33:33 +0000

PNG-24 is what most web developer’s use for transparency on the web. It tends to have large file sizes but provides excellent transparency. Using PNG-8 or GIF for transparency doesn’t work near as well… at least normally! There is actually a way to use PNG-8 transparency that is better than PNG-24.

Some benefits are that most of the time it results in smaller file sizes. PNG-24’s are huge culprits of being massive and being a real pain for visitors with a slow internet connection. As well as this, PNG-8 Alpha Transparency actually renders decent in IE6, so no need for those css/javascript hacks to get it to look right.

The trick involved here is that you cannot simply use Photoshop. You have to use Fireworks to create the effect needed. View the screencast above to get shown exactly how to do this!

Now, if you are new to Fireworks (like me), the workflow is a bit different than Photoshop. Let’s start by opening up our PNG-24 image saved out of Photoshop, and switching to the export Preview view.

The Export Preview is essentially the same thing as Photoshop’s Save for Web tool. Look over to the right in the above graphic at the Optimize and Align panel – those are the settings it’s using. Let’s update that to PNG-8, and the Alpha Transparency option.

Fireworks to the rescue:

Open your big Photoshop-exported PNG-24 with nice alpha transparency in Fireworks.
Change the file format to PNG-8.
Change the transparency option to “alpha transparency”
Rebuild and export your PNG-8
Revel in the MUCH smaller file size

BluprintCSS Framework

sarfarazhanfi — Tue, 16 Mar 2010 00:15:32 +0000

The newest version and newest tools make this CSS framework very useful for many page layouts.

If you are involved in web site development in any capacity then you probably know that table-based design layouts have been, for the most part, completely abandoned in favor of CSS controlled layouts. Not only are CSS-based layouts just tons more capable, they also have more of a separation between the code that provides content and structure of a page layout and the code that defines how the page looks. It is SO nice these days to not have to look at page source that is crowded by a bunch of font tags that only define the size and color of text on the page. Server bandwidth has definitely benefited from this switch and CSS-based pages download faster. It has been so long since I have coded with tables and font tags that when I have to do layouts with tables and fonts (this is still the safest way for HTML emails) I find myself checking references to remind me of some of the attributes for these HTML tags.

The Controversy

When BlueprintCSS was presented to the public it was both embraced and criticized. Reading the comments in the tutorial section of the Wiki gives you a hint of the controversy over a CSS framework. The main criticism is that in order to use the layout grid system of BlueprintCSS (really the best part) you have to put class names within the HTML that defines display attributes. To some developers, this completely “breaks the rules” or goes against some of the goals of CSS. This could prevent the layout from being changed by just changing the CSS that is styling it – which is the big argument for keeping display or non-semantic code out of the HTML. This ability allows developers to easily switch layouts based on what device is viewing the page, whether it be a web browser on a PDA, phone, or computer. This is a strong and valid argument against a system like BlueprintCSS, and I think just like any other programming technology a developer needs to weigh the site’s requirements against the advantages and disadvantages of that given technology. Also to completely discount a new technology you need to investigate it and use it. With some of the new tools out there for BlueprintCSS, especially the Blueprint Grid Generator, I am not so sure that doing a layout switch based on a viewing device is completely impossible.

The other argument against BlueprintCSS is that it doesn’t take into consideration the source order of content, thus reducing the Search Engine optimization by not keeping the “real” content of the page up high in the source code. Some developers have posted CSS solutions to this. I am not an SEO expert and cannot verify whether this is really a valid concern. Do Search Engines like Google really stop at 50 or 100 lines of source code when they are indexing a page? I would really like to know the answer to that question. Looking at the source code of many e-commerce sites that consistently rank high, I have my doubts about this argument.

Some developers also don’t like CSS frameworks because they are worried about new developers using them as a crutch and relying on the framework to do all the work. They worry that new developers won’t take the time to really learn such an important language like CSS. Perhaps, those inclined to take shortcuts always will. In my experience with Blueprint I have found that it doesn’t do everything for you. Using it still requires a good knowledge of coding CSS and a thorough understanding of CSS concepts like the box model, inheritance, and the difference between id’s and classnames.

The Coolness

Still with these semantic issues aside, I don’t think anyone can deny that it is a clever collection of stylesheets. The first time I tried it when was i had used Framework for ExpressNews Sites, and second one is our Group Company’s Site. www.lakson.com.pk

I was able to code the base structure for a custom 3-column layout with header and footer in about 15-20 minutes – and it had support for printing and IE 6. To me, this is a really, really cool thing! Excited, I then used it for a custom WordPress blog theme and I was quickly able to move from creating the HTML templates to styling every little element within the blog to match this new theme. I can say it cut the time to do this by at least a third. Hooray for Blueprint!

Nothing’s perfect
It definitely speeds up coding HTML templates with BlueprintCSS if the designs were done on the same grid that the CSS framework is built on. Designs not on the grid do take a bit of extra code and tweaking. Steven here at Moto has done a couple of web page designs based on the standard BlueprintCSS grid and he said that he really didn’t find it all that restrictive. A really unusual site design may completely negate the advantage of using Blueprint. Nothing works perfectly for everything. On the other hand, with new tools like the Blueprint Grid Generator the grid dimensions might be very easily changed to fit the design.

The other small “gotcha” with Blueprint is that if you have the need to really stray away from the base typography style sheet – especially the spacing – you need to be sure and thoroughly override the style selectors for common HTML elements like headings, paragraphs, list elements, etc. Override? Yes, I leave all the files of BlueprintCSS alone and add a link tag or import statement for a separate CSS file that holds all the styles for the design that I am creating templates for. I call it something like “theme” or “layout” and I +make sure that the reference to this style sheet is after the references to the Blueprint CSS files. Using this method allows the Blueprint files to be updated and overwritten without affecting the customized styles. I think this is the intended use and I think the way most developers are using the framework – if they choose to use it.

If you haven’t noticed, I like this new tool
The BlueprintCSS framework is a very clever and useful tool for web developers, but it is not a magic-do-everything tool in the toolbox. There are probably going to be cases in my job where using BlueprintCSS doesn’t make good sense. For many of the designs that I code templates for it is going to come in very handy and cut down on coding hours. I can see it being especially useful for web applications like web administration tools or content management systems. The new Blueprint Grid Generator especially made the framework more useful. I look forward to new versions of BlueprintCSS. Hopefully it will continue to grow and mature.

15 graphic design interview tips

sarfarazhanfi — Fri, 08 Jan 2010 13:18:52 +0000

When you arrive in the interview give us your business card. It should be well designed, memorable, simple and hopefully have a great idea. It should be unique and you should be branded.
Have 8–12 pieces of work in your folio. Put the best pieces at the front and back.
Have at least six questions ready to ask (if you have less, you’ll find they will be answered in the course of the interview).
Take a pad and pen, take it out at the beginning of the interview. You don’t have to take notes, but it looks as if you are organized.
Talk about your work before you show it, but don’t talk too much. This should be one short sentence to engage the interviewer with you. We will be looking at you as you speak. Then show us your work.
Have samples and mock ups.
Bring sketches. We are as interested in how you got to the final solution as the solution itself. You can show other concepts.
Have a copy of your CV (resumé) at the back of the portfolio. Offer it even if we already have it.
On your CV don’t tell people about exam results or part-time jobs that have nothing to do with your chosen career. It pisses us off.
Don’t talk about holiday or money in a first interview.
Give a firm handshake.
Tell us you really want the job (believe it or not, hardly anyone does this).
Ask for our business card(s).
When you get back home, send an email thanking us for the interview.
Make sure your branding is consistent on your business card, CV and email signature.
One for luck: Remember, 80% of design students are crap. We see lots of CVs (95% of which are crap). If you can get into the top 20% you will get a job.