How to Make a Website
- You’re here because you’d love to learn how to create a website. There are a number of stages in making a website you can be proud of: from the choice of your typography to the color scheme, imagery, branding, site architecture and plenty more. Given all that, it’s understandable to not know where to start.
Before you need to even need to start thinking about what I mentioned above, you need to decide which platform you’re going to build your website on.About fifteen years ago, I learned how to create my first website, and I was blown away by how incredibly painless it was complete. I’m going to show you how you can do the same in a short time.3 Simple Steps to Learning
How to Make a Website
Step #1: Choosing Your Website Platform
If you’re a beginner trying to figure out just how easy it can be to create a website, you’re in luck! Anyone can take advantage of this free step by step guide.The first step is to choose which platform you want to use.Whoa Matt, slow down! What’s a platform?This is a great starting point. You see, when the internet was still a baby, websites were built from scratch using HTML coding. Trying to build a site this way required insane amounts of training.Seriously, the only way you were going to build a site like this is if you spent the majority of your life studying HTML in a secluded temple in the Himalayas.Fast forward to today, and suddenly creating a website isn’t so bad. With the rise of content management systems (CMS) like WordPress, anyone can get into the world of building websites with little to no training. All you need a good guide (like this one).So, which CMS platform should you choose?What Platforms Do the Top Websites Use?
WordPress is the preferred choice for a website platform. Notice how there are very few Wix or Squarespace websites in the top 10k websites on the internet. The most successful websites clearly choose WordPress.But why is this? I mean, Wix and Squarespace offer things like drag-and-drop builders, plus they will act as your host. It’s a perfect platform, right?Well, yes and no.While simple platforms like these offer equally simple methods for building and editing your site, you’ll quickly outgrow the training wheels and you won’t have any other options.Here’s the deal:WordPress is a flexible platform that might as well have “options” as its middle name. Between the themes, plugins, and the feature-rich editor, WordPress matches your skill-set and grows with you.And that, my friends, is why people choose WordPress.Check out this data pulled from Builtwith:
The Ultimate Choice: WordPress
WordPress is the best choice overall but simply saying that isn’t going to win you over, so let’s look at some of the top reasons why I always recommend it over every other CMS platform:1. It’s Completely FREEUsing WordPress doesn’t cost a dime. You can your website up and running without paying anything at all. You’ll even have access to free layouts and tools too.2. Everything is Easy to UseUser-friendly CMS platforms are few and far between. WordPress is the king in this arena as well. The setup it uses is extremely similar to Microsoft Word, so if you’ve used that program (who hasn’t?) then you’ll feel right at home with WordPress.WordPress also offers tools called plugins that add all kinds of functionality to your website. Whether you’re designing the perfect blog posts, or a business website, WordPress can do it for you.3. Big, Small, Busy or Quiet, it Doesn’t Matter!You’ll start out small like any other website, but rest assured that WordPress can handle everything you throw at it as you scale upward towards the stars. Did you know that WordPress is used by companies like Facebook, eBay, CNN, and NASA?4. Support for Mobile DevicesHaving a website that looks great on mobile devices is so important right now if you want your website to have a chance to rank in Google. In terms of SEO (Search Engine Optimization), it’s practically a must.So clearly WordPress is the best choice for beginners and in most cases it’s also the perfect option for advanced users too.Let’s review:Choosing Your Website Platform
- The top 3 website platforms are WordPress, Joomla, and Drupal.
- WordPress is the most popular, allows for mobile friendly sites (great for SEO)
- Drupal is great for experienced web developers, but not for beginners.
- Joomla is best used for eCommerce websites.
Here’s what you need to do right now:- Don’t worry about downloading WordPress just yet, that will come in the following steps
- Choose a platform for your website. I think WordPress is the best and a half, but the decision is up to you.
Step #2: Purchasing a Domain Name and Hosting
In order to start your website, you’re going to need two things: a domain name and hosting. For the uninitiated, here’s a quick explanation of what these things are:- A domain name is the web address that you’ll type into the search bar to navigate to your site.
- Your Web Hosting is the company you choose to put your website online and make it publicly available all hours of the day, each day of the year.
Choosing these things is the most important decision you’ll make as a website owner. Before we move into the process, though, you should know that free websites are not smart for the long term.What do I mean by free websites? I’m talking about places like these:- Blogger
- SquareSpace
- Wix
- Tumblr
These sites will give you a website to call your own, but it’s not really yours. Not only do they own it (and have the ability to shut it down at a moment’s notice) but they also make you share the URL with their company’s title.“Hey Matt? So, where do you get your Hosting?”I’m so very glad you asked, dear reader.My exclusive choice of hosting is BlueHost, but you’re welcome to use a wide array of hosting choices. I’ve been with BlueHost for several years now and I’ve never had an issue. Not only that, but I’ve also been extremely happy with their customer service.For the most part, I knew the ropes, but every time I called to speak with them, they were always courteous and polite. In fact, I like them so much that I’ve been recommending them to my readers since I started On Blast Blog.Choosing Your Domain Name
While it may seem like a simple thing, your domain name is an integral part of your website. You want people to easily find your site and remember the name so they can tell their friends, family, and their pets about it.In short, your domain should encompass three key characteristics:- Relevant to your business or website
- Easy to remember
- Uncomplicated
If you own a business, then the best approach is to make the domain the name of your business. The same goes for the name of your blog, or even your own name will work as well.Keep in mind that there cannot be any two identical domains on the internet, so if you’re first idea doesn’t work, it’s not your fault. You’ll also choose the extension for your domain (.com, .net, .org). if the .com version is taken, you can try .net instead.Purchase Domain and Hosting
Remember that Free websites offer a limited experience and aren’t valuable for long-term growth and success. WordPress.com is the free site and WordPress.org is the self-hosted CMS platform with different hosting options.Here’s what you should be doing before you move on to the next step:- Take some time to brainstorm a few ideas for your domain that reflects your business or website.
- Set up your hosting through www.Bluehost.com
Step #3: Setting Up WordPress
Installing WordPress can be easy, or it can be really, really hard. This is yet another reason why I always recommend WordPress and by extension, Web Hosting Hub. Here are the two ways you can install WordPress:- One-Click Installation (as easy as it sounds)
- Manual Installation (Needlessly complicated)
Oftentimes, the best sign of a good hosting provider is the existence of a one-click option for installing a CMS like WordPress, Joomla, or Drupal.
WordPress
Joomla
Drupal
If your account is hosted with BlueHost check out these simple instructions for setting up your Wordpress blog.
To get here, simply type in your url with the WordPress admin tag on the end. It will look like this:
www.yourdomain.com/wp-admin
This is where you’ll log in and see the dashboard pictured above. As you can see, there are a lot of options to choose from. Let’s start with choosing your website’s theme.
How to Choose Your Theme
The basic WordPress theme is all well and good, but we’re about to turn the dial up to eleven. WordPress offers a massive amount of design templates to give your site a look that fits your needs. The best part? These designs are incredibly easy to install.
When it comes to WordPress, easy is the word of the day. Head over to your dashboard and look for the Appearance button on the left side. Click that and then click Themes. Go ahead and click the Add New button at the top of the screen
Here’s what you should see:
Now you get to browse the options like a kid in a candy store. There are free and premium options that you’ll come across. If you’d like to invest in a theme, there are some awesome options.
If you’re just starting out, then don’t worry about spending anything just yet. You’ll find plenty of free options. As you’re browsing, be sure to consider these characteristics of a great WordPress theme:
Once you’ve found the theme for you, click the install button and then make sure you also click activate on the next page. One important thing to remember as well:
Changing Themes Will NOT delete any of your posts or content!
If you need to change themes, don’t worry about anything disappearing. Now that you’ve chosen a look for your website, let’s move on to creating content for it, shall we?
How to Add New Pages
Before we delve into the process of creating new pages, let’s clear up the difference between posts and pages.
- Posts are dynamic (this is the best choice if you’re starting a blog)
- Pages are static like the ones you find on a company website. Your “About Us” page is a perfect example.
Okay, so when you’re ready to start with your first page. Just click Pages -> Add New on the left side of your dashboard. The next screen will look very familiar to those who have used Microsoft Word.
Here you can add in your text, images, and all the elements of the page you’re creating. When you’re finished, click the Publish button. If you want buttons for these pages on the navigation bar of your site, we’ll cover that next.
Adding Pages to Your Navigation Bar
Start by heading to Appearances -> Menus. Click the checkbox of the page you want to add and then click Add to Menu.
Creating a Static Home Page
Since we’re setting up a website, you’ll want your home page to be static and unchanging. If you don’t take this step, your posts will show up here each time you create one.
For may website owners, they want their blog to be separate, which will discuss momentarily. To create a home page, follow these steps:
Adding Posts and Categories
Most websites will also have a blog attached to them. While coming up with blog post ideas can be tricky, once you have them you’ll need to set up your website to handle these posts.
Posts can be found on the left side of the dashboard where the pages option is found. Your blog posts can be organized into different categories based on your topic, or you can simply make a category called “blog” if you wish.
To do this, click on Posts -> Categories on the dashboard. Once you’ve created your category or categories, all you need to do is check the proper box in the categories section when you’re finished writing posts.
It looks like this:
Let’s regroup, here are the takeaways from step three:
Installing WordPress
- Great hosting providers offer one-click installation
- Installation can be done through your hosting control panel.
- Once installed, head to www.yourdomain.com/wp-admin to login.
- Create posts for a blog (dynamic) or pages for a website (static)
- Add pages to your navigation bar by going to appearances -> menus.
- Go to settings -> reading to set your front page (homepage) to static if needed.
- Organize posts into categories by going to posts -> categories.
[BONUS] Step #4: Housecleaning & Final Touches
At this point, your site is up and running, but there are a few more tweaks we need to take care of before we can call it a day. Don’t worry, these won’t take long.
Your Title and Tagline
These elements refer to what people see on search engines when your site’s pages show up in the results. To change these, head to Settings -> General. The page should look like this:
The title is the first thing people see in the search results.
Disabling Comments
Depending on your site, you may not want people commenting on pages or posts. If that’s your preference, Click Settings -> Discussion -> uncheck “Allow Comments.”
Installing Plugins
This is our last stop on the road to your website’s epic launch. WordPress has a huge library of programs called plugins that perform a wide variety of tasks on your site. Like themes, some of these are free and some are paid.
The best WordPress plugins will expand your site’s features and give you exciting new capabilities. Here are just a few of the things Plugins can do:
- Track your SEO efforts in each post
- Speed up your website by caching pages
- Handle your social media efforts and schedule posts
- Add surveys, social sharing buttons, and other engagement items
House Cleaning and Final Touches
- If you don’t want comments, go to settings -> discussion -> uncheck ‘allow comments’.
- Install plugins by going to plugins -> add new
- Research before installing plugins, not all of them are worth your time.
How to Start a Website With Great Design
Congratulations on learning how to make a website! See, it wasn’t that hard at all!
But we’re not done yet.
A long-term plan should be be put in place for how you want to design your website.
This is where the real fun begins!
Next, we’re going to look at the major tenants of web design and help you form a picture of how you want your website to look and feel for the foreseeable future.
The Four Pillars of Web Design
Pillar #1: Size
Page-Width Factors
- The page size in correlation with the screen size (desktop or mobile)
- The content within the page
- Whether you want the reader to skim or save it for thorough reading at a later time.
- The amount of bandwidth needed to load the page.
The Difference Between Online and Print Graphic Design
- Print allows the user to see a full two-page spread
- Online web pages only show one page at a time
Page Structure
- Divide into “screens” based on what a user sees as they scroll
- Link to home page on logo (Click here to create a logo)
- Content divided into headers
- Global links easily visible for users, structured as a list
- Breadcrumb navigation (optional) above the main content/integrated into the header.
- Shopping cart icon for eCommerce in the top right corner of the page
- Scan columns can be used for navigational links on the left for best results.
Content Area Structure
- Page Title – use H1 format headers at the top of the page to clearly show what the page is about for readers and search engines.
- Rules – Use CSS to keep the page rules in check as they can become cluttered. If you’re concerned, rules can be skipped and instead whitespace or visual content can be used to create separation.
- Page Navigation – For multi-page layouts, offer navigation at the top and bottom of the page to move forward and backward in the sequence.
- Publication dates – Dates for when content was published or updated should be placed at the top of the site for news and magazine sites, while others can included it at the bottom.
- Footers – Keep these out of the way and use them for legal attribution such as copyright statements, contact information, and page authors.
Page Framework
- Page length is not as much of an issue than it has been in the past. Users will scroll.
- Multiple input devices and screen sizes require a responsive web design.
- CSS and HTML should focus on flexible and fluid design. Static elements can be used (sidebar) combined with flexible elements (content).
Further Reading on Size in Web Design:
Pillar #2: Color and Spacing
Color Theory
- Colors work together to complementation, contrast, and vibrancy
- Three types of color complementation: Triadic. Compound, and Analogous.
- Contrast is used to divide elements on a page (an example being background and text color contrast)
- Vibrancy refers to the brightness of color. Brighter colors create more energy (useful when trying to sell a product). Darker shades are relaxing and allow the mind to focus.
- Choose colors on opposite ends of the spectrum for visual harmony
- High contrast helps make elements easily readable and guides attention
Triadic Color Scheme
- Composed of three colors on a wheel
- Start with base color and draw an equilateral triangle from the first color
- The three points of the triangle create the color scheme.
- Example: Yellow, Red & Blue
Compound Color Scheme
- Choose two colors from opposite sides of the spectrum.
- Allows for more freedom in color choice.
- Colors chosen will have complementary features.
- Example: Orange & Purple. Orange & Blue
Analogous Color Scheme
- Selection of color within the same area of the spectrum.
- Colors are represented through vibrancy and contrast
- Two examples: Yellow/Orange or a monochromatic.
Color Psychology
- Color psychology looks at how colors influence human behavior.
- Customers take 90 seconds to form an opinion about a product. 62-90% of that decision is based on color.
- Surveys show women prefer blue, purple and green. They don’t like gray, orange or brown.
- Men prefer blue, green, and black. They don’t like brown, orange, or purple.
- The color blue represents trust, loyalty, and calmness.
- Yellow typically represents caution, but it can also trigger excitement centersin the brain.
- Colors are closely tied to memories and experiences.
- Green is a great color for outdoor and environmental products/services
- Green works well as a color for CTAs when paired with the isolation effect.
- Black can be used to convey sophistication, luxury, and exclusivity.
- Bright and primary colors are ideal for calls-to-action.
- White space helps alleviate overload and allows for a ‘breathable’ design.
Visual Design
- Use a visual hierarchy to differentiate what’s important and what is secondary.
- Keep related elements in groups to facilitate structure.
- A grid-based layout with groups of content creates a scannable layout.
- Consistency is important across typography and layout
- A visual balance between text and graphics is paramount. For general audiences, this is a balance of text and links with smaller graphics that load quickly.
- Web designers should look to color palettes inspired by nature for an example of harmonious color schemes.
- Strive for simplicity and utilize white space to separate differing visual elements.
- Check out the world’s most advanced and responsive front-end framework in the world.
Further Reading
Pillar #3: Layout & Navigation
Clear Navigation
- Clear and consistent design across graphics and text gives the reader confidence in finding what they need.
- It’s crucial that users understand where they are in relation to the rest of the website.
- No dead-end pages. Subsection pages should have links back to the homepage or local category pages.
- Design your navigational hierarchy with efficiency in mind. Users should reach their destination in as few steps as possible.
- All of your pages should be designed with a consistent layout grid and hierarchy of visual information.
- Feedback can be received through analytics and heatmap data to see how users interact with the navigational aspects of the site.
Sidebar Design
- Design your sidebar with universal usability in mind. Identical or equivalent across all of your pages.
- The design should be flexible and useful for a wide range of preferences and experience on the internet.
- It is easy to use and organized so that important information is most prominent.
SEO (Search Engine Optimization)
- Keywords or Queries – Varied use of related keywords and long-tail variations that target specific subjects.
- Alternate Text – Use of alternate text in images to provide a description for search engine crawls.
- Headers – Incorporating relevant keywords and topics within <title> and <h1> tags to establish topical depth.
- Entity Salience – Defining major subjects (entities) and connecting them to other related topics (Example: Marvel heroes connects to The Avengers, Spider-man, etc.)
- Sitemaps – Creating a sitemap and robot.txt will allow spiders to more easily crawl your web pages and allow you to differentiate between indexed and non-indexed pages.
- URL Structure – Describe what the page is about and be succinct. Don’t use 10 words when 3 will do.
- Image Optimization – Use consistent image width and tools like optimizilla to keep the file size down.
- Website Speed – Focus on serving fast-loading pages for a positive & fruitful user experience .
- Link Building – Utilize email outreach and influencer networking to earn relevant backlinks to your content.
- Google Analytics – Monitor meaningful metrics like bounce rate, time on page and how engagement impacts conversions/sales.
Pillar #4: Style
Typography
- Great typography is dependent on visual contrast and font choice (how they relate and work with surrounding white space).
- Consistent margins are a must, with a consistent use of white space to create structure and separate text from the other page elements.
- Never use centered, justified, or flush-right designs in website text.
- Left-justified text is the best option, with headlines that are flush left.
- Fixed-width layouts offer control over line length, while flexible layouts fill the browser window.
- For fixed-width, set columns no wider than 365 pixels which is roughly 10 words per line. In flexible design, use CSS leading controls to adjust line spacing.
- Utilize leading to increase legibility. Best practices are 2 points above the size of the font. Example: 12-point font should have 14 points of leading.
- Indenting can be done as a way to introduce new paragraphs, or blank lines spacing can be used as a means to provide white space between paragraphs (better for scanning web pages).
Finding Your Style
- Don’t rely on fads or solely on trends. Choose a style that is appropriate and relevant to your audience.
- Understand your user’s needs and what problem you’re trying to solve for them. Look at competitors, create mood boards, and set branding guidelines.
- Keep everything clean and visually pleasing. Find the balance between engaging visuals and usability.
- Your style should reflect your beliefs and values. Your passion should be present in your design.
- Don’t mimic others, be inspired by them to create something wholly unique.
Creating High-Quality Content
- Online readers prefer to skim pages instead of reading them.
- Break your text into smaller paragraphs (3-4 lines per).
- Provide descriptive and short headers.
- Use bold and italics to highlight important points within text.
- Use an inverted pyramid style (most important points near the beginning and easy to find).
- Use HTML tags to define headers, paragraphs, bullet-point lists, etc.
- Vary your types of content: listicles, editorials, how-to-guides, videos, podcasts, infographics.
- Cite sources in your articles with relevant anchor text and hyperlinks.
- Use images to further break up long stretches of text.
- Provide actionable advice.
- Write a good balance of informative and promotional content (80/20 rule applies here).
- Always provide a CTA (call-to-action) at the end telling the reader what to do next.
Designing For The User Experience
Surveys
- Use survey software to collect data like basic demographic information to understand your website users.
- Ask questions about usability like how often they visit and how they would rate major functions.
- Responses will give you a basis for how your current design is or isn’t working.
Analytics
Using a program like Google Analytics or Adobe’s SiteCatalyst can help you identify data like this:
- How long a user stayed on your website
- The number of pages visited during that session
- The number of engagements that user made
- The browser and operating system used (along with screen size)
- Whether they were new to your site or a returning visitor
User Personas
- The process of creating personas is crucial to understanding the motivation, desire, and intent of your users.
- You create these personas by boiling down your research and customer engagement into a representation of your average customer base.
- Here are two examples of people who would visit OnBlastBlog:
Persona #1
- Name: Frank Ramsey
- Job Title: Office worker/manager
- Demographic: 20+ years old, single and has a degree.
- Goals: To leave his job and go into business for himself.
- He is familiar with computers, possibly even with WordPress, but he doesn’t know how to start a website.
Persona #2:
- Name: Lisa Warner
- Job Title: Stay-at-home mom with two kids
- Demographic: 35+ years old, married
- Goals: to start making money from home to help accommodate her turbulent schedule.
- She uses Pinterest on a daily basis but is unsure of how to start a website. She’s also unsure of what niche is worth pursuing & how she’ll monetize.
Web Design Mistakes to Avoid
In this section we look at some examples of horrific web design mistakes so you can avoid these pitfalls in your own work.
Issues With Your Homepage
Here’s a homepage from 2011. Zero direction. Took me 1 minute and 30 seconds to really understand what this website is offering. Believe this, a new website visitor won’t give you that much time.
Can’t believe there are people still having trouble with this basic concept.
- The design is focused on the company and not the user (overly promotional)
- There’s no easily-visible focal point on your homepage.
- Website loading speed is longer than four seconds
- Users must refresh to see new content.
- There’s no accessibility for users with disabilities.
- Coding errors cause the website to break.
- The homepage looks different in various browsers
Here’s how AmazingThings.org’s homepage looks like these days.
Text and Link Mistakes
- Multiple text styles on a single page (left-aligned, justified, etc.).
- Not enough contrast between the text and background color
- Centered or wholly justified text is used.
- Text besides links are underlined.
- The tone changes throughout the content.
- Links aren’t clearly labeled with relevant anchor text.
- Many of the links are dead or broken.
- Link structure is too complex with too many words in a URL.
Graphic Elements and Multimedia Pitfalls
- The logo isn’t above the fold or present on all subpages.
- Clicking the logo doesn’t take you to the homepage.
- Banner ads and graphics are too close (people ignore ads so they may ignore both)
- Image file sizes are way too big and take long to load.
- Graphics are used as links.
- The color scheme isn’t complementary.
- Too many animated gifs.
- Flashing graphics or animations that can cause seizures.
- There’s no alt-text on graphics.
- Videos or music auto plays when the visitor hits a page.
Navigation Problems
- Navigation sidebars aren’t obvious or present.
- There’s a popup/page that explains how to navigate the site.
- No indication of the site’s layout (i.e. Breadcrumb navigation).
- Navigational terms are vague or confusing.
- No shortcuts to popular pages/content on the homepage.
- Navigational links are inconsistent from page-to-page
- Some or all of the pages require users to scroll horizontally.
- Users must follow four links or more to find the information they’re looking for.
The Mortal Sins of Web Design
- The website doesn’t have a search engine.
- Graphics are used as links
- The CSS or HTML files aren’t optimized.
- Dates are present on content that isn’t consistently updated.
- The content is full of needlessly complex jargon.
- There is no contact information readily available.
- Using JPG images when you should be using GIF.
- The text isn’t black.
- Headings are all capitalized.
- Documents and graphics have incomprehensible file names.
- When clicking an image or graphic it doesn’t show a larger version of the image.
- Documents that span multiple pages don’t have the option to view it as a single page.
- Bullet-point lists aren’t used for organizing information.
- The back button doesn’t work because it’s been disabled.
Post a Comment