How To, IMD345 UCD III, Tips and Tricks - Tuesday, August 19, 2008 13:03 - 0 Comments
Common WordPress Problems
If you happen to use WordPress for your blog (or even as a CMS), you should be aware of some pitfalls that can hurt your SEO rankings. Many of the theme that you download from various sources might look great but the minute you veer from the classic or default themes, you open the probability for issues. Fortunately there’s some pretty easy solutions depending on your need to improve the visibility.
1. Proper use of <h#> tags
Many themes I’ve looked at do not use <h1>, <h2> and so forth properly. Remember that the search engines (and POSH) dictate that the header tags place emphasis on specific information (which should include things like the title, the date of publication or the author). Comb through the single post and main index templates to make sure there is consistent use of both <h1> and <h2> tags (at the very least, and preferably <h3> as well) and adjust the CSS to get the look and feel you want instead of relying on class-based <div> markup.
2. Too many links on the index page
Two problems here - first, the increase in links (past 40) decreases or dilutes the value of importance placed on the page. At the very least, push the most important posts on the front page and consider whether or not you need the others. Second, why are you sending people elsewhere in the first place? Sure your friends might run a great blog but do you really need 100 listings in your blogroll? Consider that external links in your posts should not go past 2 each and that you should keep the total number of links as close to 40 as possible.
3. Bad keyword choices
Especially on the main index page, it is critical that you consider your choice of keywords and mold your page to the proper density. Use a free tool like Google’s Keyword Tool to find ones if you’re unfamiliar with structuring keywords.
4. Alt and title text
Always, always, always include alt attribute text on images and preferably include a title attribute on links and lists so that search engines know what tags to associate with the image.
5. Unique keywords
Every page in the site should have a) unique titles and b) different keywords. You may even opt to remove the name of your blog from the page title because in the end it’s just a vanity thing isn’t it? There are several plugins that can help you do this by converting the text and tags on the posts into the keywords and description <meta> elements.
6. Fix your markup
Bad markup is, well, just bad. This goes for both the HTML as well as the RSS feeds. By default (the newer versions of) WordPress provides at least 4 places to get the feeds from: www.domain.com/feed/, www.domain.com/comments/feed/, www.domain.com/wp-rss.php, and www.domain.com/wp-rss2.php and you should provide appropriate links to them as needed.
Now many of you (all 5 reading this post) are probably asking why I don’t even follow these rules necessarily and the fact of the matter is that for this blog, I don’t personally care. I publish this for information purposes and largely for my students, not really for the public at large. Should I teach by example, sure I should; but there are many other ways to get this information across, so I do as I wish.
PREVIOUS POSTS
- All Kinds of, um, stuff.
It’s been well over a week since I’ve written anything so first off, let me apologize to the eight people who bother to read my ramblings. That said, it’s been a full first half of August. Between new tasks at my job, some thoughts on social impact on technology, a lot of reading, some new toys on the horizon, and school looming, I’ve got a lot to get off my chest.
First, I’ve been neck deep into two threads of development. On the one side, my department is (finally) being split (appropriately) into two working groups - R&D and Implementation. The R&D team will (hopefully) continue it’s digging into the depths of Silverlight, coming up with better and better ways to reap the benefits of the environment and delivery mechanisms. The Implementation team will be finishing up installation of the Digital Asset Management system amongst other tasks. On the other side, because of our core focus on Silverlight, I’ve had to undertake a crash course in Flash CS3 using AS3 for a number of projects and have to say, I like it. Above everything else, not attaching scripts directly to objects and the flow of the class structure is much better (I know, I know, it was pretty much all there in AS2 but this just all seems more congruent).
NBC’s 2008 Olympics web site and notably the video delivery was, in my opinion, very well done considering the enormous task at hand. For Schematic (the web and application designers) I actually have very few complaints - the UI was well thought out and to all the naysayers out there, try architecting a site of that magnitude - it’s so easy to put something down until you’ve been on the other side of the coin. IMHO - the Silverlight experience was about as good as it gets at the moment and for those who keep complaining that Flash is better than Silverlight, maybe it is, but given a 10 year head start, I personally think Flash should be farther ahead than it is. My only complaint is that the site was doggedly slow. However, special kudos to Limelight for the rather phenomenal feat in delivering the quantity of content without dying out (for an extremely good introspective, check out this Jason Perlow article "Limelight Networks: Why the Olympics didn’t ‘Melt’ the Internet").
So in the meantime, I’ve completely lost my bearings on any of the social networking mire and it tells me one thing … did I really need it to survive anyway? I know there is a lot of substance behind the theories in social networking but for the most part, everything I am seeing now is just fluff and marketing - everyone jumping on the bandwagon and trying to leverage UGC to advertise and little else. However, underneath it all, we are beginning to see the seedlings of the so called Web 3.0 - tagging is starting to become a driving force more than it has in the past, and starting to reach a point where critical mass might actually be possible.
Along those lines, I recommend reading David Weinberger’s "Everything is Miscellaneous" which deals with the topic of how tagging can remove the need for organization and yet still make things more efficient. Visionary, though still a way off, I truly think we will see the emergence of smart agents that will handle tasks for us.
Also been finishing Zittrain’s "Future of the Internet" which somehow got terribly boring towards the end, Sipser’s "Theory of Computation" (for school) and "Art of Agile Development" (O’Reilly). Maybe I need to lay off the books a bit.
School (as in me finally going back to school to finish my graduate work) starts next week and I am extremely excited and anxious. I believe there are only 8 in the program and after my experiences at Cornell (you know, the Psych class with 2,000 students, etc) it should be refreshing and interesting. Not sure how I’m going to juggle iStream, teaching, MadeByGirl and school but I’ll take it one day at a time. Speaking of MadeByGirl - we just made a big big sale to Selfridge’s in London, so if you happen to be shopping there anytime, we’d love to see a photo of them in the store.
Hopefully, finances willing, I am going to plunk some coin and pick up the item on my most wanted (and needed) list - the Dell E4200. Purportedly being released within the next couple of weeks, it’s a 2.2 pound, 12" subnote with a solid state drive, magnesium case, and a 19 hour battery life. Don’t get me wrong, I love my trusted Latitude D600 (and even Jennifer’s MacBook Pro) but I think I need some new juice under my fingertips (and not to the extent of my workstation at iStreamPlanet). On the extended wish list is the HTC Touch Pro though at the moment the details and pricing still seem a bit sketchy despite the unconfirmed Sept 2 release date.
- 7 Principles Of Clean And Optimized CSS Code
[excerpted from SmashingMagazine by Tony White]
Note for my students: especially #s 1, 2 and 6 I’ve spoken about in class frequently - if you have questions about any of this over the coming week - ASK!
But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn’t just minimizing file size — it’s also about being organized, clutter-free, and efficient. You’ll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation. You may already be familiar with some of the principles mentioned below, but they are worth a review. Being familiar with this concepts will help you write optimized CSS code and make you a better all-around web designer.
1. Use Shorthand
Using shorthand properties is the single easiest practice you can do to cut down your code (and coding time). There’s no better time than the present to start this efficient coding practice, or to review it.Margin,border,padding,background,font,list-style, and evenoutlineare all properties that allow shorthand (and that’s not even an extensive list!).2. Axe the Hacks
But now we know that using conditional comments to servehackscorrectional declarations for IE6 and IE7 is an accepted practice, even recommended by the Microsoft IE development team. Using conditional comments to serve IE-specific CSS rules has the added benefit of serving a cleaner, and therefore smaller, default CSS file to more standards-compliant browsers, while only those browsers that need the hackery daiquri (i.e. IE) will download the additional page weight.3. Use Whitespace Wisely
Whitespace, including spaces, tabs, and extra line breaks, is important for readability for CSS code. However, whitespace does add, however miniscule it may be, to page weight. Every space, line-break, and tab you can eliminate is like having one less character.4. Prune Frameworks and Resets
If you’ve chosen to use a CSS framework (including ones you’ve written yourself), take the time to review the documentation as well as every line of the CSS file. You may find that the framework includes some rules that you don’t care to use for your current project, and they can be weeded out. This goes for resets as well.5. Future-proof your CSS
However, I’m warming up to the idea of separating layout styles from the rest of the styles, and giving layout it’s own file, or at least it’s own section.6. Document Your Work
Documentation, including markup guides and style sheet guides, is not just for group efforts — they are just as important for a one-man design team. After all, a year after working on other things, revisiting one of your own projects can feel quite foreign. Your future self might appreciate reminder of how your CSS grid framework is supposed to work, or what pages already have a treatment for a secondary action form button, and it will save you or someone else from appending redundant and unnecessary rules to your CSS.7. Make Use of Compression
Some great applications have been created to compress and optimize CSS for you, allowing you to serve a human-unreadable but still browser-friendly files that are a fraction of the origional working copies.[Read the article in its entirety at Smashing Magazine]
- Why Twitter Hasn’t Failed: The Power Of Audience
[This is a reprint of an excellent article by Gregor Hochmuth for TechCrunch]
Twitter isn’t for everyone, and you may have dismissed the service a long time ago. But regardless of your own use, it’s hard to dismiss the phenomenon itself and the passion of so many that has built up around it.No matter how long the outage du jour, Twitter users continue to stay attached to the service despite an ever-changing backdrop of alternatives.
Blogging isn’t for everyone either. But unlike blogging, Twitter enjoys a far a greater variety of users — they include people, many people, who would never think of starting a blog and people who would never touch an RSS reader. The 140 character limit is a plus for Twitter, but it isn’t all.
What explains the Twitter phenomenon then? What produces the positive feeling and the strong attachment among those who tweet? And moreover: How can other systems learn from this?
The answer lies in understanding Audience.
Twitter has a simple premise: You tweet & the message is pushed to your friends. The actual mechanics are slightly different (messages go to everyone who follows you, whether they’re your “friends” or not, assuming your stream is public) — but from a user’s perspective, the circle of receivers consists only of the people they know. Everyone else is part of a faceless crowd that’s hidden behind the follower count. (more…)
- 7 Essential Guidelines For Functional Design
This article from Dustin Wax appeared on Smashing Magazine yesterday and is nothing short of excellent. Succinct, elemental and basic - as the author states…
These are the elements of functional design, the process of responding to the needs or desires of the people who will use an item in a way that allows their needs or desires to be met. Functional design is both an outcome and a process. As an outcome, it describes products that work well to perform their assigned tasks; as a process, functional design is a set of practices guided by the principles that produce that positive outcome.
I’m not going to bother repeating the article here - please take the time to jump over to SM and read it. However, here’s a quick synopsis:

1. Consider the product’s goal
Determine that one primary goal of the site and make sure that everything you do revolves around that fundamental concept. Every addition you make, every tool you provide, every piece of text you write should be dedicated to that goal.2. Consider who will be using it
As JJG proposes, identifying the target audience can be a critical factor simply because most designers either fail to take it into consideration or misjudge it. Audiences vary and so do their wants, needs, and abilities. Cater to that need: a product has to work equally for all its potential users if it’s to accomplish its goal.3. Consider what your audience intends to do with it
What your audience does may not be what you do. YOU are not the audience, your users are. Every user comes with intention, learn what those intentions might be.4. Is it clear how to use it?
We designer/developers have a tendency to go beserk with our functionality. Don’t. "Clarity is the key to functional design".5. How does your user know it’s working?
Provide feedback…it’s the only way your user knows that he or she is using it right. Provide visual cues, highlight the necessary parts.6. Is it engaging to your users?
One of JJGs two tenets and the one that I believe is fundamental to all things Web - is it engaging. I harp on it nearly every quarter but I don’t think many people really see it. Example: four times this week alone I’ve seen references to Blackberry’s as engaging - owners cannot seem to put them down or stop fiddling with them. Whether its the feel, the interface, the haptics or the information it provides, there is definitively something engaging about them.7. How does it handle mistakes?
JJG makes a big point of discussing error handling. We as dev-igners pretty much think we never make mistakes. Just because you can run through your web site and never encounter an error doesn’t mean your user won’t. Users make mistakes. Or more succinctly, your user will not do the same things you do. How does the site correct, adjust or respond to errors?
- Making RIA interfaces truly rich
What truly makes an RIA “rich”? Is it the ability to provide interactivity, or is it the ability to find a new way to present information? Is it a better mashup of existing APIs or is it a compelling design? I can’t say I know the answer, but I can say the journey to find it is an interesting one.
I find myself in a place I often do, at the interactive design phase of a project - that giddy phase after all the due diligence has been done and we’re looking for that next great app. The coders are itching to get started, the client is anxious for the alpha builds. And here I sit trying to convey all the information and ideas I’ve aggregated into a unified yet flexible interface. And just like last time, it once again is for a client bigger than I find comfortable, and feeling as though there is no real answer.
So some basics…it’s an internet application - a “rich” internet application - designed to deliver a massive video library of both live and on-demand content. It should also be viral and embeddable. It has to be lightweight, but it also has to deliver as much engaging interaction while maintaining its efficiency in delivering video (and of course advertising).
So what is it that would make this application truly rich?
I had an interesting discussion with my significant other last week after explaining the dilemma of the project. She and I have very divergent opinions about internet applications. Ever the tech-nerd and business strategist, I always look for the efficiency, for what will monetize, for what will create the best business scenario. For her, a designer, it’s the utility, the engaging atmosphere that takes precedence over eveyrthing else. I’m Windows, she’s Mac (literally…in our household it’s Dell versus Apple). I’m Windows Mobile, she’s iPhone. I’m text, she’s typography, i’m bits, she’s color.
In any case, she explained to me that the reason that she preferred the iPhone over her last “piece of junk” (a Windows Mobile phone) had little to do with that the applications themselves did anything different, it was that the interaction with the phone simply made it more engaging and thus made it more apt to (continue to) use it. And that was they key, she said, “make it engaging and they will stay.”
Now, my partner already knows a thing or two about traffic and the importance of keeping eyeballs on the content. She runs her own online store that within 3 months became profitable and runs a blog that pulls in exponentially more traffic than this soapbox. More than that she understands how to keep her customers interested, happy and loyal. She demonstrates for me the simplicity of the iPhone app design - not of the unit as a whole, but of the generally consistent visual nomikers and motions shared by all the apps. She points out the vast difference in providing search boxes that actually instruct, detailed breadcrumb trails that actually do something, and the fact that the system as a whole delivered information efficiently but in a fun way.
Any of the 100+ students that have mucked their way through my UCD classes will attest that I harp on two major things in UX design - being efficient and engaging (not principles I came up with myself - thank Jesse James Garrett for that definition). So what happened that I so easily forgot these principles in trying to lay out this design.
Her comments and demonstration got me thinking. And thinking. Which led to some quick drafts, a few poorly drawn sketches, some minor storyboards. And now I here I am trying to synergize that last little piece of science that will turn my Frankenstein from idea to life. Through the morass of mapping mashups, social network hooks, video controls, playlists, advertising, viral components and colors, somewhere lies the answer. Will this one be it? Will this design be the rage or will it flop? Hard to tell at this point but I think the ideas are good ones. Coaxing them into coalescing into something bigger than the individual parts is the goal. Let’s see if this truly ends up rich.
- Multi “touch”
This is extremely cool looking but I still have to ask … wouldn’t your arms get tired after a while?
- What it takes to bring the Olympics to the PC
[via BeyondBinary by Ina Fried]
Stage 8H is best known as the place where Saturday Night Live is filmed. This week, though, it’s been turned into an ad-hoc data center as part of NBC’s efforts to stream thousands of hours of live Olympic coverage over the Internet.
Instead of the usual crop of comedians, NBC will have dozens of people watching every hour of the games, looking for highlights that it can chop up and make available on-demand. It’s just one piece of an elaborate arrangement that shuttles the events in Beijing back to the U.S.
From each of the dozens of Olympic venues, a high-definition video feed is delivered over fiber-optic cables to the International Broadcast Center that has been set up in Beijing. A bunch of encoders and Windows Media servers get the video into an Internet-ready format. From there, it travels via satellite to NBC’s headquarters in New York.
There, NBC actually adds a one-minute delay, allowing its cadre of live bloggers in Stamford, Conn., and elsewhere to write their text and have the video and commentary synchronized. Once ready, it goes from NBC to Limelight Networks, a content delivery network, which has 1,000 servers just for the live events sending the content to various Internet service providers, who then shuttle the content directly to their customers. (See chart below)
(Credit: Susan Dove/CNET News)Making it play
Limelight Chief Strategy Officer Mike Gordon said his company is prepared for this to be the biggest live event the Internet has ever seen. “I would not be surprised at all to get 1 million viewers,” he said. “We’re certainly prepared for whatever the audience turns out to be.”Mike Gordon, chief strategy officer, Limelight Networks
(Credit: Limelight Networks)
That said, there is clearly an element of risk in all this, considering NBC’s history of live Olympic streaming has been limited to broadcasting a single game, the gold medal ice hockey match in Torino, Italy, two years ago.
“NBC has always taken risks and is always trying to do more than it has in the past,” said Perkins Miller, the NBC senior vice president in charge of the Internet push. “It does keep me up at night when I think about streaming 2,200 hours (of live coverage).”
The massive effort has come together in a remarkably short amount of time. Microsoft’s deal to power NBCOlympics.com dates back only to January.
NBC had a pretty good idea what they wanted to do and had built some mock-ups of the player prior to deciding to partner with Microsoft.
Initially, they expected to use Adobe’s Flash, given that is the standard for video delivered over the Internet these days. But, as they began to hash things out with Microsoft during a series of all-day meetings at NBC’s 30 Rockefeller Plaza headquarters, Microsoft was able to show NBC some ways it could do more using its homegrown Silverlight technology.
Silverlight, Microsoft said, would be key to enabling NBC’s vision of a “control room” in which a viewer could watch multiple live streams at once. (more…)
- Is the web making us illiterate?
[excerpted and modified, via Technically Incorrect by Chris Matyszczyk]
The web is helping our children read more. Or less. Or, well, maybe it depends on what you call reading. Because if it’s got spelling mistakes or words no dictionary has caught up with yet, then it’s not really reading, is it?
The New York Times yesterday hosted a spirited debate on the subject. Parents, dyslexics, professors, even children chipped in with their muscular views. Subtly showing its hand, the Times made sure the article was a very long one. Because, like many other bastions of journalism and literature, it is a newspaper that chooses to uphold certain standards.
Standards that the immature denizens of Silicon Valley have not so much eroded, but positively assaulted with the deadly weapons of speed, ubiquity and a somewhat fetching disregard for antiquity.
Personally, I would rather be around someone who is curious about the world than someone who believes Mongolia is where retarded children come from. Can anyone truly dispute that the web has given people a greater and more immediate ability to hug a little knowledge?
So it seems that what many critics are concerned about is precisely the kind of knowledge and reading habits children acquire during a surfing expedition. Perhaps one thing the web has exposed is that some so-called works of literature are, frankly, verging on the really quite awful. Just as we have been hyped by burger chains and erectile malfunction cures, we have been hyped by literary guardians.
One tome is essential. Another is a lesser work. But so many are very hard work indeed. When you’re told something is fabulous and wonderful and stupendous, even when you find it not so, it isn’t so easy to declare your opinion.
(Look, I’m sorry, but Eugene O’Neill’s plays are turgid tripe. And don’t get me started on Chekov and James Joyce. There, that’s better.)
Perhaps there will soon come a time when reading a book for today’s 12-year-olds will be as arduous as picking up the tiniest Chaucer and seeing if you can get past page one. Just because one generation was inculcated into the 400-page habit doesn’t mean another can’t find its own way to learn, grow, feel and any other New Agey term you might wish to use to indicate some level of progression.
Deal with it, olds.
So you love Emily Bronte. That’s OK. Don’t blame yourselves. It doesn’t mean that should be anyone else’s idea of literature. Or art. Or knowledge. It can even be someone else’s idea of bilge. And they could be right. There again, of all the names a Google rival could have come up with to name their new brand, they find one that you have to learn how to pronounce and that is a mere consonant away from something very rude indeed.
Where did these people go to college? Chico State?
[response from Mat]
Yea, but sorry, I can list off a ton of truly great writers even if you don’t like O’Neill (which I agree with), Chekov (the only Russian writer I actually find dull), Joyce, Chaucer, or Bronte.
- Good Stuff at SitePoint
SitePoint has always been a great resource for all facets of web design … excellent book series, poignant articles and the like. Here’s a few excerpts that caught my eye today …
Forum Post: design or develop first?
Q: "just wondering if I should go about designing my site first before implementing any back end capabilities. i like to keep things organized and plan ahead. It would seem to make sense to create the static site first but i am somewhat unsure if I were to design first and end up redesigning to fit everything I plan on adding later, in terms of dynamic content."
R: "The approach you take probably depends on whether you are more of a designer or more a developer. A developer would tend to do the back end first without worrying too much about exactly how the page will look until after they know that it all functions properly. A designer would probably get the page looking exactly how they want and then worry about how to get it to function correctly. If you have separate people performing each of these tasks then all that needs to be done first is to define the interface between the two so that the two almost separate parts can be done separately in the knowledge that they will fit together once both are done."
Article: HTML or XHTML: Does It Really Matter? (excerpted, July 9, 2008 by James Edwards)
HTML was originally conceived as a semantic language, in which elements should describe only the meaning of their content, not the presentation. However, this good intention didn’t hold up very long.
In 1997, the HTML 4.0 specification was published, and although it continued to include presentational markup that had been instigated directly by vendors, it also began a push to clean up HTML, calling some markup “deprecated” and suggesting that it not be used.
XHTML 1.0 came along in 2000 as formalization of HTML 4 into XML. XML itself had been standardized in 1998 as a general specification for defining markup languages, and was a stricter and simpler offshoot of SGML, the Standard Generalized Markup Language from which HTML itself was originally derived.
XHTML is still worth using, because it’s a transitional standard that moves us towards a pure-XML Web. XML is inherently better than SGML, because it’s simpler and stricter, and much easier to parse (once you’ve understood its rules). I don’t know from where we’ve adopted the idea that we should be forgiving of markup errors, but I don’t share that view.
And some other choice reads:
- Custom Web Fonts: Pick Your Poison by Kevin Yank
- Fancy Form Design Using CSS by Cameron Adams
- 10 Tips for Being a Greener Web Designer by Matthew Magain
- Whadya Know and Wheredya Fit?
Ever wondered how your skillset stacks up in the scope of all programming languages? I’ve presented this before in PHP class just to illustrate the popularity (as a result of the usability and easy learning curve) of the language but as my own work has drifted into several others, it’s always interested me where my skills stand. In any case, TIOBE is a Dutch company specializing in assessing and tracking the quality of software. They produce the TIOBE Index a monthly updated list of how languages stack up to each other. Below is shown the current trend graph and the top 10 languages as of July 2008.

TIOBE Index, July 2008 by TIOBE bvPosition Delta Language Ratings
Jul 2008Delta
Jul 2007Status Jul 2008 Jul 2007 1 1 
Java 21.345% +0.33% A 2 2 
C 15.945% -0.42% A 3 3 
C++ 10.693% +0.19% A 4 4 
(Visual) Basic 10.447% +0.72% A 5 5 
PHP 9.525% +0.87% A 6 6 
Perl 5.131% -0.20% A 7 8 
Python 4.973% +1.95% A 8 7 
C# 4.000% +0.29% A 9 9 
JavaScript 2.757% +0.24% A 10 10 
Ruby 2.735% +0.64% A (For my students) In case you’re wondering why HTML is not included in this list, the definition used by the index is:
A language is considered a programming language if it is Turing complete. As a consequence, HTML and XML are not considered programming languages. This also holds for data query language SQL. SQL is not a programming language because it is, for instance, impossible to write an infinite loop in it. On the other hand, SQL extensions PL/SQL and Transact-SQL are programming languages. ASP and ASP.NET are also not programming languages because they make use of other languages such as JavaScript and VBScript or .NET compatible languages. The same is true for frameworks such as Ruby on Rails, ColdFusion, Cocoa, and technologies such as AJAX. Finally, we have also excluded assembly languages, although Turing complete, because they have a very different nature.
And finally, for those of you in my weekend classes…yes, it’s 2 hours after class and yes, I am still up. Good night.
- A Small Design Study Of Big Blogs
How coincidental, IMD345ers - read this article from SmashingMagazine…
Blog Design Survey
We have identified 30 design problems and considered solutions for each of the problems separately. We have posed 30 questions which we would like to answer with our blog survey. Below we present findings of our survey of popular blog designs — the results of an analysis of 50 popular blogs according to Technorati’s Top 100.
Considering Technorati’s top 50, we have filtered out social networks and blogs which have artificially become popular — e.g. via backlinks in released Wordpress themes. The prize for the most cluttered CSS-code goes to Smashing Magazine — however, we are going to do something about it over the next weeks.
Please notice: the results presented below should not be considered as guidelines for an effective blog design. They are supposed to give you the intuition of which solution may be better than the other one. However, you need to consider the context you are working within as well — following our findings blindly won’t necessarily improve your design. Still it is useful to know what big players do and, more importantly, what they don’t do.
1. Layout
Let us start with the analysis of the layouts used on the most popular blogs in the blogosphere. Are there more 2-column-layouts than 3-column-layouts? Are layouts centered? Are they fixed, fluid or elastic? Are tables still used? In this section we are going to answer all these questions.
1.1. How many columns?
The question whether one should use 2 columns or 3 columns in a design layout is almost philosophical. Unfortunately, we weren’t able to find any results from usability studies which would prefer one solution over the other one. As usual, it depends on the context and on the target group you are dealing with. In some cases it is just impossible to find a proper balance between primary and secondary content with 2 columns. In these situations you may need to divide the second column (sidebar) into two parts — in fact this solutions is used quite often.
- MsSQL Stored Procedures
In SQL, a stored procedure is a type of action. In general, it is a specially formatted sequence of functions or actions to perform. It has extensive benefits over writing simple queries in that it is stored in the SQL engine for re-use.
For example, let’s say that you’ve created a table to hold all of your users logins and passwords (and some other info):
CREATE TABLE users ( userID INT NOT NULL IDENTITY(1,1), login NVARCHAR(32) NOT NULL, passw NVARCHAR(100) NOT NULL, email NVARCHAR(50) NOT NULL, uName NVARCHAR(50) NULL, uCreated SMALLDATETIME NOT NULL DEFAULT (getdate()) )
On the one hand you can simply write a simple query in your server-side script (here in ASP.NET):
string mySqlQuery = "SELECT * FROM users WHERE login = '" + strLogin + "' AND passw = '" + strPass + "'";
And that would work great. But now lets say you’ve constructed a second table containing more normalized information about the user:
CREATE TABLE usersMetadata ( userID INT NOT NULL DEFAULT (0), dataDescription NVARCHAR(50) NOT NULL, theInformation NVARCHAR(1000) NULL )
So what if you wanted to pull certain information about a specific user? Once again we can write a simple query:
string mySqlQuery = "SELECT usersMetadata.*,users.* FROM usersMetadata LEFT JOIN users ON users.userID = usersMetadata.userID WHERE userID = " + intUserId + " AND dataDescription = '" + strSomeInfo + "'";
And that would work great too. But as those of us who develop large-scale web sites know, we re-use queries over and over, frequently. So what happens when we change the query on one page and neglect to change it on another? Now we have two pages with different results. Not good. (more…)
- Friday Night Finds for 07/11
To be honest with you, I’ve been so friggin’ busy that I have nothing to report for today.
This morning I spent 90 minutes in line with Jennifer waiting to buy her 3G. I’m not quite sure what the fascination is with actually waiting in line that long (more than 7 hours all in all) to get one, but I’ll give her credit for persevering that long. Now on the other hand, the Touch Pro will reportedly be out in September, so maybe I’ll eat my own words. Unless I break down and import one instead.
I sat through an enlightening department meeting today in which the issue of, amongst other things, design came up. Without going overboard I would like to elicit a challenge to all WDIM students this quarter not only to complete the work they are assigned but to challenge themselves one step further and "polish" your design.
Mr. Anderson had an interesting point - a lot of you don’t seem to know where to begin and he gave out a lot of recommendations that I strongly agree with: stepping away from the computer and drawing by hand, layering screencaps of choice sites on top of each other in Photoshop and deconstructing or morphing them together, cutting clips from magazines and arranging them together like a scrapbook. The point being that despite everyone’s creative talents, sometimes finding direction is the hardest part. Take a step to be different.
From my end I would like to see more polish. Hopefully we’ll be able to incorporate a few good example of what we mean by this in IMD345 (UCD3) this quarter. Or if you need some examples, pick up Web Designer Magazine (a glossy, expensive British mag - find it at Barnes & Noble) and check out some of the great design coming out of the UK. Aspire to get that kind of cleanliness or artistry in your design. By the same token, don’t lose sight of the content and functionality.
See you next week!
- An
Internet flaw? [my poor reference via Austin Powers, article via Breitbart]
Computer industry heavyweights are hustling to fix a flaw in the foundation of the Internet that would let hackers control traffic on the World Wide Web.
Major software and hardware makers worked in secret for months to create a software “patch” released on Tuesday to repair the problem, which is in the way computers are routed to web page addresses.
“It’s a very fundamental issue with how the entire addressing scheme of the Internet works,” Securosis analyst Rich Mogul said in a media conference call. “You’d have the Internet, but it wouldn’t be the Internet you expect. (Hackers) would control everything.” (more…)
- Web Form Design Patterns: Sign-Up Forms
[via SmashingMagazine]
With an opening sentence that reads "If you want to maximize the revenue of your service you need to maximize completion rates of your web forms." it definitely has to be good. Vitaly and Sven rarely disappoint and this is no exception. Required reading for all UCD3 students (the entire article, not just this excerpt) this quarter so get a head start.
If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. Unless you have some revolutionary ideas to impress your visitors at first glance, it is not enough to simply enable users to sign up on your site. To make it possible for the service to reach a maximal exposure we, designers, need to provide users with a good user experience. We need to invite them, describe them how the service works, explain them why they should fill in the form and suggests the benefits they’ll get in return. And, of course, we should also make it extremely easy for them to participate.
However, designing effective web forms isn’t easy. And it has one simple reason: nobody likes to fill in forms — neither offline nor online. Therefore, as designers, we need to figure out sound design decisions to make the form completion easy, intuitive and painless.
But how exactly can we figure out these decisions? Where should the link to the form be placed in the layout? How should we design it? How should we highlight the labels and how should we align them? How do web form design patterns look like in modern web-sites? These were exactly the questions we’ve asked ourselves. And to get the answers we’ve conducted a survey.
Below we present findings of our survey of current web form design patterns — the results of an analysis of 100 popular web-sites where web-forms (should) matter. We have decided to start with sign-up forms first. We present the first part of our findings below; the second part of the survey results will be published next week.
Read the rest at SmashingMagazine…
- Sunday Studying
So here I am studying (yes, studying) for the GRE’s that I am taking on Tuesday and frankly I am sort of dreading them. To be sure, I have always been really good at taking tests, and not multiple-choice or true-false or essay in particular … all types of tests. And yes, I pretty much know every so-called "tactic" on the planet (and it helps, of course, that even after some 26 years, I can still remember pretty much every friggin’ geometric, algebraic, trigonometric and otherwise normal mathematical equation I’ve ever learned for no apparent reason or need). So why am I so wigged out about this one? It’s not like I have to do spectacularly (1200 is my target) but these antonyms are really wigging me out! Who the hell uses any of these words in their everyday speech anyway?
OK, back to studying.
- getStringFromObj()
Sorry if this offends you but it’s funny, And I don’t really care. Okay, so programmers really are geeks but lighten up.
- Signs that you are a bad programmer
[via infogami]
No, I didn’t write this but it’s something I wish I could lay claim to.
1. Inability to reason about code
Reasoning about code means being able to follow the execution path ("running the program in your head") while knowing what the goal of the code is.
Symptoms
- The presence of "voodoo code", or code that has no effect on the goal of the program but is diligently maintained anyway (such as initializing variables that are never used, calling functions that are irrelevant to the goal, producing output that is not used, etc.)
- Executing idempotent functions multiple times (eg: calling the save() function multiple times "just to be sure")
- Fixing bugs by writing redundant code that overwrites the result of the faulty code
- "YoYo code" that converts a value into a different representation, then converts it back to where it started (eg: converting a decimal into a string and then back into a decimal, or padding a string and then trimming it)
- "Bulldozer code" that gives the appearance of refactoring by breaking out chunks into subroutines, but that are impossible to reuse in another context (very high cohesion)
Remedies
To get over this deficiency a programmer can practice by using the IDE’s own debugger as an aide if it has the ability to step through the code one line at a time. In Visual Studio, for example, this means setting a breakpoint at the beginning of the problem area and stepping through with the ‘F11′ key, inspecting the value of variables–before and after they change–until you understand what the code is doing. If the target environment doesn’t have such a feature, then practice in one that does.
The goal is to reach a point where you no longer need the debugger to be able to follow the flow of code in your head, and where you are patient enough to think about what the code is doing to the state of the program. The reward is the ability to identify redundant and unnecessary code, as well as how to find bugs in existing code without having to re-implement the whole algorithm from scratch.
2. Poor understanding of the language’s programming model
Object Oriented Programming is an example of a language model, as is Functional or Declarative programming. They’re each significantly different from procedural or imperative programming, just as procedural programming is significantly different from assembly or GOTO-based programming. Then there are languages which follow a major programming model (such as OOP) but introduce their own improvements such as list comprehensions, generics, duck-typing, etc.
Symptoms
- Using whatever syntax is necessary to break out of the model, then writing the remainder of the program in imperative/procedural style
- (OOP) Attempting to call non-static functions or variables in uninstantiated classes, and having difficulty understanding why it won’t compile
- (OOP) Writing lots of "xxxxxManager" classes that contain all of the methods for manipulating objects that have little or no methods of their own
- (Relational) Treating the database as an object store, possibly going as far as serializing the state of the object to a binary column
- (Functional) Creating multiple versions of the same algorithm to handle different types or operators, rather than passing high-level functions to a generic implementation
- (Functional) Manually caching the results of a deterministic function
- (Pure Functional) Using cut-n-paste code from someone else’s program to deal with I/O and Monads
- (Declarative) Setting individual values in imperative code rather than using data-binding
Remedies
If your skills deficiency is a product of ineffective teaching or studying, then an alternative teacher is the compiler itself. There is no more effective way of learning a new programming model than starting a new project and committing yourself to use whatever the new constructs are, intelligently or not. You also need to practice explaining the model’s features in crude terms of whatever you are familiar with, then recursively building on your new vocabulary until you understand the subtleties as well. For example:
Phase 1: "OOP is just records with methods"
Phase 2: "OOP methods are just functions running in a mini-program with its own global variables"
Phase 3: "The global variables are called fields, some of which are private and invisible from outside the mini-program"
Phase 4: "The idea of having private and public elements is to hide implementation details and expose a clean interface, and this is called Encapsulation"
Phase 5: "Encapsulation means my business logic doesn’t need to be polluted with implementation details"Phase 5 looks the same for all languages, since they are all really trying to get the programmer to the point where he can express the intent of the program without burying it in the specifics of how. Take functional programming as another example:
Phase 1: "Functional programming is just doing everything by chaining deterministic functions together"
Phase 2: "When the functions are deterministic, they don’t need to be executed until the output is called for, and only for as much as needed. This is called Lazy Evaluation and Partial Evaluation"
Phase 3: "In order to support Lazy and Partial Evaluation, the compiler requires that I write functions in terms of how to transform a single parameter, sometimes into another function. This is called Currying"
Phase 4: "When all functions are curried, the compiler can choose the best execution plan by using a constraint solver"
Phase 5: "By letting a constraint solver figure out the mundane details, I can write programs by describing what I want, rather than how to give it to me"
- Friday Night Finds
OK, so I took a little break to get in some Whole Foods shopping, a little Netflix action and just resting. Nonetheless, I managed to get a few finds in as I become the couch potato watching TV and surfing…
1. Design Meltdown: a site with excellent articles self-billed as “design elements, trends and problems in web design. Seriously the articles are pretty good, a lot of in-depth material. And I personally love the design of the site - reminiscent of a CHM but with more of a book feel.
2. Save the Pixel: an eBook from scratch. Still have to download it but from the looks of scratch’s other publications it should be fantastic. Authored by practicing usability pro Ben Hunt.
3. Windows Live Writer: more and more impressed with this thing. I’m installing the Silverlight Streaming, Visual Studio codepaste, Amazon affiliate link tool and geoMicroformat tools at this very moment.
4. POSH: ok, so this isn’t a “find” in the sense that the rest are but it’s something that I am going to be increasingly focusing on in class so figure it out - Plain Old Semantic HTML. As detailed on the microformats wiki “POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational.”
5. Edgepoint: an impressively clean, engaging, well put together web site. And oh yea, it’s a church web site. All beliefs aside, it is a very compelling site - check it out.And two minor mentions for the week. One - did everyone see the new Walmart logo? What’s up with that? Two - AS3 - took my first real whack at it this week (built a packageable, transportable, skinnable, web service driven media player for both live and on-demand playback - will post it up next week) and honestly, it has promise but man, what a killer to learn. Maybe I just can’t get the old Actionscript out of my head. Oh well, we all have to grow up sooner or later, eh?
- Windows Live Writer
It’s the Fourth of July and 109°F in Vegas today and what am I doing (aside from sitting in the central air) … trying out software, studying for the GRE’s, catching up on reading and doing finishing touches on a media player for iStreamPlanet. In other words, the same thing as every day.
In any case, I am testing out Windows Live Writer to create this very post. The installation is annoyingly slow but so far so good. The interface is pretty slick clean but whether or not the functions work well remains to be seen. Will update you when I get more into it.
Truth is that despite its maturity, the web interface for WordPress authoring is annoyingly tedious to work with and I almost invariably end up going straight to the HTML editing (code editing) which can be annoyingly slow when working with very long posts (though I’ve largely gotten rid of them in favor of downloadable PDFs).
if you haven’t noticed, I’ve been doing some minor tweaks to my site in preparation for this quarter’s UCD Integration class as a proof of principle and demonstration of using plugins, mashups and semantic data techniques. Nothing drastic, just a bit of interface updating, some new sidebar plugins, blah blah blah. This is going to be a fun but difficult class, really looking forward to it.
I’ve also been trying to post quite a bit more. I know that by and large my readership is just the student body of AILV but occasionally I get others. I hope at least some of the posts you find some use for. Anyway, any comments are always appreciated … have some stuff I’ve been working on to post up later next week and the class materials should be up shortly.
Happy Independence Day!
Quick Lists
- IMD223: Advanced Scripting (SU08) »
- IMD345: UCD Integration (SU08) »
- Independent Studies (SU08) »
- IMD213: Intermediate Scripting (SP08) »
- IMD322: Dynamic Design (SP08) »
- IMD335: Usability Testing (SP08) »
- IMD213: Intermediate Scripting
- IMD322: Dynamic Design
- IMD335: Usability Testing
A Little Reading Music
Yummy Delicious
Meanwhile on Flickr ... [Web Design Pool]
Reading Recommendations
- Beautiful Web Design by Jason Baeird
- The Future of the Internet and How to Stop It
by Jonathan Zittrain - The Namesake by Jhumpa Lahiri
- The Overcoat and Other Short Stories
by Nikolai Gogol - We The Living by Ayn Rand
- Everything is Miscellaneous by David Weinberger
- Danny The Champion of the World by Roald Dahl
- PHP for the World Wide Web by Larry Ullman
- Advanced PHP for the World Wide Web
by Larry Ullman
More In
IMD345 UCD III
Aug 19, 2008 13:03 - 0 Comments
Common WordPress Problems
More In IMD345 UCD III
- 7 Essential Guidelines For Functional Design
- Good Stuff at SitePoint
- Friday Night Finds for 07/11
- A second chance for that first impression?
- Visual Design Meets Usability
- The New Iteration
- Further, Faster
- 10 Principles Of Effective Web Design
Soapbox
Aug 18, 2008 20:32 - 0 Comments
All Kinds of, um, stuff.
More In Soapbox
- Why Twitter Hasn’t Failed: The Power Of Audience
- 7 Essential Guidelines For Functional Design
- Making RIA interfaces truly rich
- getStringFromObj()
- Signs that you are a bad programmer
- Windows Live Writer
- Tru dat…
- NBC Olympics on Silverlight














