How to create a simple layout with CSS Grid Layouts

A clear and simple explanation on approaching CSS Grid Layout for a basic site layout with header, sidebar, main content, additional content and a footer.

When the practice of web design was new, layouts were pretty simple. Header, sidebar, content area, and footer. Now, as the web has evolved, our layouts have become more complex and we have a lot more to contend with as web designers. We often need numerous content regions, responsive design, multiple page layout template designs, amongst many other things. And to implement the design and get it to display correctly, floats and positioning are required. Floats sound simple, but these can sometimes be tricky to work with.

Luckily, there will soon to be an easier way to design and display web content. It’s an awesome time to be a designer because CSS Grid Layouts are gaining traction.


Making stakeholders aware of the impact of website performance

In this article, the first in a series, Jonathan Fielding explains the different kinds of performance (render, page load, perceived) and also covers how to make stakeholders understand the benefits of spending time improving performance.

When I build a website I obsess over performance. I will rip out a JavaScript library from a project and replace it by another to save an extra 10KB. I do this because I understand the impact of performance. Both as a developer who has built a wide variety of sites and as a user who spent last weekend struggling to get one bar of signal at a campsite.

While my experience as a developer means I will go to extraordinary lengths to ensure the websites I build are performant, there is a limited amount of impact that I can have on my own. I therefore need to look at how I can champion performance with the project’s stakeholders to ensure that everyone is committed to ensuring the website is fast.


Designing Responsive Progressive Web Apps

  • Publisher:
  • Categories: Performance, Mobile First, Progressive Enhancement
  • Published: 19 Aug 2016

I highly recommend checking out the article, as you might tell from being headline for the week. Jason always delivers a great open discussion in his articles and leads you to all the options to make up your own decision, and this article focuses less on the technical aspects of building responsive web apps and more around the things we need to consider from a more broad standpoint.

Responsive Progressive Web Apps force us to tackle design challenges that we’ve been been able to side-step thus far.

At the heart of it are two questions that the web community has debated since the introduction of the iPhone for which there is no consensus:

  • What makes something an app?
  • How do user’s expectations change when they consider something to be an app?


Why our website is faster than yours

Some great tips around building a faster site including design, content, images, SVG, fonts, JS & CSS loading, server settings, and caching. Very much worth your time for a read and a tinker on your own site

We recently updated our site. Yes, it has a complete design overhaul, but as real software developers we focused a lot on the technical bits and pieces as well. Our goal was to take control, focus on performance, be flexible for the future and make it fun to write content for the site. Here’s how we made our website faster than yours (Yup, sorry!)


Complexion Reduction: A New Trend in Mobile Design

Is mobile design simplifying to simple black and white design? If so should our mobile first websites go the same direction? It's an interesting trend but as one astute comment put it "Form follow function. Following a trend doesn’t add value to the app. Understand the core purpose of the app and allowing visuals design to complement the purpose is more meaningful than to follow the latest trend."

You’ve never heard of ‘Complexion Reduction’ you say? Well yea, that’s because I just made the term up. Recently I’ve noticed a new trend that is beyond flat design, beyond minimal design and independent of progressive reduction. Some may claim that this is just the next step of minimal design being implemented into the mobile realm but I say it is something more distinct. There are specific similarities and characteristics that define this new trend. So I decided to name it. I’m allowed to do that, right?


Weighing Aesthetics and Speed

The super smart and performance guru Lara Hogan talks about why performance matters so much and how Typography can be an issue (and how to ensure it isn't)

So when you think about what our users experience when they visit the website or apps, it would be a combination of what they see and what they feel. What they see has everything to do with branding and intuitiveness and we talk about making things delightful. But also we can talk about feeling, right? They can feel how slow it is. Or they can feel how sluggish or how long it might take to tap or click on something or see something else change on the screen. When it comes to performance, it doesn’t just mean how long a page takes to load. It can also mean how quickly things become interactive. And all of this contributes to an overall user experience. Not just colors and brand, and it has everything to do also with the overall feel, which absolutely includes speed.


Pattern Lab | Build Atomic Design Systems

Happy Birthday to Pattern Lab as it turns 2. Not two years old mind you, but version 2! This is jam packed with everything you could need to role out a pattern lab in any build you're looking at, well worth checking out.

At its core, Pattern Lab is a static site generator (powered by either PHP or Node) that stitches together UI components. But there's a whole lot more to it than that!


A Comprehensive Guide to Font Loading Strategies

Once upon a time we would craft a 20 minute long article about all aspects of building a website, and now we have one that focusses entirely upon font loading strategies. This is why I love the web!

This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice.


Web Notifications, Part 1: Interactive

Notifications are one of those things that the native folk keep waving (literally) in our face. Well as web notifications become more main stream we can shove those native notifications up..... There are some caveats as Madeline Welsh from the Guardian mobile lab points out in this article

Interactive notifications, through which we give users the opportunity to self-direct as they move through a narrative using action buttons embedded below a small amount of text, were the first type we worked with, starting with the first jobs report experiment.

In this format, currently only available on Chrome, the user’s response to a prompt within the initial notification informs the interaction they will continue to have with the notifications to come. By using the action buttons below the body text as a navigational tool, the user moves through a thread. We’ve run several iterations of an interactive notification through the jobs report experiment each month.


HTTPS for GitHub Pages

Github are upping their game for anyone with a site and will allow people to run them over HTTPS... hoorah!

You can now visit * sites using HTTPS and configure HTTPS enforcement for your site. With HTTPS enforcement enabled, any HTTP requests to your site will be transparently redirected to HTTPS.


Thank you, jQuery

Jeremy recently updated HuffDuffer to a progressive web app and as part of that process stripped out jQuery. The great thought is that jQuery purpose is to eventually cease to exist.

After that, I decided to refactor the JavaScript too. There, I had a clear goal: could I remove the dependency on jQuery?

It turned out to be pretty straightforward. I was able to bring my total JavaScript file size down to 3K (gzipped). Pretty much everything I was doing in jQuery could be just as easily accomplished with DOM methods like addEventListener and querySelectorAll , and objects like XMLHttpRequest and classList .


Inline validation in forms

Looking at the validation of forms as you complete them.

After having released my own form validations library, I couldn’t stop asking myself one thing: What is the best user experience when it comes to displaying the inline validation errors? I know that the library itself can handle anything, but I wanted to find out what the best default experience was, something I could provide out-of-the-box.


Improving CSS quality at Facebook and beyond

How Facebook keep on top of their constantly fluctuating CSS.

Not only are we dealing with a large codebase, but things are also moving fast — new features are being added, existing ones are being improved, and things are being reorganized.

For CSS, this means having thousands of files that are in a continuous state of flux.


Promoting a Design System Across Your Products

A design system’s success is all about how you define and message it.

Creating such an inventory can feel draining for a designer. Some modern digital organizations struggle to fill out an inventory like this. I’m talking deer-in-headlights kind of struggling. Completely locked up. Can’t do it. But consider life without it: if you don’t know the possible players, you may set yourself up for failure, or at least a slower road to success. Therefore, take the time to understand the landscape, because the next step is choosing the right products to work with.


Don’t use iOS meta tags irresponsibly in your Progressive Web Apps

  • Publisher:
  • Categories: Implementation, Progressive Enhancement
  • Published: 28 Jun 2016

There are a tonne of good reasons why adding the web app metatag on your web app could be a bad user experience

In the last months I’ve seen several apps creating what is known as a “Progressive Web App”. After 10 years of advocating using web technologies to create web experiences, this is a great time. Although I want to focus here on a big user experience issue that most of these apps are having today on Safari on iOS because of a meta tag that is being used irresponsibly.


Developing in the Open

How foundation has gone through the process of being an internal tool to becoming an open source project with more than 1000 contributors.

This may sound counter intuitive, but the way you keep a vibrant open source project is by saying 'no' more than you say 'yes.' How can that be? Because strong opinions guide the growth of a project, attract like minded contributors and keep the quality level high. Foundation has always been more than a tool for us, it's a philosophy, a point of view. We have a clear mission here at ZURB, to change the way people design connected products and services, and Foundation is one the ways we're helping transform organizations.


Enhancing Optimistically

The cutting the mustard test might be fit for applying enhanced CSS styles, but as this article shows the JS code itself that provides the enhanced functionality might not be there immediately. Fortunately Scott Jehl is UBER clever and has a solution for us.

Every so often, we come across ways to improve our more well-trodden core progressive enhancement patterns. Sometimes, we'll utilize a new web standard to address problems we'd previously approached in a less-optimized manner, while other times we'll make adjustments to address browser-or-network conditions that could be handled in more fault-tolerant ways. Recently, I came across an example of the latter, and this post will document a small but meaningful way I worked to accommodate it.


Dave Goes Build

The other evening I had a few drinks with my long time friends Al and Bart to wet Darcey's head. During out drinks we talked about WWDC and how underwhelmed we were but also about Microsoft Build conference and just how well they were coming up to speed with our industry. Dave Rupert attended the conference in person and you should take a look at what he's go to say (it's pretty much all good).

At the end of March, I was invited out as a part of the #davegoeswindows experiment to attend Build 2016, the annual Microsoft developer conference. Think WWDC or Google I/O, but for Windows developers. Over three days of keynotes, roundtables, breakout sessions, and an expo I was able to learn from and speak candidly with many people at Microsoft. Most of my questions were centered around the state of software, hardware, and where things are going in the Windows ecosystem.


Learn and Teach

A great open talk about how we can all Learn and Teach in this industry. Everyone has a lesson to share, and everyone can learn from it.

The most amazing thing is seeing people join codebar at the very start of their learning journey and watching them progress. This year, two women I helped at codebar went on to get their first jobs in the industry as junior developers. I remember introducing them to their first lines of HTML and CSS about a year ago, and now they are flying in their new jobs, which is awesome, and I feel proud.


Chat bots, conversation and AI as an interface

Are we still building websites if we're using chat bots to communicate our messaging? My good friend Al believes that bots are the way of the future, and with many company's jumping on the bandwagon it's becoming more difficult to argue with that idea. At the end of the day the websites that we build are there to provide content or services to our users however and whenever they want to use them. In the same way that we syndicate our content through RSS feeds to RSS Readers, or through Googles Accelerated Mobile Pages (AMP), or the Facebook Instant Articles now open for everyone... the same process of syndicating our content or services into a bot framework interface can be followed. I LOVE the approach that City Mapper have taken with their GoBot, definitely check it out.

One way to look at any given AI problem, in the crudest terms, is to ask whether solving this needs 'general AI' or whether your domain is narrow enough and your solution broad and flexible enough that you can deal with a wide enough percentage of potential scenarios without having HAL 9000. That is, we're clearly pretty close to making a car that can handle highway driving with no human input, since the range of possible events is pretty small, but is driving in central Rome or Moscow an entirely different matter that needs an entirely different level of decision-making? What does that hand gesture mean?