In this post we will go over the 5 simple things designers need to know when building your website in 2018. With these 5 simple steps you will save time, money and improve your branding. In this post we will go over things designers need to know when building your website in 2018.
1. Know Your Website’s Target Audience
Your website is a modern day business card. It should appeal to the customer you want to work with. In order to best serve our clients, we need a clear vision of your customer base. Are your customers looking for a hipster coffee place or a luxury cafe? Knowing your target audience will help us improve your brand’s website development.
2. Business Competition and The Industry
In order for us to build a website geared towards your specific customer, any information provided to us about your customers will help perfect the end result. Visit your competitors websites and let us know what you like and dislike about them.
If your company is a completely different niche, chances are there is no business quite like it. If that’s the case, we still require some information about the business and potential prospects.
3. Company Information, Branding and Color Scheme
It is crucial to provide all information regarding branding, hours of operation, location details, contact information and color scheme of your brand. In the case of missing business information, we can do our best to find that info online. Contact information is a crucial part when building your website in 2018 for increased customer acquisition.
4. An “About Us” Page is Necessary When Building Your Website in 2018
Most people will look for an “About Us” page when landing on your website. This page usually gives a brief overview of what you and your business are all about. In short, the content on this page can be a make it or break it with your customers.
When reading your About Us page, customers are scanning for authenticity and authority in your business industry. To summarize, your customers are looking for reasons to trust in you and your business. We have our own About Us page you could check out — some more great examples can be found at Eight Hour Day and Apptopia
It’s up to you wether or not you want to get into fine details. However, customers want to know your story from start to finish — so don’t be afraid to tell them your story.
5. Know Your Layout and Site Structure
Which page do you want to set as the front page? Do you want to show visitors your recent posts? Do you want to display posts from a specific category? If so, from what category and what order?
…As you can see, It can get a bit intense when it comes to site structure and branding with your website. Try your best to give the finest details where they matter so that we can do our best to get your vision right the first time. This could include giving us a doodle, sketch, mockup or anything that can help us achieve your vision.
Flexbox (or Flexible Box Layout Module) was designed to give web designers an easier way to build their html layouts. Here I will give you basic flexbox layout examples to learn from and build off. Learn the differences between flexbox vs grid.
This is not a complete guide to flexbox, but in this article I will teach you the properties you must know.
Here are visual representations of the different align-item values:
align-items: center will keep each child centered vertically throughout the row of columns.
align-items: stretch will stretch each child to the container’s height. Stretch is the initial value for align-items.
align-items: baseline sets the children to align themselves to keep the start of the content aligned together at the top.
Play around with these settings in this flexbox playground I setup for you. Also, be sure to change the container’s align-items value to one of the values shown above. To do this, click on the “Edit on Codepen” link in the upper-right hand corner of the preview box below.
See more details about align-items at the Mozilla Developer docs.
Also: Traditional uses of float, clear and vertical-align don’t have affect on flex items.
align-self
Now, when you need custom alignment on a specific child in a container, use align-self. Align-self will overwrite the container’s align-item value on the specific child.
As of December 2017, Mozilla Firefox and Google Chrome are the two major browsers to support the CSS Flexible Box Layout Module.
What’s the benefit?
Because I am using flexbox, the sidebar width and height do not need to be set.
Both height and width of the sidebar scale with the main content.
Before, by using the CSS float method, this wasn’t possible and it was a pain to get the sidebar to match the main content’s height.
For example:
Say you had a larger sidebar and a page with a small amount of content, the page would end up looking something like this:
Flexbox VS Grid
To begin with, the CSS grid was first introduced as a W3C Working Draft on November 6, 2012. Now, nearly 10 years later it’s classified as Candidate Recommendation since
Further, checking on caniuse CSS grid layout, it’s supported by mainly Mozilla Firefox and Google Chrome.
One of the main differences with CSS grid is the ability to map out both columns and rows. In the same fashion, create a grid display by adding “display: grid” to the container element’s CSS.
Like this:
#container {
display: grid;
}
Here’s an example of what CSS grid layouts have the ability to build. Notice, there are both rows and columns.
CSS grids will give you more control over your content layout.
Basic CSS Grid Attributes
CSS grid template rows will define height of rows.
Example: grid-template-rows: 100px auto 100px;
CSS grid template columns will define width of columns.
Example: grid-template-columns: 200px 100px 200px;
grid row gap will give you spacing between rows.
Example: grid-row-gap: 25px;
grid column gap will give spacing between your columns.
Example: grid-column-gap: 10px;
grid gap will set both row and column gaps.
Example: grid-gap: 15px;
Here:
This is a visual representation of what grid-column-row and grid-column-gap affect in a grid display.
If you would rather just declare one same CSS grid gap for both columns and rows, you would use the grid-gap attribute instead.
Grid Item Alignments
justify-items
This selector will give you the ability to align your content horizontally inside your container’s cells.
#container {
display: grid;
justify-items: start | end | center | stretch;
}
align-items
Much like justify-items, this selector will give you the ability to align your content. However, rather than aligning your content horizontally, you are now aligning vertically. Much the same, the terms for alignment work in the same manner, just vertically.
#container {
align-items: start | end | center | stretch;
}
Building Layouts With CSS Grid
A simple 3 column grid’s CSS would look something like this: This will create column widths of 25% – 50% – 25%.
This CSS grid code will give you a layout like this:
Summing Up:
Flexbox was created to make layout design easier for web designers. Along with, lots of CSS frameworks like Bootstrap V4 are beginning to adapt it.
With that being said, it’s a valuable skill for you to learn.
Use this article to develop a quick understanding of how it works and how to design layouts using flexbox. Equally important, you will learn the difference between it and the CSS grid layout – find out basic use cases for each in your projects.
Leave a comment on your thoughts about the direction of Flexbox. Do you believe other browsers will adopt flexbox or phase it out in favor of the more precise CSS grid?