Recent Blog Posts
Blogs » Archive for April, 2007
Typography: Baseline Rhythm Deciphered
Have your pages got rhythm?
In a previous post I reported on Richard Rutter and Mark Boulton’s web typography presentation at SXSW, where Richard explained the importance of ensuring that the text on your page maintains a “vertical rhythm”.
If you haven’t explored this concept yet, allow me to explain: if you were to overlay your text with equidistant horizontal lines (as if your page was a lined notebook from high school) then those lines should land perfectly between each of the lines of text on the page, regardless of whether the text is a heading, a regular paragraph, a sidebar … whatever. When this occurs, your page is said to have vertical rhythm — the text is easier to read than text that doesn’t line up, as it feels more cohesive and less disjointed.
It’s an easy way to bring some unity to your design without having to think too hard. The math involved is not difficult, but it can become confusing given that CSS allows us to use so many different units. Here …
JavaScript and Screen Readers
The following is republished from the Tech Times #163.
Try to use one of the poster-child Ajax web applications like GMail with a screen reader and you’ll never want to touch a screen reader again. To support those users who don’t have that luxury, then, do you have to do without JavaScript?
The answer to this question ultimately depends on the sort of web application you need to build. Of course, if you’re developing something as silly as a web-based version of Photoshop, you can probably rule out screen reader support at the outset.
Most web applications, however, will fall into a gray area where it’s possible to support screen readers—even without sacrificing any of the JavaScripty goodness you want to deliver to the rest of your user base. The question then becomes, is it practical?
A Practical Example
Setting aside the likes of GMail for the moment, let’s look again at the accordion control that’s built as an example in my upcoming book.
A couple of issues back, we modified this example to make it accessible to keyboard users. All we had to do was include a hyperlink in the heading of each section of the accordion so that …
sIFR 2007: The Roundup
sIFR, the Flash-powered text image replacement technique pioneered by Shaun Inman, Mike Davidson and Mark Wubben burst onto the scene in late 2004 with plenty of fizz and bubble but seems to have lost some visibility over the past 12 months. I thought we’d take a moment to peek at some of the newer stuff happening in the area.
1) sIFR3 : Even sIFRer!
The newest incarnation — sIFR3 — was released in February incorporating a swag of new tricks including:
- using bold and italics together
- using multiple colors
- support for leading, kerning and opacity
- support for Flash filters, blend modes and anti-aliasing
- support for pixel fonts
- improved IE performance
Reid Beels has also come up with a nice variation that may well work it’s way into the main sIFR build — support for gradients.
Reid’s site actually selects the gradient used in his header text based on his current Twitter status. Useful? Maybe not, but a nifty idea nevertheless, and Reid gives a thorough explanation of his gradient method on his site.
2) Making Flash without Flash
One of the main handbrakes on sIFRs wider uptake has been it’s reliance …
ASP.NET and CSS with Expression Web
Recently, Microsoft came out with a new tool for HTML and CSS called Expression Web. Microsoft hasn’t exactly had a good track record with web design; in fact I have had a few projects focused solely on fixing sites made with FrontPage. Since I do a lot of work with ASP.NET and most of my own design work, I put aside my fears and gave it a try.
I used it for a few basic projects and was initially not very impressed. For the most part it felt like a less refined version of Dreamweaver. The However, when I started poking around a bit I found that it was pretty good.
Faster PHP Apps - Profile Your Code with Xdebug
Object-oriented programming is well and truly in fashion, and PHP is no exception. So you’ve adopted the proper design patterns, built your site on the latest PHP framework, and have your database access abstracted so far that you’ve forgotten SQL.
What’s Going On?
When you first move towards object-oriented programming, the first thing you might notice is that you can give yourself a headache trying to follow the execution path through your code and the framework it’s built on.
The next thing you might notice is that your site isn’t any faster - in fact perhaps it’s slower than it was. Object-oriented programming generally aims to improve the quality, maintainability and reusability of code, but sometimes this comes at the price of some raw speed.
So we’ve got potentially slower code, and we can no longer just open up our simple PHP script and follow its execution from the top of the file to the bottom. How do we figure out exactly what’s going on inside?
Xdebug
Xdebug 2 (currently beta - I’m running 2.0.0RC3) is an indispensable PHP extension which provides various ways of debugging and analysing your code on your development server. Today, we’re interested in profiling information for PHP …
Post Level Text Link Ads
I don’t know about you, but I’m kind of excited about Post Level Text Link Ads from Text Link Ads. TLA has been a great source of extra income on quite a few projects and I’m looking forward to this new way to make money with them.
Post Level Text Link Ads will add a small text ad/link at the end of your posts. It’s clean, easy on the eyes and doesn’t take up a traditional ad spot. That’s the appeal of text link / text ads for us. It also opens up thousands of pages for a possible ad placement.
According to TLA’s page:
- Be exclusive to one Advertiser.
- Allow Advertisers to have a full 80 character title and 150 letter description.
- Be positioned directly at the end of top posts making it ideal for click throughs.
- Each ad will be on a single page only.
The “Be exclusive to one Advertiser” and “Each ad will be on a single page only” points are big selling points for me, both as an advertiser and a publisher.
To my knowledge this currently only works with Wordpress and I’ve heard that this may go live as early as Monday. What do you think of this …
Virtualization - Save Time, Money and Sanity
For some time at SitePoint HQ we’ve been making extensive use of virtual servers in our development and staging environment. If you can answer “yes” to any of the following questions then virtualization just might be the thing for you too:
- Have you ever uploaded code or made configuration changes to your production (live) server only to find that your site is broken?
- Is setting up new servers consuming a lot of your time?
- Is hardware in short supply? Do you ever think to yourself: “I wish I had another box to test this on?”
- Do you need an isolated environment for your clients to view your work?
Setting up a multi-server development and staging environment may be cheaper and easier than you think.
The free version of VMware Server combined with the virtualization technology which is now built into most Intel chips is pretty much all you need to get going. And unlike previous versions of VMware, the performance is pretty darn good (with a decent amount of RAM and disk space of course).
In Development
- This is where the fun stuff happens. We can tinker with various configurations and operating systems without requiring additional hardware.
- If something breaks in …
Text Book ‘Mash App’
I’m experimenting with Tumblr and Jaiku at the moment, and I have an idea that by combining them, I’m going to create a really useful ‘Mash App’ for my User Focus class at SIT next term.
Tumblr
Tumblr is a free blogging tool that I’ve been using lately, and I don’t think I’ve ever fallen so quickly for a web app like I have with this one. Tumblr in fact likens the tool to scrap booking, which may soften its appeal to some users, but have a look; I see multiple uses for it that are tougher than that!
One thing I especially love about Tumblr is that comments are disabled; they aren’t even an option. It’s quite a mind freeing experience and more intimate too. Posts are listed chronologically, in a linear fashion, and there are five different types of articles a user can publish:
- Text
- Photo
- Quote
- Link, and
- Video
Jaiku
Jaiku is also a free web app that aggregates various types of content, as decided by the account owner. As the owner I can pull a whole range of data into my stream, which Jaiku will aggregate for me chronologically. This includes blogs, photos, bookmarks, music, places, events, video and Atom or RSS feeds. I can also …
Make Money with Lead Generation
When people talk about leads or lead generation, many people start thinking about affiliate marketing or CPA (cost per action) programs. While it’s true there is a connection there, lead generation really is it’s own beast. A money making beast at that.
What exactly is lead generation? Many companies are starving for people who fit a certain profile and they’ll pay good money to get their hands on the information they need to try and sell to that person. For example, the online education industry is looking for candidates interested in attending school through one of their online campuses. While they do a great deal of marketing themselves they also turn to other sources to generate qualified leads for them, and they pay good money for it. A lead is simply a bit of information about a person, usually in a specific target demographic that you can sell to an interested party, in this case schools with online education programs. If you ran a site with an education theme or where people are of the age to be thinking about attending school you could be in a position to collect leads, or some basic level of information that these online …
HTML: The Top Five Forgotten Elements
So you’re a front-end guru who spends your day churning out complex CSS layouts and dynamic DOM wizardry. You’ve mastered cross-browser layouts, you’re confident with your DOM scripting skills, and you’ve made every effort to make your pages as usable and accessible as possible. Heck, maybe you’ve even added extra semantic meaning to your site using microformats.
But is there more you could be doing? Just how polished are those HTML foundations upon which everything rests?
Before you declare your tasty web standards trifle ready to be served, have a read through the following five elements that may have slipped off your radar. They’re supported by all major browsers, and implementing them is easy to do and takes almost no time at all.
dfn
The dfn element is used to introduce a term to your readers. Here’s an example:
<p>An <dfn>array</dfn> is a single programming variable with
multiple “compartments”. Each compartment can hold a value.</p>
The browser default is to render dfn elements in italics, but of course through the power of CSS you can make them look any old way you like. For example, if I wanted them to display in bold, instead, I could do this:
dfn {
font-weight: bold;
…
Sponsored Links
Logo Design, Web page Design and more!
- Custom logo designs created ‘just for you’.
- Pick the design you like best.
- Only pay if you’re satisfied with the result.
SitePoint Kits
Download sample chapters of any of our popular kits.
The Search Engine Marketing Kit, 2.0
The Web Design Business Kit 2.0
The Email Marketing Kit
The Usability Kit
SitePoint Books
Download sample chapters of any of our popular books.