CSS: Layout with Grids

Using CSS layouts with grids means rethinking the way we layout and organise information on our websites. CCS Grid is the first true two-dimensional layout tool that allows designers to tackle content layout as one whole cohesive piece instead of miscellaneous bits of content jammed together with no order or structure.

Designers are now working backwards from the outside in, starting with the grid, then placing our content within the columns and rows of that grid. This requires designers to think more carefully about the relationships and placement between different pieces of content, both from a communication and, layout and design perspective.

Let’s look at the CSS Grid’s features:

The first is that only direct first-level descendants of a grid container are grid items. This means that if you have descendants of those first-level descendants that you want to place in the grid, you will have to create a nested grid.

The second feature is that CSS Grid creates a true grid. This means that unlike ordinary CSS, CSS Grid works within strict lines and rows.

The third feature is content stacking. When you manually place items in a cell, the browser will allow you to place multiple items on top of one another in that same cell. The items are displayed in HTML source order, meaning that the further down in the HTML document an item is, the higher up in the stack it appears. You can manipulate this so that certain items appear while others stay hidden.

The fourth feature is content ordering. Because you have the ability to place any piece of content in any section of the grid you can easily visually change the order of your content without changing HTML markup structure.

Once you’ve completed your HTML, you have almost full freedom with creating layouts using the grid as it is purely visual. You can turn grids on and off or change their columns, rows, grid areas or anything else at anytime. 

CSS Grid gives designers a new and dynamic interface that challenges the way you might think about layouts and web design!

Since CSS Grids can be confusing to get the hang of this tutorial helps explain the basics of using a grid:

Intellectual Property and Open Source Code

I will explaining how to figure out if a piece of source code is open source or not, The Open Source Initiative defines open source code using a criteria of 10 factors that must be met to for software or its associated license to be consider open source.

Let’s look at these 10 factors:

Free Redistribution:

Although you have the ability to charge for software that includes an open source project, the code you get from the open source project can not require a royalty or any other fee,

Must provide source code:

This goes to the core of open source code, without the source code and the ability to use, modify, and distribute that code, there wouldn’t be any benefits to having open source in the first place,

Must allow derived works:

The license must allow them to be distributed under the same terms as the license of the original software. The is important to the whole idea of open source which is to nurture an ecosystem that builds upon the work of others,

The integrity of the author’s code must be maintained:

The ability to trace code to specific authors is necessary. For example, code you contribute and modify should be traceable to you. This is accomplished through the use of public repositories like GitHub, and the request and acceptance of pull requests from individual contributors,

No discrimination against groups/persons:

Open source does not allow discrimination against persons or group and similar to this point,

No discrimination against fields of endeavour:

Open source means open, the code should have no restrictions on how software can be used,

Distribution of only one license required to secure rights:

Everything required to secure rights is in the distributed license, meaning there are no subsequent activities that must be carried out in order to use, modify, or distribute the code. 

License must not be specific to a product:

The rights attached to the program must not depend on the program being part of a particular software distribution. If open source code was limited to specific products. Open source cod can still rely on other open source projects but it cannot require you to acquire a product that is not open source in order to use and implement that open source project. 

License most not restrict other software:

This means that you’re free to include your open source code with proprietary code. Your use of open source software doesn’t require that your entire project itself has to be open sourced. 

License must be technically neutral:

No provision of the license may be predicated on any specific technology or style of interface. Again, open means open, and it has to be open to a variety of technologies and interfaces. 

So, if you’re in a scenario where the license/software meets these 10 factors of the criteria, then what you have is open source. 

I found this wonderful explanation for open source code using legos!

Navigation in Design

It’s important as a designer to think about who exactly you are creating your site for. What kind of consumer? What kind of audience? Some designers find it helpful to sketch out the characteristics  of the visitors of their site, what’s important to them, what are they there to achieve, and what might deter them from using your site. 

Through the rest of the design process, keep referring back to this initial sketch you’ve created of your target audience. This gives your site a focus that you wouldn’t have if you hadn’t throughly thought about who the visitors of your site would be or if you thought that your visitors was a wide range of people.

The next most important thing to consider is the how you display and create a navigation system for the information that your visitors are looking for. Visitors will stuggle to find what they want if it’s surrounded by clutter or useless content. All elements of the your webpage should be helping create the story of your site, and if they don’t help, then you should remove them. An example of this is site decoration, graphics and images should help tell visitors instantly what your site is about. A florist’s site should show flowers, a car salesmen’s site should show the vehicles they have for sale. This lets people visiting the site know right away that they’re in the right place.

Images you use should help to explain your content and adverts should be relevant to things that readers are likely to care about. 

Then when it comes to text on a site, most designers will cut the amount of text the have by 50%, integrating images and visual features along side the text so that it your site feels more concise and less cluttered. It’s also important to  find fonts which are legible on the screen to make sure visitors can easily read and understand the information on your site.

This video gives some tips and tricks for figuring out good layout and design:

Accessibility in Design

As designers its our job to think about making our products accessible to everyone, we should be thinking of ways of making our products accessible from the start which is what I’ll be discussing in this blog post

When we create designs, we use several tools to communicate. One of the most obvious tools we use in design is color. It is a an element which we use to communicate various things such as status or emotion, and helps us distinguish one thing from another. Now, lets take into consideration that one in 12 men, and one in 200 women have some form of color blindness, that’s around 315 million people in the world. 

Knowing that, how should we as designers change our products so that they no longer rely solely on colour to relay a message. We’d use other methods to distinguish things from one another. This is not to say that we should remove colour all together, but to ensure that it isn’t the only method to communicate your message.

Now lets consider the keyboard for a moment.

 One of the most important requirements for accessibility is keyboard usage. Because this can genuinely affect people with many different types of disabilities. When you, as a designer, make things accessible to use with a keyboard, you make it work for people who can’t use a mouse. 

Some people may have mobility challenges or issues that make it difficult to use a mouse. Other people may be blind and can’t see the screen and need to use a keyboard. Keyboard usage also makes it accessible to people that use other assistive technologies like voice recognition software, switches among other devices.

It’s important as designers to consider ALL the people that may use our products and ensure that we think of them as we’re designing our products.

This interesting video discusses more about the benefits of accessible design:

Aesthetics in Design and Web

Aesthetically pleasing and good designs are vital to the web industry. They help communicate a mood, or a feeling that goes beyond the general content of the design. In the era of the internet and smartphones, design aesthetic has evolved to include other senses like hearing and touch. 

Designs for the web should be fluid as it’s necessary now for designs to adapt to a variety of devices that our users use, which requires far more thought and detail than design styles used for print content.

In design, first impressions are vital. A good or bad design can change how you feel or associate with a brand. Good design are more likely produce positive feelings and trust towards your product. Good design can have as much influence on a consumers as non-visual things like prices. As a web designer, you have a responsibility to create good designs for your audience.

There are formal principles and elements of design which can be as guides in making important aesthetic and design-related decisions that can help you create more unique designs. Elements of design are the basic components involved with creating any design. Principles of design are the rules of design. The main difference between the two is that principles are like the rules you should follow, while elements are things that will help you follow those rules for the best outcome.

There are eight elements of design that you should always remember: color, value, texture, shape, form, space, line and type.

Finally, a short video that does a deep dive on the history and meaning of aesthetics:

Reviewing Designer VS Developer

The first post from Creative Review that I’ll be reviewing is “Designer vs Developer #20: How Chrome was designed 10 years ago”:

In the post, Mustafa Kurtuldu (a Google Design Advocate) speaks to Darin Fisher (VP for Google Chrome) about the process of designing a web browser and the evolution of Chrome during its 10 years of existence at the time of this post (2018).

The era before Chrome’s creation, most browsers were either cluttered and overloaded with information that diverged users from their tasks or were lagging and sluggish. Chrome was creating to replicate what Google did for search engines – focus on content. The designers and developers focused on four key factors when creating Chrome: Simplicity, Speed, Security and Stability.

Simplicity focused on the streamlined UI design and experience. Speed was about how quickly the browser responded when a user performed an action. Making sure that users would receive instant responds to their commands, without lagging or glitching, Chrome worked on a multiprocessor architecture, so if the user clicked to close a tab, it would simply close.Security was making sure that users feel safe on the web, protection from viruses or fake sites, and giving users control. Finally, Stability of the browser, ensuring that it wouldn’t randomly crash.

Darin (the developer) also mentioned that starting with the Windows version meant his teams could focus on building a great browser without thinking about any cross-platform issues.

Overall the post focused on the success of the launch of Chrome and how it stood out against other browser of the time.

The second post from that I’ll be reviewing is “Designer vs Developer #21: Getting started with UX research”:

This post was inspired by a conversation between  Jenny Gove (a UX researcher at Google) and Mustafa Kurtuldu looking at the steps to take to conduct User Experience research.

The post explains how designers/developers dipping their toes in UX research for the first time should go about focusing their attention. You should focus on looking at what works best for your products and what doesn’t and the best way to start is by asking people that you know to use your products while you observe. Then you should slowly transition into testing users that are closer to your target audience.

The post then breaks down UX research into 3 stages. The first stage is before you even develop your product, its a learning phase where you learn about the needs of your users and the context which they would use your product. The goal here is to gain knowledge to determine what needs building.  The learning phase helps us understand the challenges the users face so we can start to solve their complexities. The post gives the example of if you are developing a wireless charger, you should see how people charge their phones, understand their routine and understand their struggle therefore finding where you can accommodate those struggles and create a solution (creating a wireless charger).

The second stage is the iteration phase where you are looking for ways to improve your product. The post explains that you should set up a space where users will feel comfortable while testing your product. They recommend you bring two researchers, (for taking notes and speaking with the user). This is so one researcher can build a rapport with the user while the other taking notes so you can have a free-flowing conversation. You should ask the user to attempt to complete different tasks with your product and gauge how they react and interact with the product then ask follow up questions to find out their thoughts and opinions as a user.

The final stage is benchmarking, where you track the ongoing metrics (like usefulness or satisfaction) that are important to the success of your product. You may track how user react after the launch of your product, if they are still satisfied with the product or if they have things they aren’t pleased with or their opinions have changed since your initial research. Then from there decide on further improvements you can make.

This concludes my review of the Designer vs Developer posts, I wanted to include this video that was also in one of the posts that I found particularly interesting:

The Guide to an Efficient Workflow

When users try to learn more about the term web design workflow, you’ll find that most results you’ll find online focus on the entirety of the web design and development process, from researching and defining the extent of work, gathering content, mapping out and wireframing, to designing tips, production, types of testing, and advice for post launch site maintenance. While that information is extremely useful, most of those online sources barely describe thewhat goes on during the extremely important design phase of workflows.

There are four key components to the workflow that new and old designers keep in mind: 





Designers typically start by wireframing to get a sense of the site’s structure and layout. This stage is where you would layout the initial ideas for layout and content placement. Then move on to brainstorming ideas in multiple sketchs, adding more detail to those initial ideas form the wireframes. Next a designer would typically create a moodboard that should capsulate the aesthetic of the website, at this stage you should be considering logo designs and colour schemes. From there comes a the final mock ups with all of the previous ideas from the previous stages coming to life in the mock up stage. Then finally, the final touches and revisions are done before finalising the design.

A web design workflow is the process you follow as you develop a design for a website. To work efficiently, there should always be some logic to the tasks you perform to create the design. The main aim is to work as efficiently and streamlining the design process.

Users First: The Objective of Content Strategy

In web production, an important goal is creating the best user experience (UX), a fundamental way of doing this is through content strategy. In this post, I’ll be explaining what content strategy is as well as the goals of content strategy.

What is content strategy, you may be asking?

Schitts Creek Wtf GIF by CBC - Find & Share on GIPHY

Content strategy is an umbrella term that covers the planning for, development of, and management of content. It’s about bringing the right content to the right audience in the appropriate place, time and context.

In the era of print, everything from size of the page to distribution numbers could be tightly controlled by a company. However, in the modern era, web designers can’t control how users access content, what devices they’ll use or how they’ll access content tomorrow.

While there can be a content strategist within a team as a single position, the role is just as often assumed other team members as roles within the designing process benefit from an understanding of a content strategy

This is because looking back at how we defined content strategy earlier:

It’s about bringing the right content to the right audience in the appropriate place, time and context.

this means we should make sure the content that we provide is accurate, up-to-date, and appropriate. To ensure this, different team members must communicate of ideas with an in-depth understanding of their audience’s need, and the web designers’ communication style.  

Simply put content strategy is the art of clear communication. It is to understand and speak for both the content and its audience.

Finally, I’d like to add a video that gives a quick summary on what content strategy is:

Preparing Images for Web: Photoshop v GIMP

In this post, I’ll be explaining some of the differences between exporting files from Photoshop and GIMP for the web. Specifically, I will be explaining how to use the controls in the Save for Web dialogue box in Photoshop and how to save JPEG and PNG files in GIMP 



In the case that you are exporting an image that is very large, users will need to scale it down. When saving for web, our goal is to scale this way down to appropriate size and try to make the file size the smallest possible without losing the quality of the image.

So users should go to File, Export, then Save for Web (Legacy). And in the dialogue box, choose Fit in View so that you can see the entire file, and use then Two-Up View option to see the original image side by side with a preview of the exported file to compare the quality of the image.

Then we can move on to choosing a file format. In JPEG youll notice that any transparency within the file goes away because JPEG doesn’t support it. However when using JPEG you’ll notice that the file size could still be too large for web, users could try lowering the JPEG quality to apply more compression and lower the file size so I can go from high to medium or low. However, at low, the file could still be too large and the image could lose too much of its original quality.

A solution to this is to try a different file format. For example, PNG-24. This may improve the quality of the file, but size could still be a problem. Instead, another option to try is PNG-8 which should maintain the quality and the file size should be a lot better. A final option to downsize file sizes is to reduce the number of colours to only the colours necessary which will greatly reduce file sizes too.

Now if the file is a good size and quality users can now use the Save for Web dialogue box.


Creating images for the web is a common task that GIMP is used for. So, let’s take a look at the process of saving GIMP images in the most common image file format for the web, JPEG. JPEG is a file format best suited to photographic images. It allows you to compress the image data to achieve a small file size. Like photoshop, the smaller an image is, the faster it’ll load.

 But the good news is with GIMP, you can control the amount of compression that’s applied to your images and then preview the effects of that compression. Users should select File, Export As and in the dialog box then export it to the desktop. To tell GIMP to export to JPEG, users just need to either manually change the extension to JPG or JPEG. Or, you can go down and click, Select File Type (By Extension) and find JPEG in the list and GIMP sets the extension for you automatically. 

The users will get a dialog box where I get to choose the quality. Select Show Preview in the image window. With the slider, the higher the image quality, the higher the file size. If you drag the slider to a lower value, somewhere around 30, you’ll see the file size declines and so does the image quality. You can start to see signs of compression in the image. Typically, a value of around 70-80 will give you a good looking image and some reduction in file size. Then your image is ready for web.

Another format for web use is PNG files, which are typically used for graphics like logos, icons, buttons and screenshots, which don’t work as well in JPEG format. Like photoshop, the PNG format supports transparency, where JPEG does not. Like JPEG, users should select File, Export As, and in the dialogue box manually add the PNG extension up here, or choose PNG from the available file export formats. Unlike JPEGs, you can always use maximum compression with PNGs.

For our visual learners, this video gives a great to tutorial for users on Photoshop:

Web Fonts: The Difference between Internal and External

Users are no longer limited to web-safe fonts as web fonts don’t require users to have fonts installed. There are two methods of using web fonts: using an internal or external source. I will be explaining the differences between the two.

Internal Source:

Internal font sources are downloaded font files on your device that are included in your project’s file directory. To use internal fonts in the CSS, users need to state it within the style sheet and link it to the font files using the @font-face method.

Font-face is used to set up the font names and create a link to your font files. The first statement is font-family to state the font name. You can pick whichever font name you decide for an internal font source. Next, users should use the src property to create a link to the actual font file.

Once you’ve declared the downloaded font in your font-face declaration, you can add it to the font stack just like any other web-safe font. 

External Source:

External sources are third-party services. Users don’t need to download any files or include them in your project’s directory. With external sources, you can link directly to the font CSS files which are hosted online as part of the service. There are paid services but considering a free option, Google Fonts has a fairly good selection.

You can browse through the page and filter by category, and if you know of a specific font you can also just do a search for it. Plus, users are offered an unlimited number of fonts to use.

If you’re interesting in a more in-depth tutorial on how to use web fonts this video gives an excellent explanation:

Create your website with WordPress.com
Get started