Category Archives: Web Design

All aspects of web design are covered in this category. It could be the functionality or the esthetic aspect of a website. We can even touch upon the details of e-commerce.

WordPress basics – Part 5: Creating menus

Great, you’ve created some posts and some static pages for your website. The question now is how do the visitors to your website find this content. The answer is simple, through a well thought out menu Structure. Menus can be as simple or as specific as you like. The rule of thumb is that each page or each blog subject must have a corresponding menu item to accompany it. Let’s see what that means.

Overview

You can find the menu administration screen from the side menu, under “Appearance”.

The Menu Design screen

On the menu design screen, you’ll find the content of your website; pages, posts, custom links (which we will cover later) and post categories.

Creating a menu

Creating a menu is as simple as selecting what pages you wish to permit the visitor to see through a menu.

To finalize the process, you click on the “Add to Menu” button and all selected items are added to the menu, but at the same level. Thus, they become top level menu items.

Creating menu headers with sub-items

As you’ll notice, the collection of pages in this example contains a hierarchical structure (levels). It was created this way in order to group certain subjects. However, the top levels of this structure are not meant to be represented in the menu structure. They simply exist in order to create the grouping.

In order to create menu sub-items, we must create custom links. When creating a menu item to be used as a section header, we simply enter the “#” symbol as the URL and provide a link text. Again, we finalize the process by clicking the “Add to Menu” button.

You’ll notice that all menu items are at the same level, indicated by their inclusion with only their navigation label.

In order to create menu sub-items, must place the custom links above their section sub-items, and then slide the sub-sections so that they are slightly to the right of the header items. The sub-sections will be indicated. The menu structure looks like this:

It is also important to note that we can have several types of menus. Generally, we can also use a Main Menu as a Slide Panel Mobile menu, but we can also create an alternate menu for use on the mobile platform. You simply have to make sure that the proper choices are clicked before finalizing.

Don’t forget to save…

Once we’ve created the proper structure, it is simply a question of confirming our menu design by clicking the “Save Menu” button.

And there you are! If all has gone well, the expected result should look like the following:

In the next installment, we will look at choosing, installing and customizing themes in WordPress in order to create a truly unique website. Please stay tuned!

WordPress basic Part 4: Creating pages

Up to this point, you have been using WordPress to create posts, as you would with a blog site. You will now begin creating pages and creating a structure for your website. This also constitutes the structure of your site. Prior to this step, you should have your content ready in order to create pages that actually contain information for anyone who visits the site.

Overview

Starting in the dashboard, you will look for the section called “Pages”. Clicking this section brings you the “Pages” section from which you can create or edit your website static content.

menu-pages

Creating new pages

In the Pages section, you will find all pages that have been create. Initially, this section contains only sample content (this should be deleted once you have begun building your own pages). So let’s imagine that there is nothing here. Having your content ready to incorporate to your website, simply click on the “Add New” button.

image-2-pages-section

As you can guess, the initial page is blank. You need to give your page a meaningful name. It could be something like “Home” or “Recipes”. Our advice is to keep the name short and to the point. At this time, you can also transfer your content to the page. It is not advisable to write the content directly in the page. You want to have text that has already been proofread and contains no spelling errors. Nothing is more off-putting than spelling mistakes in a web page.

blank-page

So let’s look at a page that has already been created. Once the content is pasted into the Page section, you can format it to look its best. You can also add media (images, video, etc.) and hyperlinks to your other pages, or even external pages.

designing-your-page

Permalinks

You will notice that, just under the page title, there is a permalink. This is the hyperlink that tell the users’ browsers where to look for a given page. WordPress automatically creates this link based on the page title. However, this link could be very long, and you might want abbreviate it to make it look simpler in the browser address window. Luckily, you can edit the permalink directly in the page. Simply click the “edit” button so you can change it. Just remember to have hyphens (-) between the words. Also, certain characters cannot be used, such as commas, apostrophes and others. The rule of thumb is “word hyphen word”.

permalinks

Sub-pages

In some cases, you will want to create sub-pages. Sub-pages are more detailed information that is related to a subject that is more general. The structure is: “Page > Subpage > Subpage”. This helps to keep track of your page structure when you create menus.

subpages

Featured Image

In many case, you will also be able to add a featured image for the page that appears at the top. This is an esthetic touch that gives that page a little bit of life with an image that is related to the general them of the page.

featured-image

Publishing

Once your page is ready to incorporate to your website, you simply have to click “Publish” and it will be live. In this section, you also have options to save a draft of the page while you work on it, preview your draft, and publish the page at a later date.

publish

Conclusion

With all these options, it should be rather easy to create pages that have substance and look good. The only limit is your imagination. The final product, using the theme that we have installed for K-Logik Media, is this:

rendered-page

In the next installment, we will look at creating and managing menus in WordPress. Please stay tuned!

WordPress basics Part 3: Your first post

So you’ve properly installed WordPress and are now ready to begin adding content to your new website. It is time to create your first blog post.

Overview

Content is primarily added under two distinct categories: static pages and blog posts.

Although we will cover the subject of static content pages in the next entry of this series, it is essential to know that pages are considered static content and part of the permanent structure of your website. On the other hand, what are termed posts consist of entries covering specific content related to information you wish to publish to a list of followers. The series you are reading on WordPress is a perfect example.

Essential plug-ins

Before getting into the content of a post, it is important to be aware of the existence of two plug-ins that give more power to the publication of blog posts. Thus, you can reach a wider audience for your information.

Although we have not covered the installation of plug-ins yet, we will provide the essential steps here. Using the administration menu, navigate to the plug-ins section. There you will be able to add new plug-ins.

A good SEO plug-in

The first is a SEO plug-in. For our site, we chose Yoast SEO, which is considered one of the best.

Simply click the “Add New” button and search for “SEO”. You will find many different ones. You should make an informed choice on which one to integrate to your site. In our case, the best choice was “Yoast SEO”. When you find the one you prefer, click “install”, then “activate”. Our example continues on the presumption that you chose “Yoast SEO”.

Yoast SEO

Presuming that you have written your blog entry and have your media ready to include when you publish, got to the “Posts” section of your admin menu, then click the “Add New” button. This brings us to the actual post page where you add your content.

Whatever you write is evaluated by the SEO plug-in. The results are listed and will help you adjust your document for a higher SEO score. The result of a high SEO score is better visibility when people perform a content search relevant to your blog entry.

seo-score

The effect of a high SEO score is that when I search for “Wordpress basics” through Google, my blog entry is easily found

google-search

A social media plug-in

The other essential element of blogging is targeted sharing of your content to your social media audience. This requires a social media plug-in. Jetpack is a very handy plug-in that covers many functionalities for your website. It contains a highly efficient social media component.

Once it is installed, navigate to the Jetpack settings; find the “social” section, then “sharing”. There you can configure the social media accounts to which you want to share your new content. The effect is that anyone who is following you will be fed any new content from your blog. As you can guess, this functionality saves a lot of time when you add new content to your blog.

social-media-sharing

Armed with these two powerful tools, it’s up to you to feed your website with fresh content. Good luck to you in your new role as a content provider.

In the next installment, we will look at creating static pages in WordPress. Please stay tuned!

WordPress basics Part 2: The dashboard

Now that you have installed an instance of WordPress to your web hosting space, under your chosen domain, it is time to start making the site your own. The first screen you should review is the WordPress dashboard.

Overview

Dashboard overview

The dashboard is, as the name indicates, a place where you can get very high level, summarized information about your website.

As you can see, there is, at the very top of the page, a section called “Screen Options”. These are essentially on/off switches for various features that can be used by the administrator of the website. The general rule here is to initially check all these boxes, and then uncheck the features that don’t interest you. You will probably find that most of them are quite useful at some point, and it is better to see a feature that you don’t use than be unaware of one that you might need.

Jetpack Manage

Jetpack Manage

When you install the Jetpack plug-in (covered in an upcoming installment of this series), you will have this Jetpack centralized site management option. At K-Logik Media, we choose to not enable this feature, since functionality of different sites might be different. However, should you have multiple websites and want to save time updating each plug-in on all of your websites in one action, you can enable this feature.

Welcome to WordPress

Welcome to WordPress

The section called “Welcome to WordPress” is a summarized management section where you can customize, edit the front page, and quickly manage various aspects of your website. When working on a website, we tend to use the specific function menus to this type of maintenance. So we don’t really pay attention to this section.

Summarized Information

Wordpress summarization

The rest of the dashboard is dedicated to providing summarized information for the website administrator. Here you can get information about site performance, the amount of visitors, the most popular posts, etc. If you have installed an SEO utility, you can also view analysis of its content and improve it in order to get better search engine results.

The majority of these sections, upon their selection, link to more detailed administration screens, allowing the administrator to perform maintenance.

So there you have it, the essential elements of the WordPress dashboard. This very basic interface is useful when you want to perform basic website maintenance, but as you become more comfortable with the use of WordPress, you’ll quickly find yourself bypassing its use in favor of the more specialized screens.

In the next installment, we will provide an overview of how to post a proper post in WordPress. Please stay tuned!

WordPress Basics Part 1: WordPress Installation

So you’ve decided to use WordPress for your new website or blog. At first glance, the task ahead can seem quite intimidating. However, breaking down the process into steps can greatly help to organize all your efforts and get you to your goal of having a very well structured and adaptable web page on which you can now build your audience.

Well, as you might have guessed, the first step, following your subscription to a web host and the registration of a domain name, is the actual installation of a WordPress site.

In our case, we have a multi-domain account with a reputable Canadian host. Any web host you choose should have a user interface available for you to interact with the server. Here you can manage your website(s), email accounts, security and other features pertaining to your host account.

There are many way that you can create your website environment. You can start from scratch, with your own HTML, CSS and Php files that you may have copied from a local test environment. However, in order to spare yourself efforts and time, the best approach is to start with a CMS (content management system) and customize your website within this environment.

Wordpress installation_1

The installation assistant starts with a straightforward installation screen. You simply choose “Install now” and you are guided through the process via a series of setup parameters.

Wordpress installation_2

Simply choose your domain, the name of your site, and other parameters. Make sure to choose and note your administrator password, without it you will not be bale to access the website management dashboard.

Wordpress installation_3

Here, you will also choose a theme for the website. Our recommendation is to keep it simple and choose a very basic theme, such as “Twenty Fourteen” or “Twenty Sixteen”. Keep it simple at the beginning, and then build on your foundation later. Your initial website will have a generic structure and pre-written content. At this point, you should have your own content ready, as well as any media (logos, photos, videos, etc.).

In the next installment, we discuss the fundamentals of customization.

Stay tuned…

Why WordPress is the best

What are CMS’s?

Prior to the 1990’s, if you needed to design a website, you usually had to learn HTML extensively to create content for your pages. You would then add a Cascading Style Sheet (CSS) to standardize the look of your various pages with color schemes, standardized fonts and predefined container sizes. Then came the creation of a hypertext reprocessor (Php) in order to create interactivity with the user, such as creating a contact form or animating menus and managing cookies. Finally, in order to manage any type of variable data used by the website (user accounts, e-commerce inventories, etc.) All these elements required hours of training and practice in order to create websites that were interesting to users and generated traffic to your pages.

In 1995, along came PHP-Nuke and Zend, which are considered the first Content Management Systems (CMS). However, these tools were heavily dependent on an advance mastery of PHP programming. Therefore, the creation of websites was still restricted to computer scholars and geeks.

In the early 2000’s, design systems such as Joomla, Mambo and Dupral came along and permitted less advanced designers to create websites through the use of templates. This helped to popularize the use of the CMS platform, but these tools did not produce very nice websites and required a lot of customization on the part of the designer.

The big game changer arrived in 2003 in the form of WordPress, a CMS that made extensive use of plug-ins and tweaks developed by third party companies. The benefits were two-fold; the designer now had access to thousands of templates and customizations and the developers could charge fees for premium content.

With the adoption of adaptive design, developers can now create websites that are tablet and cellphone ready, without having to create alternate pages designed for smaller screens. This is a very important development, considering the explosion of cellphone and tablet use in the last few years.

In the past few years, the whole market has exploded. Many companies are beginning to develop their commercial websites in-house and the amount of specific-use templates is currently in the tens of thousands.

Top CMS platforms

Currently, the market is looking at regular users with no design background to spread the gospel of design interfaces. Hosting services like Squarespace offer very comprehensive tools to design fully adaptive websites that can be as simple or complex as required.

For any hosting service, the essential design interfaces are:

  • WordPress
  • Drupal
  • Joomla
  • Abantecart (e-commerce)
  • Prestashop (e-commerce)
  • Opencart (e-commerce)
  • phpBB (forums)

Advantages

The main reason for using a CMS to create a website comes down to the ease of use and the extendibility of the platform. Your website can begin as a simple structure of a few pages (i.e. home page, information about your company, contact page, blog pages, etc.), but you can easily build up your website by adding e-commerce elements, SEO functions, social media functionalities and many more advanced features.

The other appealing feature is the portability of your website to alternate media devices such as tablets and smartphones. Most CMS packages have integrated responsive design. This spares you the task of learning responsive design programming, such as Bootstrap.

While all CMS platforms, in their current iterations, yield very appealing and high performance websites, we at K-Logik Media have adopted WordPress as a preferred tool for the design of our websites. Being a market leader has lead many third party developers to focus their efforts on offering all types of functionality in the form of templates, plug-ins and various tools. Almost any esthetic and functionality aspect has seen developments to help designers create highly functional and great looking websites.

Using WordPress

If you have created an account with a reputable web host, chances are they offer a control panel containing all the functionalities you need to manage your website. In our case, the web hosting service uses cPanel. It contains tools to manage your websites, your email accounts, security settings, databases and other elements.

With WordPress, website creation begins in the control panel. You’ll probably find a WordPress icon or an installation interface such as Softaculous. All the designer has to do is follow the step-by step instructions to get the basic WordPress template installed. The process includes the creation of a MySQL database and the creation of default static and blog pages with sample content (latin gibberish).

Once the template is installed, you are on your way. The next steps involve making the website your own.

It is important to note that, at this point, you should have your content and media files in hand. You should also know what type of site you’re trying to create, since you will be looking for a WordPress theme that greatly resembles the look and feel that you are aiming for.

Themes

One of the most impressive features of WordPress is the amount of themes that were and are being developed for the website interface. At this time, there are approximately 10,000 themes. Independent firms have developed most of them. Many are free, but the really nice ones have premium versions containing many extra features that give you more flexibility in the customization of your website.

Plug-ins

Considering that the basic WordPress theme is, well, basic, a lot of third party developers have come up with an array of specific functionalities that come in the form of plug-ins. Want to create a contact form? There’s a plug-in for that. Want to automatically share your new blog entries across social media platforms? There’s also a plug-in for that. In fact, there is virtually no limit to plug-in development. Any functionality you can conceive that is not part of the theme you’ve chosen can be integrated through the installation of plug-ins. Be aware, however, that many of these plug-ins are initially free, but have a paid counterpart that unlocks their full functionality.

CSS modifications

Another great feature in WordPress is customizable CSS. This permits you to change color schemes, fonts, menus, etc. This means that you can start with a standard WordPress theme, create a child theme (more on this at a later date) and modify the CSS code to create a website that is uniquely yours.

Conclusion

For all these reasons, and a few more, we at K-Logik media, have chosen to make extensive use of WordPress for any project that we take on. The interface permits us to get our customers’ content, choose a general look and feel for the website and begin designing in a minimal interval. The benefits are that our customers get highly performing websites within a small turnaround period. This gets the client online quickly and at a minimal cost.