Website Design and Development Takeaways from SmashingConf

By on November 26, 2018

This year in New York City, Smashing Conference focused on UX (user experience) design and front-end development. While many people think website design and development are very different areas, I came away with a new understanding of the similarities between the two disciplines. At a full-service marketing agency, new ideas like this are what keep us fresh and producing cutting-edge work. That said, good ideas deserve to be shared!

Here are some of the biggest takeaways from Smashing Conference that designers and developers should start using now:

Better Inclusive and Accessible Code

Coding for accessibility is important for all websites, but unfortunately it’s not always considered a high priority when a project’s timing gets tight. Thankfully, there’s actually a lot of things a front-end developer can do to improve accessibility just by using best practices when writing the site code.

Sara Soueidan’s session on Building Inclusive Experiences with CSS and SVG provided tons of practical tips, innovative code snippets, and fresh ideas on how to include accessibility in website builds without blowing up the budget.

Among many great tips Sara provided, one of my favorites is this way to create fully responsive text with an upper and lower size bound that also plays nicely with a user’s browser text size settings:

The “Long Tail” of Performance

When building websites, performance is a big component in what sets apart a custom-coded website theme from a premade one. We focus the bulk of our optimization time on the browsers and devices that the majority of people use, but there are plenty of users who fall outside that majority, or who have a slow connection, an overburdened device, or something else entirely.

These people fall in the “long tail” on the performance graph—user sessions that aren’t statistically the bulk of the server requests, but still important to consider.

Tim Kadlec provided some interesting case studies on this topic; here are some quick facts from his session:

  • When developers are testing sites, their connection is likely quite good. Use the connection throttling tool in browser dev tools to simulate a poor connection and uncover issues you might not spot otherwise. 
  • Using multiple webfonts can cause more issues than you might think—if the webfonts are slow in being delivered, the browser will wait up to three seconds before rendering any text at all. If the fonts aren’t delivered all at once, the browser will have to re-render the screen each time a new one is delivered. Reduce the number of webfonts you use by considering system default fonts, using browser font synthesis instead of true bold/italic fonts, and using font-display: fallback to display unstyled text immediately rather than waiting. 
  • Really consider how you’re using JavaScript. It’s not guaranteed that it will load, especially on mobile, and you should make sure your site is still usable (decent-looking, even!) with no JavaScript. 

Encouraging Clicks

Most of our clients build their websites to give their users enough information to convert, whether that conversion is reaching out for a quote, signing up for a newsletter, or making a purchase.

Some designers and developers will try leveraging dark patterns that try and trick a user into taking an action they don’t intend in order to increase conversions. Tricks like this make users angry and can hurt overall brand perception, which is why we already avoid using dark patterns at all costs. At SmashingConf, Paul Boag suggested that thinking about fine details can go a long way towards making a user feel comfortable converting, instead of tricking them into doing so.

Here are some of the tips he gave during his session Encouraging Clicks:

  • Set expectations. Do the photos in your marketing materials reflect the full range of people who you want as clients? If all the photos feature people under 30, then prospects over 30 will subconsciously assume the product is not for them. Don’t leave your message open to misinterpretation.
  • Pay attention to tone. Are you giving enough information, and stating it clearly? People want to know both features and benefits of a product, so make sure to state both. Think hard about the writing style your brand uses and optimize all copy elements for clarity. It’s a great way to build trust between you and your customers.
  • Think about the customer’s mindset. What’s stopping that interested person from signing up for your newsletter? Is it unclear what content they’ll receive and how often, leaving them worried about signing up for spam? Allay their fears with some copy describing the newsletter, and see if conversions increase. Same goes with things like return policies, privacy policies, or choosing a plan. Prospects may be interested in engaging with your company and even making a purchase, but they also don’t want to sign themselves up for future frustration.

More Practical Takeaways from SmashingConf

Events like Smashing Conference are incredibly important for designers and developers to stay ahead of the curve. Digital experiences can be like swimming upstream – if you stop moving and learning what’s new, you’ll fall behind and get washed away as your content and strategies become dated. Whether you’re getting knowledge at industry conferences, newsletters, blogs, or other forums, it’s critical for designers and developers to hunt for new techniques, strategies, and tools to get better and faster results.

SmashingConf hosts yearly events in New York, San Francisco, Toronto, and Freiburg. Watch videos from past conferences or buy tickets for upcoming events on their website.

About Ridge Marketing

Ridge Marketing is an agency that specializes in crafting creative digital assets and using websites, search, advertising and email to ensure that the right prospects interact with your brand and become loyal customers.