Back to List

Most Promising Ways to Improve Website Design and Development

Axel Larsen Axel Larsen  |  
May 24, 2018
 
I recently had the privilege of attending Smashing Conference in San Francisco. Filled with many like-minded developers and designers, Smashing Conference brought together an excellent lineup of some of the most promising ways to improve how we design and develop websites. It was a great way to become acquainted and familiarized with these new features and tools from people who’ve gained some practical experience using them.
 
It would take me an entire book to go into detail about all the topics covered, so here’s just a handful of things I took away from it.
 

Website Performance

Unsurprisingly, the topic of performance was a big deal. It’s not enough for a site to be responsive; if the content, images, scripts, etc. take too long to load, users will lose patience and bounce. Ideally, a project’s team will have a plan and set of standards for the performance of their site for the entire development process and not haphazardly create one moments before or after launch.
 
Of course, “performance” is a broad term when it comes to a website. A whole bunch of things can impact a web page’s performance and the ways to improve those things are endless. Although there is usually some low hanging fruit when it comes to improving a page’s performance, prioritizing which optimizations to implement often feels overwhelming.
 
Already feeling anxious? Take a breath; pick just one thing from the list, resolve it; take a moment to be proud of yourself and repeat:
 
  • Aggressively cache your site’s assets and resources
    • Consider utilizing a service worker to manage what/when/how resources are cached by the browser.
  • Compress your resources with GZIP, Brotli, Zopfli, etc.
  • Take advantage of the rel=”preload” value for essential site resources such as CSS and JavaScript.
  • Understand that JavaScript is, byte for byte, more expensive than HTML and CSS because browsers have to load, parse, compile, and execute it.
    • Evaluate the JavaScript loading on your site
    • Establish a performance budget for each script
    • Establish a set of standards for third-party scripts
      • What explicit value is each third-party script adding to your business?
    • Measure, Optimize, and Monitor the performance of JavaScript on your site
      • What redundancies can you remove from your JavaScript, especially third-party?
      • What polyfills can be replaced with graceful degradation through HTML, CSS, or JavaScript?
 

CSS Grid

One of the most promising new features of CSS is the CSS Grid. It gives developers control of how to lay out child elements of a designated container across two dimensions (horizontal and vertical). That means there’s less need for nesting HTML elements within one another to create layouts with a varied number of columns across multiple rows. Even better, assigning alignment, size, and justification of elements is even easier. Say goodbye to display:table and vertical-align: middle (or any other variation to accomplish vertically centering an element)!
 
Useful Tip: if you’re not sure whether to use Flexbox or Grid to size and align your elements, ask yourself if you need to set properties for your elements on one dimension (Flexbox) or two dimensions (Grid).
 

Fonts & Typography

Fonts are a big deal when it comes to the design of a website. Fonts can greatly influence the tone of a website and the copy it renders. However, the biggest drawbacks about fonts are their size and the time it takes for a browser to retrieve a font file and then render the text on the page in those fonts. Worse yet, browsers behave differently during the time it takes to get those font files. Some don’t render the text, others render transparent text, and others render the text in a different font altogether until that time. But now developers can control what the browser does with your text as it tries to resolve the specified font using the font-display property.
 
Another frustrating problem that many web developers encounter is adjusting font sizes across so many device sizes. Creating new media queries and somewhat arbitrarily adjusting the font-size for every 100 pixels might be the most tedious styling task. Even after you think you’ve made all the necessary adjustments across all common viewports, you’ll find that one set of dimensions that leaves your content with awkward amounts of whitespace across your page.
 
Fortunately, there are two solutions you can implement with your CSS that should resolve many of these adjustments:
 
  1. One is coined as “Fluid Typography” which essentially uses the CSS calc() function to dynamically size your text based on the viewport dimensions.
  2. The other is called “Modular Scale Typography” where each type of element’s font-size is based on its successor multiplied by a constant factor (e.g. p = 1em; h6 = 1em * 1.2; h5 = 1em * 1.2 * 1.2).
 

@Supports Queries

This one is simple and likely to be one of the most useful. Although it’s only supported by modern evergreen browsers, @supports queries will allow you to scope CSS to browsers that support a given property and/or value combination. For example @supports (display: grid) { … } will let you set styles on browsers that support the grid value for the display property. This means you won’t have to rely on CSS hacks, JavaScript, HTML comments, etc. to style your page contents based on what browser version is viewing the page.
 

CSS Custom Properties

Custom CSS Properties will allow you to dynamically set variables within the scope of a given selector. For example, let’s say you have a site that sells audio equipment and you want to display your products relative to their average size. Your CSS could look like this:
 
.product {
          --product-size: 10em;
          width: var(--product-size);
          height: var(--product-size);
}
.product.product-amplifier {
          --product-size: 20em;
}
.product.product-speaker {
          --product-size: 30em;
}
 
The .product-amplifier elements will have a width and height of 20em while the .product-speaker will have a width and height of 30em and any other .product elements will only have a width and height of 10em.
 

There’s still a lot to learn and try

Of course, even after a two-day conference and a one-day workshop, there’s still a lot to learn and even more to experiment with. Sprinkled between each presentation were plenty of other insightful pieces of information gleaned from fellow attendees who likely have as much to share as the keynote speakers (even if they don’t quite realize it).
 
If you’re looking to gain some exposure to modern web development practices at a similar event, consider going to Smashing Conference in Toronto, Freiburg, or New York. Keep in mind that Smashing makes every one of their conferences a little bit different from one another; none more so than Toronto’s which will be a slide-free conference (i.e. no PowerPoint).
 
Want some help implementing these new features to improve your site? We're here to help.
 
Web Development

 

Love our Blogs?

Sign up to get notified of new Skyline posts.

 


Related Content


Blog Article
Website Security: 3 Steps to Protect Your Users’ Data from Attack
Nick KwiecienNick Kwiecien  |  
Jul 23, 2019
As consumers increasingly care about keeping their information safe and secure, we developers need to make security our mission. Especially in today’s world where there seems to be a new content management system out every five minutes, it’s important to make sure your site and its...
Blog Article
When to Consider Using a Headless Content Management System
Daniel MaleyDaniel Maley  |  
May 29, 2018
As a member of Skyline’s Website Design & Development team, I have built several websites over the years using traditional CMS platforms. Building your website with a great CMS like Kentico has a ton of benefits such as improved site maintenance, workflow management, security, and the...
Blog Article
What Skillsets are Needed to Maintain a CMS Website?
Marla KrauseMarla Krause  |  
Apr 24, 2018
Most people realize they need to understand SEO. But what most don't realize is that they need to understand, to some degree, how a webpage is built to be able to maintain their website.   If you're working with a CMS (Content Management System), like Kentico, Sitecore or even...
Blog Article
The Prevalence of Webhooks
Alex WoodwardAlex Woodward  |  
Feb 23, 2017
Modern web and mobile applications often require real time information transfer from a server to a client. With a server able to push content to connected clients instantly, as it becomes available, the server does not have to wait for a client to request new data. This need may arise for...
Blog Article
Mobile Developer Certification at Xamarin University
Justin WeyenbergJustin Weyenberg  |  
Feb 09, 2017
After 60 something hours of coursework and an exam, I recently became a Xamarin Certified Mobile Developer and I’d like to share what this involved and how I succeeded.   To earn your certification you’ll need to enroll at Xamarin University, Xamarin's online training...