Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

The Lost Files – Interviews: Expert Tips From Renowned Designers (part 2 of 4)

← The Business of Web Design (1/4)TOC3142

Part 3: Red Flags in Web Development

Question: What red flags in your development process indicate that something is not right with the code?

Jonathan Longnecker: With HTML and CSS, we continually validate our code and test on browsers throughout the process. If there are any issues, we’ll catch them then, rather than go back after everything is done and try to fix all the broken layouts in Internet Explorer. We don’t do much custom programming, but when using a CMS such as ExpressionEngine, we make sure to turn on PHP errors, template debugging and SQL debugging during development to help us identify issues.

Jonathan Snook: If things are coded well, then adding new features and reworking existing features becomes an easy process, because the number of touch points is low. You’ve separated concerns well enough to make the new pieces fall into place. It’s like a great game of Tetris in which you set up your next move.

When you reach a point when engineers start saying, “We can’t do that because it’s too hard,” then you know you have some red flags.

Jens Meiert: The development process can uncover coding issues in several ways. The two I deem most critical are quality assurance (QA), or lack thereof, and the high cost of maintenance.

If the development process does not include any kind of QA, be it code reviews, automated tests or manual test stages, you’re very likely to write code of inferior quality. That can result in a variety of issues, from accessibility problems due to latency to higher maintenance costs. In its simplest form, we’re talking about “codex” violations, such as certain types of validation issues and formatting inconsistencies, which don’t necessarily mean a tax for users or the business but just aren’t professional.

There is a healthy balance in which quality is not sacrificed for speed of execution. As always, you will benefit from being smart and adjusting as necessary. You may need a bit of time and a few tries to come up with a process for modifications that works best for you.

Here is a second red flag: if the development process allows too much time for maintenance, then the way you write code likely has a problem. While you will want to build and maintain your code (to add new features, for example), you don’t want to constantly refactor it. Your mileage will vary per project, so attaching a hard number to the cost of allowing too much time for maintenance is difficult, but developers typically have a pretty good idea of whether they’re running after things they shouldn’t be running after or whether they’re doing what makes sense (that is, working on feature requests, not just code refactoring).

Separation of concerns is key to avoiding maintenance issues. For websites and applications, this is pretty straightforward: keep the structure, presentation and behavior separate. This separation is by and large achieved through physical separation?there are a few exceptions where you would want your style sheet to be part of a document, for instance?and functional naming. Change is unavoidable, but some change is avoidable.

Question: What warning signs would you tell newcomers to be aware of when designing websites? What common traps have you observed in the work of other designers and developers?

Chris Coyier: Following trends is a huge trap. How many websites do you run across that are poorly rendered attempts at following a trend? Think of how many “glossy” websites we were seeing a few years ago, many of whose logos from an aesthetic standpoint looked better sans gloss and reflection.

Jacob Gube: The thing you should be aware of as a new designer or developer is performance. It might look good in Photoshop, but what takes experience and much trial and error is optimizing your work not only so that the page response time is quick, but so that the website functions in all major browsers and user agents. Things to look out for are too many images, PNG transparencies (which need at least a JavaScript library to fix), too many style sheets, images squeezed down by tools such as Smush.it and so forth.

This is especially important because page speed is a big part of a usable design. Users hate waiting to get what they want. Also, many Web services now evaluate your website’s speed and performance to determine whether you’re worth sharing (Google, for example, takes your page response times into account when ranking your website).

Common problems I see in Web design, especially from beginners, are the following: too many images, no CSS sprites, pages greater than 500 KB, images that aren’t optimized, and websites designed for the designer’s own browser and screen resolution (usually Firefox or Chrome)?without realizing they look terrible in other major browsers, monitors and operating systems.

Jens Meiert: When it comes to designing websites, the biggest warning sign is a lack of focus on the user. Always keep the user in mind. Usability testing is most useful, and there are cheap ways of doing basic testing, even if it’s asking colleagues, friends or family to perform a few simple tasks and observing how well the design helps them accomplish those tasks.

Part 4: Design Patterns on E-Commerce Websites

Question: Do you recommend “one-click” e-commerce solutions such as Shopify and E-junkie or advanced shopping systems such as Magento? When would you recommend either? Also, which other tools and services do you recommend?

Paul Boag: Ultimately, it depends on size and complexity. Comparing something like Shopify to Magento is unfair. They are aimed at very different markets. Shopify is great for small e-commerce websites that require little in the way of integration with other systems. Magento and its peers are aimed at enterprise-level organizations that have existing stock control and finance systems. It’s about picking the right tool for the job.

That said, there are situations in which smaller solutions such as Shopify show up the failings of larger players like Magento. For example, did you know that none of the enterprise-level e-commerce systems (at least none I can find) work without JavaScript enabled. I find this interesting, because a smaller player like Shopify is perfectly accessible with JavaScript off, while still offering the AJAX goodness when available.

Chris Coyier: I’m a fan of the one-click e-commerce solutions. It should go without saying that these are the best systems when selling very few products. We used E-junkie to sell our book Digging Into WordPress online, because it’s extremely easy to set up and offers the very few features that we needed, such as PayPal and credit-card check-out, an affiliate program and basic reporting.

But other one-click solutions, such as FoxyCart, are comparably easy but by no means limited to selling only a few products. FoxyCart is built to integrate with any CMS. I’ve personally integrated it with WordPress a number of times, utilizing the CMS abilities of WordPress and the cart and other e-commerce features of FoxyCart. This is particularly cool because if someday for some reason I wanted to switch e-commerce systems, I could pull FoxyCart out and put a new one in and not affect all the work I’ve done with WordPress.

I’m not saying a system like Magento is bad. Magento probably has the most features of any e-commerce system and is a CMS in and of itself. If you are building a website that is primarily a store and has loads of products and robust e-commerce needs (for example, zone shipping), using a system like Magento or Pinnacle Cart may be the way to go.

Question: What usability problems are common on e-commerce websites?

Paul Boag: Wow, there is probably a book on that question! I have already written a number of blog posts on the subject, including “Happy Customers Through an Improved Checkout.”

If I had to pick one, I would say forcing users to register up front. People come to an e-commerce website to buy, not to register. When they are focused on the purchasing process, they do not want to worry about registration.

Worse still, they perceive registration as something that retailers want them to do, rather than something that benefits them. I have watched users abandon websites when they are forced to register. Not something you want to happen.

What is strange is that, ultimately, the only thing a user needs to do to register is enter a password. The rest of the information is collected during purchase.

Why more e-commerce websites don’t allow users to register at the end once they have made their purchase is beyond me.

Chris Wallace: I think for most e-commerce websites it is the amount of information required to check out or open an account. People often look at a giant form?asking for billing address, shipping address, credit card information, discount code, user name and password?and become quickly intimidated and head off to Amazon, where they simply log in with their email address and password, because it’s more convenient.

A couple tips to solve that issue and others:

  • Break up your registration or check-out form to appear less intimidating. This might call for one-step check-out, such as on the e-commerce platform Magento, where fieldsets are kept separate and open up (accordion-style) when needed, so that users are not staring down a giant page of form fields. Make it feel lightweight, and people will feel more comfortable entering their information.
  • If the software allows, give users the ability to create an account using just their email address and a password. This at least gets them in the door and instills a basic level of trust in your brand and website. By not requiring everything (such as their grandmother’s maiden name or first-born child’s social security number) you send the message that you value privacy and won’t ask for their personal information unless they purchase something.
  • Offer a unique value proposition to first-time customers: “Receive $10 off your first order of $50 or more.” This type of incentive is huge because the initial sale is the largest barrier to getting new business. Going somewhere they trust is much easier for users than buying from an unknown.

← The Business of Web Design (1/4)TOC3142

Footnotes

  1. 1 https://www.smashingmagazine.com/the-lost-files
  2. 2 https://www.smashingmagazine.com/interviews-expert-tips-from-renowned-designers-part-3-of-4/
  3. 3 https://www.smashingmagazine.com/the-lost-files
  4. 4 https://www.smashingmagazine.com/interviews-expert-tips-from-renowned-designers-part-3-of-4/

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top