POST ARCHIVE
- 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.
- 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!
- Tru dat…
courtesy of Smashing Magazine
- Give your bud a swurl-y?
Back in the dark ages there was BBS. Eventually this evolved into usenet. Then after the millenium it came … MySpace, blogs, wikis, photo-sharing, micro-blogging and more … pretty much every social networking idea conceivable. Now enter Swurl.Swurl is a lifecaster (life Friendfeed and Spokeo) - a social networking aggregator. In short, it pulls all the data from all your various social network activities and aggregates it into one place. More than that, it uses somewhat intelligent decisions about the content and context to attach related materials. For example, if you rent a movie from Netflix, Swurl appends it with a YouTube link to the trailer. Interesting.
This may sound a bit intrusive, and to me it is, but only because it’s being shared. Nonetheless, it does bring up some interesting issues about where we are headed. Many industry experts, including Web inventor Berners-Lee, foresee the Web becoming a tool where semantics yields to intelligent agents that link enough intelligently associated information together to basically make your life easier. Is this not one step closer to that?
For more on Swurl, check out this article on TechCrunch or Swurl’s web site. Any of my student’s who’ve started using this, let me know what you think. And maybe I’ll slice out a couple of hours and set it up for myself. Like you’d really care what the hell I’m doing (and if you do, that’s a bit scary and I still don’t get why one would want to).
- NBC Olympics on Silverlight
As most of you know I am an huge proponent of Microsoft Silverlight and not just because I lead a team that does some serious bleeding edge work with it, but simply because I think the platform itself has huge potential. My impression is that the general public and even those with relatively extensive technical knowledge still see Silverlight as just a competitor to Flash, or possibly “that new Microsoft software” that you can use to make video players with.
To really get an idea of what abilities Silverlight has, admittedly you have to spend a lot of time with it. A lot of time. I am fortunate to have the resources and an extremely creative and knowledgeable staff who’ve pushed the limits of Silverlight pretty much as far as it will go. Our long range goal is maybe best termed as RIA mashup - agnostic service digesters consuming APIs using component libraries to deliver not only rich internet applications but interactive and engaging as well.
I’m talking about being to openly swap back and forth between micro-blogging platforms (think Jaiku and Twitter and Tumblr), integrated messaging (Live, Yahoo, etc), alerts, mapping systems, and a variety of other needs all dumped into a flexible, web-based interface. And then add on top of it that companies needing those systems can mix and match them in an easy to use (Silverlight driven) interface to create their own. Without any coding.NBC launched what I think (outside of the Silverlight.net site itself) is the best large-scale distribution of a Silverlight application example with its Olympics video site and be sure to try out the enhanced player. (more…)
- Bill gets to steppin
Friday marked the end of an era … whether you love him or hate him, he’s had a major impact on technology, business, politics and pretty much everything in between, both direct and indirect, and it will be interesting to see what happens with his departure from the daily ops. And in case you missed it, here’s the CNET video spoof. Check out more vids here.
- A second chance for that first impression?
It is said that “you only get one chance at that first impression” and that may be true but a lot of us in the business also know that sometimes you do in fact get a second chance. And what’s more, as I’ve always tried to enumerate to both students and colleagues, there’s a big difference between bad form or function and simply omitting something (in the case of the latter, I still strongly believe in the adage I learned from the hotel business: “if the guest didn’t know it was there in the first place they won’t miss it”).
This article from VandelayDesign makes a pretty good point about that first impression. Of course you’ll want to make the best one possible but don’t forget that because of the plethora of choices, a lot of visitors will forget anything other than the visual in a web design - throw some makeup and a new dress on it and frequently a visitor will not even know it was the same skeleton underneath. Nonetheless, it’s those fundamentals a web site still needs that counts and this post makes a clear and concise listing of them. (more…)
- Put it on paper
Thankfully someone out there agrees with me about the benefit of putting the idea on paper first. Stop opening Photoshop or Illustrator when you’re trying to flesh out your ideas, you’ll get too distracted by the little things (color, pixels, blah blah). Instead, restrict yourself to a single page and a black pen (or if you’re really into it, try using some post-it notes and a second color pen). Sometimes you’ll be amazed what kind of ideas can come from simplicity.
Read the post “The Paper Version of the Web” and see the pics at deeplinking.net.
- Creativity and Innovation vs. Predictability
In a post titled the same, Steven Snell writes about the need for both creativity and innovation as well as predictability in web design, something we in the devigners realm often miss in our rush to innovate or make some killer design. The comments are also worth the extra few minutes to read. Students in UCD class, please read this before the start of the quarter. Here’s a short excerpt but please visit the site.
Web design is a creative art. We’ve all experienced situations where we’ve been wowed by a site with an exceptionally creativity design or functionality. However, we’ve also had frustrating experiences with sites that try too hard to buck the trends and wound up being very unusable. In web design and development, creativity and innovation need to be able to work in harmony with usability, not restrict it.
As a designer there’s always that desire to step outside the box and create something truly unique. However, there’s a fine line between positive creativity that will enhance a website and negative creativity that will complicate usability and confuse visitors.
Blending Creativity and Predictability
In my opinion a website doesn’t need to be creative (in terms of design and functionality) in order to be successful. One of the most obvious examples is Craigslist. The idea behind the site and what it accomplishes for visitors are far more important than the look of the site, however, a high-quality design can certainly help.
Those websites that do display creativity and innovation also need to find a way to incorporate predictability for users. Your website’s visitors are going to be impatient, so it’s critical to not make them think or work any harder than necessary if you want them to stick around and take any action.
The predictability is not so much an issue with the design itself, rather with the use of the site. But a design can help or hinder the predictability in a number of ways.
[via most inspired]
- The 10 Commandments of Web Design
The Internet is constantly changing. BusinessWeek.com spoke to a bevy of experts and distilled the must-follow rules top online designers live by in 2008. Here is the excerted list of the article … go read it here. And yes #10 is still the same, though as I propose the definition of “content” is rapidly changing and not as a result of UGC.
1. Thou shalt not abuse Flash.
Adobe’s (ADBE) popular Web animation technology powers everything from the much-vaunted Nike (NKE) Plus Web site for running diehards to many humdrum banner advertisements. But the technology can easily be abused—excessive, extemporaneous animations confuse usability and bog down users’ Web browsers.
2. Thou shalt not hide content.
Advertisements may be necessary for a site’s continued existence, but usability researchers say pop-ups and full-page ads that obscure content hurt functionality—and test a reader’s willingness to revisit. Elective banners—that expand or play audio when a user clicks on them—are much less intrusive.
3. Thou shalt not clutter.
The Web may be the greatest archive of all time, but sites that lack a coherent structure make it impossible to wade through information. Amazon.com (AMZN) and others put their sites’ information hierarchy at the top of their list of design priorities. (more…)
- More on Twitternomics
This was a great article sent to me by Mark as a follow-up to this post. I’m posting a large sum of it here simply because it really hits the nail on the head (at least in my professional opinion) and really explains some of the social aspects that I needed a better understanding of. If you are a UCD student of mine, please take the time to read this article and follow some of the reference blogs (listed just after the trackback) listed by the author.
Twitter scares me. For all its popularity, I see at least three issues: 1) it’s a near-perfect example of the psychological principle of intermittent variable reward, the key addictive element of slot machines. 2) The strong “feeling of connectedness” Twitterers get can trick the brain into thinking its having a meaningful social interaction, while another (ancient) part of the brain “knows” something crucial to human survival is missing. 3) Twitter is yet another–potentially more dramatic–contribution to the problems of always-on multi-tasking… you can’t be Twittering (or emailing or chatting, of course) and simultaneously be in deep thought and/or a flow state. (more…)
- The Future of the Internet - or at least one version of it
Respected Internet legal expert Jonathan Zittrain appeared on Colbert Report on Tuesday promoting his (new) book The Future of the Internet and How to Stop It [official site]. “Zombie computers”? “Good chaos”? Interesting musings, probably a lot of truth behind it and probably a lot of mush too. Now I got a book to read. Funny interview though.There was a good blog post about it in The Scientific American’s blog today:
“From what I understand, the thrust of the book is that the internet is currently at a defining–but dangerous–moment in its history. Specifically, the recent rise of more constrained applications (such as apps for Facebook or the iPhone) threaten to divert the creative resources that have hitherto driven the rapid growth of the internet. Instead, this talent will increasingly be devoted toward designing final products that the individual creator has little control over, applications that will not help drive future innovation, and applications that can be turned against their users in a variety of ways. Instead, we should be championing the continued development of more “generative” internet efforts (like Wikipedia and peer-to-peer technologies). On the flip side, the open and unconstrained nature of the internet has generated a wide range of genuine security threats, and these will need to be addressed proactively in order to protect users and to allow the more generative side of the internet to continue to flourish.” [Nick Anthis on Scientific American]
Check out the interview … (more…)
- Sexy Stylesheets
Oh yes, oh yes! OK, a little much but this was a great article by CSS guru (yes, guru…if you don’t believe me, this beyotch young lady is one of the brains behind The Art & Science of CSS, a fantastic anthology of styling examples). Go here for the original article…(by Jina Bolton)
“Lately, I have taken interest in discussing methods of creating sexy stylesheets. While CSS can be used to create sexy websites, writing CSS can actually be an artform by itself. The way in which CSS is created, structured, and maintained can be a thing of beauty.
So how does one create sexy stylesheets? What characteristics would your stylesheets have? (more…)
- Notes on a lazy Saturday night
2 nights in a row. I’m on a streak! OK, so my life may be boring but oh well.
Anyway, so first off … by now I’m sure you’ve all tried it but just in case you haven’t, Firefox 3, well, rocks. Fast, efficient, excellent rendering, blah blah blah. Other than a few of the accoutrements (meaning the host of oddball plugins and addons) not working any more, and the little issue of a minor security hole, I have nothing bad to say about it (well, that and the annoying auto-complete address bar). (more…)
- Friday Night Finds
It is Friday night. It is 11:56pm. I am sitting on my somewhat uncomfortable club sofa in my very plush home office (sometimes known as the TV room). And I am surfing the Web. It’s Friday. Did I say that already?
That being said…I am playing around with the (JS) prototyping library and seeing how we can extend our Silverlight apps without having to rely on WPF and WCF. Did I mention it’s Friday? Where’s my beer? (more…)
