Web Design Checkmate: Using Chess For Success in Web Design

Advertisement

The business of building websites is one of constant change, adaptation and strategy. The way designers and developers build websites is often informed by the methods of others and their own trial and error. In light of this, we can draw a number of parallels — some philosophical, to a certain extent — between Web professionals and one of the oldest and most popular board games of all time (counting traditional and digital games). This game is chess.

Screenshot1
Image credit2

In this article, we’ll explore the relationship between the game of chess and the Web industry. We’ll learn fundamental lessons from the pawn, rook, knight, bishop, queen and king, and we’ll highlight the factors — both offline and online — that determine best practices. The game is beloved by many professionals, so it seems fitting to apply its great strategy and elegance to the digital age; certain practices might help you lead a more successful working life.

Pawns

Of all the pieces on a chessboard, the most abundant and least strategically useful are the pawns. Acting as soldiers on the front line, these men of honor advance across the board in an attempt to reach the end of the opponent’s side and transform into a more useful piece (i.e. another queen). While this doesn’t happen often, pawns nevertheless play a fundamental role in shielding higher-ranking pieces from attack, and these simple pieces are also used at the outset to gain positions of advantage.

Chess Piece: Pawn

Always Move Forward

Pawns can only move forward. They can get a quick start; players have the option of moving the pawns up to two spaces on their first move and subsequently moving them one space at a time. When you work on projects in a business environment, the principle of moving forward without back-tracking is an inspirational perspective. If you cease to constantly drive your ideas forward, they can become stagnant; progress is critical to a website’s development.

Here are some tips you can use to adopt this mindset:

  • Don’t get stuck using deprecated practices when structuring website code.
  • Examine your community to determine needed features for future upgrades.
  • Change a website’s interface only if it would benefit the user experience.

Be Willing to Sacrifice

The ideal of giving something up in exchange for a greater good is realized by pawns, which, though limited in function, are plentiful and can protect others. In design, shielding the end user from issues that can damage the usability of the website is a worthwhile sacrifice. Having to let go of something that took time and energy is always unfortunate, but knowing when to say goodbye could mean the difference between success and failure.

Here are some tips for internalizing this attitude:

  • Ensure that your Web layouts are flexible enough to meet the needs of various devices.
  • Weigh the benefits of features against their pitfalls before eliminating them.
  • Content is more valuable than design; never dilute its quality for eye candy.

Aim for Change

The pawn’s greatest moment is arriving at the opponent’s side of the board. Striving for betterment and aiming for your goals are behavioral ideals firmly upheld by professionals. This requires dedication and careful planning. When undertaking a creative project, it’s important to think beyond the current ask and consider the long-term project.

Here are some tips to get into this mode:

  • The website-building process is never complete; ensure that you maintain a steady flow of updates.
  • Think of ways to enhance the website to better cater to your visitors’ changing needs.
  • It never hurts to have a business plan when scoping out a Web-based project.

Rooks

Rooks (or castles, as some people call them) are fortresses of strength that move across the board either horizontally or vertically. Their nature is similar to that of bishops in that they move in a straight line (although bishops move diagonally). Progress can be hindered by barriers, and interaction with other pieces is sometimes required, but the rook’s overall benefit is stamina and longevity.

When working on Web projects, we often put a great deal of thought into things like conventions and patterns and their theory and implementation. The nature of semantics and following recognized pathways in order to structure a document properly is reminiscent of the way that chess pieces such as the rook have a particular function and invariably carry out unique tasks. Only with logical thought can we hope to change the ultimate goals of an event and avoid obstruction.

Chess Piece: Rook

Structure With Purpose

A rook represents strength and structure. The castle of stone might be restricted in its interactions on the chessboard, but its value is in its character. Websites need to be constructed well in order to survive the trials of everyday use. Considering how such needs should be met will ensure a sturdy and durable display of data. Take great care when structuring your work to reduce “illegal moves” and syntax.

Here are some tips for strengthening your outlook and code:

  • Always validate your code; it will reduce the number of bugs.
  • Use the right element for the job to improve your code’s semantic value.
  • Keep code minimal to reduce file size and loading time.

Assist Those in Need

Like the other pieces on a chessboard, the rook is always on hand to help out by attacking or defending. Working with others to accomplish a task is only part of their job. In a Web environment, the same is true: if you take the time to assist those who use your website or service, not only will you increase your value, but you will gain the gratitude of the visitors, whom your website requires in order to keep running.

Here are some tips that might be of assistance:

  • Providing ways for people to contact you is important to maintaining trust.
  • Negative feedback can still be constructive; don’t dismiss it as “bashing.”
  • Provide social interaction aids to help visitors feel involved in your community.

Take Precautions

Sometimes things don’t go as planned, in which case you’ll want to hold the strongest position possible. Rooks, like all other critical pieces, are only tools to protect other pieces in play, but caution is fundamental to remaining in a position of power. Thinking of how future scenarios might challenge your strategy can help future-proof your work from obvious flaws. You don’t want visitors to encounter obstacles that make them miss out on the benefits of your website!

Below are some tips for fortifying your website:

  • Turn off scripts and styles to test whether your website is still usable.
  • Test your websites on mobile devices, a market that is proliferating.

Knights

Knights are unique in their movement, going forward two spaces and then taking a single side-step. This means they can weave past other pieces and take up positions of singular advantage. Strategically, knights are most often used to pin hard-to-reach pieces in place through a clever attack. While this unique movement has its advantages, the knight does not replace the other pieces, which have their own strategic benefits.

Our uniqueness, whether as it is applies to our creative process, our products or our ability to solve common problems, is something we as professionals take for granted. We are able to incorporate creative flourishes when we forge applications, flourishes that can be tracked through the code (such as conditional comments, which give stylistic flavor to Internet Explorer). Like a white knight saving our sanity, our uniqueness helps us side-step issues that could otherwise become complicated.

Chess Piece: Knight

Be Brave in Adversity

Mythology has taught us the familiar attributes of the knight: bravery, strength and honor. Thoughtful reflection on the Web-building process teaches us to be courteous to others and brave, while sticking to our guns when faced with the prospect of compromising in order to gain market share.

Here are some tips to make yourself more knight-like:

  • Never take criticism personally; negative feedback is often the most useful kind.
  • Don’t resign in the face of competition; the only failure in life is to quit trying.
  • Try to rally support for your project; there’s strength in numbers.

Have a Selling Point

The knight is the only chess piece that move in two directions in one turn; even the queen can’t do this! This attribute teaches us the value of having a selling point. Selling points give visitors a reason to choose one product or service over others that perform the same function.

Here are some tips on finding your selling point:

  • Draw from other people’s work, but never steal anything outright.
  • Improving on existing services is a kind of innovation in its own right.
  • Be focused in what you offer; reinventing too much increases complexity.

Avoid Barriers to Access

The knight is the only piece that can pass over others in its movement. This ability to navigate past barriers is somewhat reminiscent of standard recommendations for accessibility, which ask us to remove barriers to access on our websites. The goal is to allow freedom of movement and access to content.

Below are some tips on removing barriers:

  • Consider the types of people who are not as able as you are online.
  • Testing your work on an audience is better than going solo.
  • Make sure your website works in different browsers to avoid serious breakages.

Bishops

The bishop is a piece that moves diagonally across the chessboard. The bishop scans the board for its next move, minding pieces that block its path, in the same way that a visitor scans content until a barrier prevent their progress. A bishop cannot step off the tile color to which it was initially assigned, ensuring a kind of vendor lock-in.

As Web professionals, we tend to get caught up in arguments about whether frameworks are useful, given their disadvantages (and even with graceful degradation, for example). The benefits of frameworks for certain situations occasionally outweigh their downsides (like trapping users in the environment), so make the most of what you have; dismissing less powerful options is not always the best way to go — in fact it could increase the amount of work required.

Chess Piece: Bishop

Have Faith in Your Work

The bishop, of course, is religious in nature, an agent in the battle between two sides. Faith in a religious sense is not needed to practice Web design, but as a quality of character it does play a part in one’s identity. Faith affects motivation and makes you believe in the project you’re spending so much time and effort on. If you have no faith in your craft, the job is doomed from the outset.

Here are some tips for building faith in your work:

  • Create a list of benefits to focus on your website’s potential.
  • Set realistic, structured goals to achieve success.
  • Encourage visitors to recommend your work to people they know.

Know Your Limits

It may seem frustrating that each bishop is trapped on its own color, limited in impact. But if you make the most of it, bishops can still be useful. Know your own strengths and limitations, so that you don’t attempt the impossible or unachievable — if you do, the result will surely be flawed.

Here are some tips on knowing your limits:

  • Get external support or advice when you hit a wall.
  • If something can’t be achieved the way you hoped, look for alternatives.
  • Reduce your weaknesses by learning new skills regularly.

Stick to Your Guns

While being able only to move diagonally may seem like a disadvantage, this can prove useful on occasion. Having sheer determination to carry out a job in a certain way is admirable. We humans are sometimes stubborn, and we stick to our guns when possible. This can cause us to make mistakes… or motivate us to persevere.

Here are some tips on being determined:

  • Reflect on a project’s overall goals whenever possible in order to reassess a plan’s feasibility.
  • Mistakes happen, and no one is perfect, but that’s no reason to stop trying.

The Queen

The queen is the second-most important piece on the chessboard. She can move horizontally, vertically and diagonally across any distance, and her power spans the entire board. She is the king’s most agile bodyguard, and losing her can be devastating. You have to use your power responsibly, both on the chessboard and in your profession; misusing your tools could cause you to lose visitors to the competition.

Sometimes we find ourselves swatting a fly off a nuclear warhead. Knowing exactly what to use, when to use it and how to use it appropriately is what ultimately distinguishes professionals from amateurs. In addition, taking advantage of the powerful tools at our disposal can speed up progress and eliminate the complexities that come with attempting the impossible with simple tools.

Chess Piece: The Queen

Realize Your Potential

A potent force, the queen moves freely about the chessboard, with few restrictions. The queen is a powerful piece and reminds us to exert the greatest effort to reach our potential. Rather than staying in our comfort zone, we must always learn new skills and achieve more than what is expected of us.

Here are some tips to stretch your skills:

  • Everyone has the capacity to learn; keep your skill set up to date.
  • Push yourself to become a better professional and to exceed your own expectations.
  • Try not to let any of your skills go to waste when creating something.

Cover All Bases

In our work, we try to minimize error by viewing every situation from multiple angles — this is important. In chess, players use the queen in much the same way, exploiting her power yet shielding her from harm. In the creative process, your only real limitation is being blind to critical elements, which is why getting some perspective from outside testers and users never hurts.

Here are some tips to cover your bases:

  • The more time you spend planning a project, the better the results usually will be.
  • Information architecture is your friend; make use of wireframes and mock-ups.
  • Spend time testing your website intensively for critical flaws.

Strategy and Learning

You have two knights, two rooks, two bishops and many pawns, but only one queen. Her value lies in her singularity; each move of the queen requires strategy and consideration of consequences. We become better players — and professionals — through trial and error, constant learning and foresight. Being cautious in the game teaches us to be wise in business.

Here are some tips to help you strategize:

  • Read blogs, books, tutorials, magazines and anything else that can help guide you.
  • Analyze your target audience to get ideas on what your website might need in future.
  • Researching the competition gives you a sense of what potential visitors need.

The King

No piece is as important as the king; it is the one piece that must evade capture. The king moves only one space at a time, in any direction, and whenever it is in immediate danger, either a piece must be moved to block the attack or the king must be moved to avoid it. The king has no equal and cannot be restored by a pawn — sacrifice, and so prevention is imperative.

Web professionals have to protect what is important, too. We deal with payment details, databases, passwords and other sensitive information. If we lose any of that through carelessness or a lack of preventative measures, we end up losing something greater: the customer. Establishing trust takes time, but it can be lost as quickly as a surprise checkmate!

Chess Piece: The King

Avoid Traps

Protecting the king is the primary concern of every chess player. Gaining advantage to prevent loss is important. While Web professionals usually have no reason to evade capture (unless they’re doing something wrong), the benefit of avoiding common traps (the equivalent of “foolsmate” in chess) becomes apparent when testing the cross-browser functionality of a website.

Here are some tips on avoiding traps:

  • Try to reduce the intrusiveness and obtrusiveness of your website to enhance the visitor’s experience.
  • Actively seek out errors in your work to improve your service.
  • Internet Explorer is a pain. Watch out for its rendering faults.

Value and Importance

A common tactic in chess is to weigh the value of the pieces against the benefits they represent. The king is critical because the game is lost without it. Comparing value has an important role in the Web industry, too, especially when losing mission-critical features would undermine the entire process. Comparing value also helps when prioritizing maintenance work or scheduling upgrades.

Here are some ways to tip the scale:

  • Accurately pinpoint the value of your service.
  • Upgrades are avoidable, but reduce downtime as much as possible.
  • Price your service fairly; prices that are either too high or too low create problems.

Know When to Resign

Sometimes we get so excited — or stressed, as the case may be — about complex or next-to-impossible projects that we forget the option of saying “no.” We never like to resign or throw down our sword; we feel as though we have failed because we couldn’t meet the client’s needs. But firing bad clients and knowing when to scrap weak ideas is a part of being a professional. You can’t win every fight.

Here are some tips on recognizing when to throw in the towel:

  • Trust your instincts when deciding whether to undertake a project.
  • Salvage something from anything you work on.
  • Learn how to deal with “clients from hell.”

Chessboard

Chess players focus on the pieces in play and on capturing the king, but they must also understand the chessboard as a battleground on which this drama plays out. This relates to the website-creation process (and to a lesser extent, the Web industry): lessons are to be learned from the chessboard itself.

Screenshot3
Image credit4

Light and Dark

Like a chessboard, the Web industry is full of light and dark, good and bad. We weigh benefits and pitfalls when performing our roles. A chess game tells a story; likewise, the fruits of our labor and our highlights and disappointments all appear online.

Think Ahead

One of chess’ biggest lessons is to think ahead, instead of in the moment. Being able to predict how your opponent will move helps you gain advantage. This is also true of the website-building process. Unjustified decision-making leads to problems, whereas well-planned strategies that entice people to visit and use your service lead to faster results and greater rewards.

Weigh Your Options

In chess, there are literally millions of ways a game can play out, and with every move the number of potential outcomes decreases. Knowing your options and which route affords the best opportunity for success is a critical skill. Website creators have many different methods of production and implementation as well, but missing the mark with scalability or usability can diminish a website’s user-friendliness and jeopardize its success.

Make Your Move

Decision-making can be tricky; in chess, a wrong move can cause you to lose a piece, a good position, an advantage or even the game. The same could be said of building a website. Preparing for different projects, services and eventualities is one thing, but having the courage, skill and understanding to carry them out successfully takes practice. After examining your options, make your move: put all your careful planning into action.

Checkmate!

So many useful lessons can be learned from chess. If you haven’t played it before, visualizing what we’ve gone over might be hard, but the fundamental principles of the game — how the pieces interact and the role of strategy in the big picture — should not be ignored. The game actively promotes logical thinking and strategy — both useful skills.

More lessons could certainly be drawn from the game, but hopefully this article will serve as a source of inspiration, especially if you feel your goals are out of reach. We often learn the most from making mistakes, losing a battle and then returning to win the war. Nowhere is this been truer than in chess, where a mixture of practice, skill and occasional luck is required to become the grandmaster.

So many aspects of the Web industry (such as syntax, design and ideals) change constantly, but the fundamental principles of learning, growing and trying your best often mean the difference between failure and success. Try to incorporate lessons from the chessboard into your own work; while having all the pieces doesn’t guarantee victory, having the basic skills will give you the confidence and awareness that you need to succeed.

(al)

Footnotes

  1. 1 http://www.flickr.com/photos/mukumbura/3891827047/
  2. 2 http://www.flickr.com/photos/mukumbura/3891827047/
  3. 3 http://www.flickr.com/photos/dlkinney/357134468/
  4. 4 http://www.flickr.com/photos/dlkinney/357134468/

↑ Back to topShare on Twitter

Alexander is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business (HiTechy) and writing, he spends time in Twitter, SitePoint's forums and other places, helping those in need.

Advertising
  1. 1

    One of the best posts on this site.

    0
  2. 2

    This was actually really entertaining to read. I’ve been playing chess for over a decade so it was interesting to see how you made the connection between chess pieces and the web. This is similar to the other article on how coding is similar to poetry in a way. Really nice read so thank you for that.

    0
  3. 3

    Absolutely witty and refreshing analogy. Kudos!

    0
  4. 4

    Fantastic post, it’s a refreshing change from the ‘same old, same old’ posts across the web at the moment.

    0
  5. 5

    Entertaining reading, but…

    “Of all the pieces on a chessboard, the most abundant and least strategically useful are the pawns…”

    Thats not correct.

    As any advanced chess player knows and a lot of books explain, paradoxically pawns actually are the most important pieces in the game of chess, because they define where the others pieces must be placed on and which of them are “good pieces” or “bad pieces” in order to trade them. For example, a bishop is a “bad bishop” if running on dark squares trapped inside its own pawns chain if those pawns are placed also on dark squares, or Rooks (good Rooks) penetrating enemy’s open (no Pawn in front) lines.

    Also as a general rule of thumb, never move forward your pawns unless indispensable: when you move a pawn you create a weak point just in front of it, because the front square can be used as an advanced protected post for your enemy Knights and other pieces.

    This post analysis also flaws describing other pieces dynamics.

    Sadly, in general, the allegories and conclusions drawed are only valid for a game of chess between two weak players.

    No offense ;)

    In the plus side, the advices in the Web front are really good.

    Thanks for sharing.

    0
    • 6

      Agree. The pawns are less “tactical”, but more “strategical” pieces. Tactical means “a series of moves to achieve a defined goal”, (short term, in chess) and Strategical is more about “long term” plan. For their own nature, pawns are not suitable pieces for tactics, but very strong, solid pieces for strategy.

      Nice, nice article.

      0
    • 7

      When I state “strategically useful” (by definition – to reach a specific goal) my intention was in their general lack of flexibility of movement across the chess board (in their ability to position themselves beyond directional momentum) and how it’s often quite rare for them to reach the intended opponents side of the board (and thereby receive a promotion) – which is where the pawns greatest “game changing” advantage can be.

      While it’s true that other pieces rely on the placement of pawns in order to decide the best move forward, their strategic value is arguably less about the piece they actually are and more about the general lack of value they hold (in respect to being useful trading or sacrificing pieces to retain a good position). I appreciate your comments and agree with the consensus you reach but I think perhaps our definitions of strategically useful differ as I certainly didn’t write off pawns as useless, but feel that their benefits to a games strategy lie more in how other pieces take advantage of them then the actual achievement they have upon themselves (as their “attack” power is fairly inflexible).

      Cheers for the comments though, perhaps my wording could have been slightly better!

      0
  6. 8

    Nice analogy though I have to agree with Moises(Comment #5) above.

    Though the principles themselves are solid in my opinion.

    0
  7. 9

    The analogy with chess itself is a good idea, but trying to break it down piece by piece became a little contrived and didnt really work so well.

    Not that im someone who could have done much better.

    0
  8. 10

    Read a book of Garry Kasparov, all time best chess player, How Life Imitates Chess and you will be impressed. Book is awesome.

    0
  9. 11

    I was thinking about getting into chess but now I’m confused.

    Monopoly is my favourite board game. It’s really exciting but don’t get carried away – it’s not real money. I know this from first hand experience when I tried to spend it once at the local super market! They pointed out it wasn’t “legal tender”. It’s a technical thing.

    0
  10. 12
  11. 13

    Have to agree with ‘the TMO’ and most of the other. One of the best reads so far on this site. Love playing chess and designing, and you’ve managed to combine both to make a real good article.

    0
  12. 14

    How random.

    0
  13. 15

    Just another short comment: nothing more to say. Some analogies to work are really right and proper and following considerations are smart and provide clear advice on how to approach some job situations. Obviously, piece-by-piece analogy may be sometimes too strict to face reality complexity, but it is a very good idea.
    Well done.

    0
  14. 16

    Very Interesting, good read.

    0
  15. 17

    Interesting post. I’m a tournament chess player and a web developer. It’s not difficult to draw comparisons between chess and anything honestly. The guiding principles in chess can be applied to almost any facet of life. Here are some chess axioms that can apply to other disciplines.

    Football:
    “Your attack is most effective when using your entire force working together, instead of pieces and parts operating independently.”

    Life:
    “Often times it’s not the most talented who succeed, but the ones willing to work the hardest.”
    “Invest in your defeats, use them as opportunities to learn from, not as obstacles.”
    “No matter how desperate your position may seem, there are always resources to hone in on.”
    “If you sacrifice everything you have in order to win, then it’s not really a sacrifice.”

    Golf:
    “Mastery of chess (golf) is more about mastering your bad habits moreso than mastering your opponent. You cannot control how well your opponent plays, you can only ensure that you play your best game possible.”

    Career:
    “ALWAYS be honest with yourself about your weaknesses. People who choose to ignore their weaknesses only hinder themselves from improvement.”

    I could go on. If you are interested in learning more, the book “The Tao of Chess” is filled with this kind of stuff that applies to both chess and life.

    0
  16. 18

    A wonderfully contrived analogy!

    0
  17. 19

    Awesome post! I’ve been reminding myself of this very thing all week. Move forward, build, protect, sell…

    0
  18. 20

    Great metaphor for website design. We are in the process of building our new business website. We may come to you for the development of it.

    0
  19. 21

    Excellent…my hat off to you my friend.

    0
  20. 22

    Such a great article! Very in-depth and it creates some amazing comparisons I never would have thought about before

    0
  21. 23

    Unreal, how awkward can it get. Worst “experimental” article in years on this site. Pawns are the weakest, huh? Do you even play chess? Obviously you do not. Sad, what a waste of time.

    0
  22. 24

    Totally awesome.. love how you relate different things .. kudos to you !

    0
  23. 25

    i like this sit good job thanks for you

    0
  24. 26

    I think this analogy is going a bit too far, but I would definitely take a good look at various uses of game strategies when building a website and managing a business online.

    0
  25. 27

    really beautiful tips and tricks.

    0
  26. 28

    Excellent…Very Interesting, good read.

    0
  27. 29

    Beautiful one from you guys :D, fantastic abstraction. Love it!

    0
  28. 30

    Nice article!

    But pawns are basically for defense, suitable for both short term and long term goals.

    “A good defense is a good offense”

    0
  29. 31

    very nice.. article.. and well explained…

    0
  30. 32

    Do we really need all these metaphors and analogy based articles that spew the same generic stuff and all these meaningless congratulatory one-liners posts that goes with it?

    What next? The Black Beret approach to web design methodology or how about Tom Peter’s guide to web application development ….. let’s say, The Dalai Lama way of the Web Standards?

    0
  31. 33

    A very, very interesting read. Thanks for sharing your thoughts :)

    0
  32. 34

    Very nice post. Good conclusion from chess. It can even turn people who love chess only into webdesign lover.

    0
  33. 35

    very nice.. and well explained… thanks for sharing..

    0
  34. 36

    Great article! Thanks for sharing.

    0
  35. 37

    Whoah! Great keypoints.

    0
  36. 38

    To quote Denzel Washington in ‘Training Day’…”This sh*t’s chess, it ain’t checkers!”

    0
  37. 39

    brilliant!!!… i could never thought that Chess can be related to Web design…

    0
  38. 40

    Wow interesting read :) bookmarking uer site ~!

    0
  39. 41

    very creative article

    0
  40. 42

    i like this site a good job thanks for this information

    2
  41. 43

    Hi, I look over your site and it’s really good and very interesting the seo on this site is pretty good.thank for inform me Thanks so much Really useful!This site is a very informative knowledge i love this site thanks website admin

    1
  42. 44

    Hi
    Nice interesting article-thanks.
    I’m looking to implement html5 AI chess game into WordPress (2011 customised) theme-any idea?

    0
  43. 45

    Great Article! This was actually really entertaining to read. thanks for this information.

    0
  44. 46

    It can even turn people who love chess only into webdesign lover. its a very nice experience so this site always socializing …………………………….

    0
  45. 47

    Fantastic post, it’s a refreshing change from the ‘same old, same old’ posts across the web at the moment.

    2
  46. 48

    That’s a awesome article you posted.

    My Blog : http://www.removalsandstorage.com/ – removalsandstorage

    0

↑ Back to top