Developing for eCommerce: Q&A with a Technical Architect
Last week, LYONSCG Technical Architect Eric Marsh gave a presentation on eCommerce development to members of Chicago’s web technology community at a local TechNexus Meetup. Speaking to a group of 50 developers, enthusiasts, and web professionals, Eric discussed a front-end developer’s role in implementing an eCommerce website.
I caught up with him to dig deeper into some key points from his presentation.
Mary Clare Riordan: You talked about how internationalization is one of the most important topics in eCommerce today. With retailers and online sellers launching global sites to tap into additional markets, what should a front-end developer keep in mind when creating international sites?
Eric Marsh: Two things a developer should keep in mind for international websites are language and currency. Think about how different languages will affect the way text displays on the website. For instance, if you’re developing the navigation for an apparel website going live in the US and Brazil, what are the maximum number of characters allowed in top-level category names? A category name called Kids on a US site might have only four characters, but the Portuguese translation, Crianças, has eight. So, developers should take into account each country’s language and how words and phrases will display online.
A good rule of thumb is to use a text-expansion area of 20 percent, which means developers should leave a space that’s 20 percent bigger than what they used for English text. In the previous example, if you look at the total number of characters used in the top-level categories on both sites, you’ll notice a big difference. If the categories are Men, Women, and Kids on the US site (12 characters total) and Homens, Mulheres, and Crianças on the Brazilian site (22 characters), that means a text expansion of nearly 85 percent.
For currencies, developers should think about the various formats and decimal separators used in different countries. Some countries place the currency symbol after the amount or use commas as a separator instead of decimal points. Make sure you take into account where such symbols should be placed.
MCR: You also spoke about accessibility and your approach to ensuring websites are accessible to all users. What are some best practices a developer should keep in mind when it comes to site accessibility?
EM: Since developers are responsible for creating the visual elements a web user sees and interacts with, it’s our job to make sure these elements are equally accessible to everyone. A few accessibility features you can implement on your website include:
1. Including audio and written transcripts with any videos on your site
2. Adding text to graphics so screen readers can communicate your site’s content
3. Creating simple, clean pages that are easy to navigate. This can include link text that clearly describes where a link will take a user. For example, which link text is more descriptive: Click here or learn more about creating strong passwords.?
Using these practices, your site could reach millions more potential customers who are likely looking for you, too!
MCR: Right, and once millions of new users land on your site, the goal is to convert them into actual paying customers. You discussed how a site’s checkout process has a big impact on this. What role does a developer play in maximizing site conversion? Isn’t that the job of a digital marketer?
EM: No, not necessarily! Well yes, of course marketers are the ones who create and drive conversion strategies, but developers can play a role, too.
One aspect of this is whether to use a one-page or multipage checkout process. Of course, each website is different so developers should look at all options to decide what works best for a site’s users. But overall, a multipage checkout process is the most effective at getting a customer to complete a purchase. You might think a one-page process would be better at this because it’s “only one step,” but in actuality, it can confuse and overwhelm customers by including too much at a single point. A multipage checkout is much more organized and does a better job of guiding users down a clear path to purchase.
Also, from a developer’s standpoint, multipage checkout is easier to create. Unlike a single page with a complicated coding structure, multiple pages have simpler coding tasks on each page, which means less room for errors.
MCR: That probably affects how fast a customer can complete the checkout process, too. What role does a developer play in making sure each page—and the website in general—loads quickly?
EM: It’s a big part of our responsibility. Our goal is to code the website in a way that decreases overall page weight and reduces the time it takes for a user to interact with the site. There’s a few ways a developer can do this:
3. Have the page asynchronously load noncritical data
4. Ensure assets are being cached on the browser
For the third point, product reviews are a perfect example of noncritical content to asynchronously load. Don’t get me wrong: product reviews are definitely important on eCommerce sites, but they’re considered noncritical in this sense for a couple reasons. First, they appear lower on a page, so shoppers won’t typically notice if they’re not immediately visible. Second, product reviews, while helpful, are not required for a customer to make a purchase the way a product’s price or the buy button is.
Here’s how to defer loading of product reviews using jQuery:
1. Configure the content so it can be pulled in a partial, i.e., with no site header and footer
2. Use the $.ajax command to fetch the partial
3. Wrap ajax command so it’s not triggered until the browser is in a ready state
4. Append the html from the partial to the ID or class on the page where the content should live
For something less technical, check out some other posts we’ve written on the LYONSCG blog about measuring and improving eCommerce site speed.
MCR: Before we close out today’s Q&A, I’m curious to know what you think is the coolest thing about working as a front-end developer?
EM: What’s cool about being a technical architect is that my work not only contributes to the success of a site feature or functionality, but also to the client’s website and business overall. It’s not just about making a great-looking home page or developing a cool site feature, it’s about how that great-looking home page or cool site feature fits into to the bigger picture. Whether it’s improving site speed, optimizing conversion, or just helping clients find a more efficient way of doing things, I’m always thinking about the impact my work has on other parts of the website and the client’s entire business.
Eric is a technical architect on LYONSCG’s eCommerce Implementation team and has worked on websites such as Rockler and Pharmaca.
Mary Clare Riordan is an event marketing manager at LYONSCG, a proud Marquette University alum, and JFK’s #1 fan.