This page will help you get started on building the website of your dreams!
1 Know your tools
This template site, as well as its subsequent pages are built using WordPress software. WordPress is a powerful platform for front-end web development (front-end is just a fancy way of saying not much coding involved). This makes developing tailored and professional websites easier than ever!
However, it’s normal to be overwhelmed by the sheer amount of tools are your disposal. This section will explore some of the key functions of WordPress and how exactly they will help you in getting your website up and running.
Once you have logged into your site, you’ll be redirected to your site’s dashboard which may look something like this.
The sidebar on the left contains settings for your site. Specifically, it allows access to your theme settings; installed plugins, pages linked to your site, and user roles. You can explore the appearance of your theme under Appearance. General administrative settings can be found under Settings for both your website as well as plugins. Certain plugins have extra settings accessible only from Settings.
The theme which we are working with is called X Theme by Themeco. For complete documentation on this theme, follow this link.
X Theme is a customizable theme which is used throughout our sites. It allows for the creation of beautiful and functional websites.
Cornerstone is a page builder developed by Themeco. It is a versatile and responsive click-and-drop solution to populating content on your web page.
2 Plan ahead
Before you begin your website, take a few minutes (or hours) to plan everything out. Jot down a list of key elements you’d want your website to consist of. Know that websites are really created on paper with pen, not on a computer.
“Who is the targeted audience of my website?”
“Do I have enough content on the matter to warrant a multi-paged site or a single landing page?”,
“How many additional pages will I need to make apart from the home page?”,
“What do I want my website to look like?”,
“Will this website translate well through everyone that may wish to use it?”,
“How can I make this site as user friendly as possible while doing the minimum amount of work?”,
“What’s the meaning of life?”,
“Will I need images?”,
“Where can I find high resolution images?”,
“What aspect of my site can I control?”,
“Do I really need to create a website, or just a page to redirect viewers?”,
“Will I need to outsource this as it requires a technical skill beyond the scope of my abilities?”.
Make a check list
Make a list of all the things you need and would like on your website. Cross them off as you go.
Draw layouts on paper. Use rulers. You’ll be surprised at how much content you can create using grids and rectangles!
Math is your friend
The days of pixel measurement are over! Use percentages to size your sections and margins.
Get an outside view
It’s very important to be critical and ask an outsider’s opinion on your site. You’ll discover flaws you may have overlooked previously.
Text based template
Image heavy template
Full width landing page
This is where you as a designer must choose which type of layout is best for your website. If your page requires a lot of text and information, consider a document type of layout where there is an emphasis on columns of text which look like well written articles. If your website is more of a static landing page which doesn’t require much text, but needs big images to get the message across, consider a full width layout. They’re the latest craze and very easy to do! The layouts of your pages should be done on paper before transferring them over in html and css. It will make your life easier, trust me.
If your website is more of a redirecting page, consider a crossroad type of layout which is just links of multiple sites and programs that users can access once they land on your page.
The pages you create must be clear, concise, and to the point. Any block of text or image that you personally wouldn’t bother noticing should not be included on the page itself. Everything on your page needs to be there for a purpose. THEN focus on the design. Your site needs to be as functional as it needs to be to get the job done. With Cornerstone, you don’t need to worry about beautifying your website anymore!
– Plan your site layout very carefully.
– Focus on the functionality of your site rather than looks.
– Never underestimated simplicity and white space.
– Collect everything you need (images, videos, documents) beforehand.
3 Building pages
Before you begin building your page, it’s important to know which page it is you are actually editing. If you are looking to make the home page of your website, ensure that your homepage as been specified under Pages. You can always check which page has been set as your home page under Settings >> Reading.
The following content will guide you through various tutorials for different templates.
It is generally a good idea to first insert all the additional resources you wish to link to in the header of the website. These are the links found in the navigation bar at the top, next to the logo. This template, for example, hosts only Home, Get Started, Samples as additional resources. Home and Get Started are just links to pages which have been made separate to this home page in wordpress. Samples is a drop-down menu with additional template pages.
WordPress allows us to create our own menus easily through the toolbar at the top of the page.
Once you are logged in, you can edit your menu links through Customize. When the X theme side bar loads, click on Menus to edit either the current menu or create a new one to be used at the top of the page. Note that you can link your menu items to WordPress pages, widgets, or external urls. The same can be done for the footer of your pages. Since you are editing your Global settings through Customize, this will effect the navigation bar for every page you create on your site.
Once your menus have been created and all the links are functional, it is time to go ahead and start thinking about what kind of a landing page you would want your website to have. Of course, there are many different types of landing pages, but We will discuss some of the more trendy and popular ones.
Some key elements of a good landing page are:
One of the most common landing pages are the Lead pages you often see on modern websites. They often are very minimal in their approach and offer redirects or calls to additional information and resources.
Healthy CommunitiesClick Me!
Another very popular landing page is a click-through page, which guides the user through various information.
These are only a couple of sample landing pages you could choose to adopt into your home page. The most important thing is to plan ahead and ensure that your page functions as it should, and gets the message and information you need to get across in an effective and concise manner. Be sure to search up trending website designs and layout structures to make sure your website translates well into 2017.
This section is more to tune design elements on your page. When you are designing your page, always picture your page as a grid.
There are a lot of mathematical components that go into creating beautiful websites and pages. However, calculations aren’t always necessary if you treat the page as a grid to begin with. What this means is that alignment of text, images, buttons, and headlines should fall in line relative to each other. Cornerstone utilizes this, as well as many other famous website building frameworks such as Bootstrap by Twitter and Foundation by Zurb.
Consider the following images to further elaborate on grid design.
In this section we will go over some of the tools and elements we have at our fingertips to create content and articles in Cornerstone.
The framework for X theme uses nested divs to create content. These divs are essentially just boxes capable of holding content in them. The hierarchy of divs is as follows: Sections >> Rows >> Columns >> Elements.
When you create a new Section in Cornerstone, it is created with a Row inside it. A box inside a box. Each row is capable of holding multiple Columns, and each Column is capable of holding multiple Elements. There are plenty of Elements to choose from such as text, images, headlines, lists, sliders and much more! Here is a visual demonstration of these divs:
This is a Section.
This is a Row inside of a Section.
This is a columnThis is an Alert element inside of a Column inside a Row inside a Section, it dismissible.
Once you have gotten the hang of Sections, Rows, and Columns, you can start populating your columns with all the Elements you may need.
4 Optimize your site
Your website looks amazing so far, but there is one slight problem.
My website loads way too slow on different computers, phones, and networks!
It’s very important to optimize your website during the creation process, to ensure it stays fast and doesn’t drain resources or bandwidth. The reason your site is slow could be due to multiple factors! We’ll explore a few here.
Images are probably the single most draining resources for any website. They often take the longest to load once a request has been made to the server. It is such a big issue that Google Developers have sought to write an entire article on optimizing your images. Check it out Here. This will not be a how-to, but you can optimize your images in the following ways:
Eliminate images where unnecessary.
If you really don’t need an image to get a particular job done, get rid of it. If it serves zero purpose to your website, it is most likely redundant and is not needed. It is just an extra drain on resources. Ask yourself “Will I realize this image is gone from my page?”.
Compress images losslessly.
There are hundreds of tutorials online on how to do this. The bottom line is, an image straight from a camera is usually around 20,000,000 – 30,000,000 bytes. That is A LOT of information to be sending for one small image.
Our goal is to get that number down to around 20,000 – 30,000 bytes. We do this by cropping, resizing, and then compressing our images as we save them for web. There are many applications on the internet which allow you to do this. Quality of the image is not ensured during compression, which is why you should follow the guide linked above, which is written by Google Developers.
Uncompressed images will drain your own bandwidth and the bandwidth of mobile users very quickly, and you don’t want to be the reason someone goes over their data limit!
Choose vector images where possible.
Have you ever zoomed into an image and it suddenly gets really blurry?
This is because the image is a Raster image. Raster images rely on pixel information to maintain their quality and crispness.
Vector images, on the other hand, are images created using mathematical models such as polygons to maintain their quality no matter how much we zoom in, or re size the image. They consume far less resources as raster images, and are far more functional in the graphics industry. Everything form building posters to soda can labels are made using vector images. These are industry ready formats which are transferred to printers very easily.
If you can, opt for vector images where possible. These can be made using HTML5 now rather than Flash, as it was in the old days.