Joe Bailey Photography

I attended a workshop in Hotel Mercure Southampton Centre Dolphin on rankingCoach by Alasdair Stone. It was a very interesting event and we learnt about how to optimize website for search engines. We also learnt how to use tools such as Google My Business. I came away from the event with a lot of notes on how I wanted to improve my own website. These included adding more links to my blog posts. RankingCoach is certainly something I’ll look to use as a web developer in the future.

“Make beautiful products, faster. Material is a design system – backed by open-source code – that helps teams build digital experiences”

Material.io

Material is a design language created by Google in 2014 for the Android platform. It has unified Android apps under a single design format. This has helped to give the Android platform a unique identity recognizable everywhere, however, material design is starting to be used with other things.

“Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.” 

 Material.io

Many say that material design is the future, aiming to unify user experience across a host of platforms such as mobile and web.

Material design isn’t just about the way Google and Android do things. It’s changing design philosophy as a whole. One popular feature of material design is the “card” motifs that can store data in a way the user can easily understand. This data can often be manipulated by the user in ways such as swiping to mark the card as done.

Material design uses a number of practices to create a unified experience. It can often be described as minimalistic, using a lot of white space to create a clean user interface. Material design also relies heavily on the grid system, making sure everything is evenly spread out across the page whether it be mobile, tablet, or desktop.

Material design is very specific about the way designers use colours. The design specifies for calmer colours. Often shades of the same colour are used together along with the card system to symbolize depth. The way designers use colours can have a large impact on the identity of a brand, as one colour will be associated with that brand. The Android platform lets designers insert their brand colour into many different places such as Google Chrome’s tabs, app headers, and on the app task view. For example, Facebook uses this on the Android platform to display their signature blue colour everywhere they can. This helps create the brand’s identity, as whenever anyone sees that colour, they will recognize Facebook.

“CSS Grid Layout is shaping up to be the layout tool we’ve always wanted on the web.”

Stacy Kvernmo (September 19, 2016)

In the early days of the web, developers laid things out using tables. Tables are only designed for tabular data and developers were splitting GIFs up to lay them out and create visually impressive websites but in the wrong way, creating messy code and not very accessible websites. Tables were the only way to have control over the positioning of items on the web at the time.

CSS Grid is a way to lay things out on the web. Flexbox is an alternative to CSS Grid. It’s is a way to lay out items inside of a container even when their size is unknown. Flexbox has the ability to alter its items’ width, height, and order to best fill the screen width. This helps developers to create responsive websites i.e. websites that adapt to fit on any screen size.

Support in browsers for CSS Grid took a long time, however now, almost all browsers fully support the exciting new feature.

“The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.”

w3schools.com

You can place divs inside of the grid and rearrange them depending on the viewport size to create responsive sites. To define a grid you set the display property to grid:

.grid-container {
    display: grid;
}

Grids are split into rows and columns. You can assign a row and column to a div which tells the browser where to display it within the grid. You can also specify a gap between columns and rows. As well as assigning a div to a row/column you can make the div span multiple rows and columns. This makes CSS Grid very flexible and easy to use, unlike other methods of displaying divs.

I’ve just started my first proper job in the Web Design and Development industry at Fluid Studios Ltd and it’s going really well. I’m also starting to get ready for university, the next big exciting chapter in my life.