Knowledgebase : Web Design

Some say the days of the desktop are dead, and it’s easy to see why they might think so. Over half of the traffic on the web is done via a mobile device (cell phone, tablet, etc.), and without a mobile friendly website, your customers can’t see all the amazing things your website is trying to tell them.

A ‘responsive’ website is designed with multiple viewing platforms in mind. Your web address and the website you have displayed there will appear differently to your customer depending what device they are using to view it.

Here’s why ‘image is everything’ when it comes to how responsive your website is to mobile viewers:

YOU ARE GIVING YOUR COMPETITORS BUSINESS.

No, really. According to Google’s Think Insights on mobile internet usage and customer habits, if one of your potential customers lands on your website and doesn’t find what they are looking for quickly, there’s a 61% chance they will leave immediately and go to another website to find what they are looking for.

THINK “HAPPY THOUGHTS!”

That’s right; if a potential customer has a positive experience with your mobile website they are 67% more likely to buy something from you. Your attractive website is doing all the work, presenting your customer with all the information they need to not only make a sale, but learn about your business.

DIFFERENT USERS SPEND DIFFERENTLY

Desktop users aren’t the ones that are making all the purchases in 2015 and 2016. In fact, mobile users are more likely to make a purchase if it’s less than $10 via their phones, and tablet users have the highest buyer rate out of all screen possibilities. While they are all technically the same ‘users’, understanding that peoples’ habits on different devices is imperative to reaching your customers the right way.

GOOGLE LIKES “MOBILE”

Let’s face it; everyone uses Google. Because Google likes responsive websites, this means it’s more likely to show those people ‘using Google’ search results that are responsive to different screens because it makes their search results ‘better’ and ‘more reliable’. Now that doesn’t mean that your non-responsive website will never get Google traffic, but it does mean that Google is more likely to list your competitors higher under the same key words if their website is mobile friendly and yours is not.

SOCIAL MEDIA IS YOUR FRIEND

91% of mobile internet is done with some type of social media. If your business does any social media marketing or wants to ensure that a website ‘look up’ from one friend to another leaves a good first impression, a mobile friendly website is the quickest way to please your customers than end up on your website from a Facebook link.

WORDPRESS MAKES IT EASY

If you are using a WordPress based website, picking the right template can be a simple fix to putting out the perfect virtual image. Many WordPress templates explain that they are mobile friendly and/or responsive as a selling point to encourage buyers to try their template.

If you’re building a website these days, you’re in luck.

 

WordPress has revolutionized the ease and power of what a website (or blog) can do and be.
Now, with the emergence of theme frameworks, you can take WordPress even further.

As you’ll see throughout this free guide, the Genesis Framework for WordPress is much more
than a mere WordPress theme. It’s an underlying framework of immaculate code that’s been
built to achieve three important objectives.

Before we get started, let’s take a quick look at each of these objectives, and why they matter to
what you’re doing online…

  1. EASILY SPOON-FEED GOOGLE YOUR CONTENT

If you know anything about how SEO works (don’t worry if you don’t, Genesis will take care of a
lot of it for you), you know that Google hands out brownie points for clean code.

As amazing as search engines are, they’re not as smart or grown-up as you might think.

Present them with an orderly, squeaky clean page of code, and you’re well on your way to a
solid ranking for your chosen words.

The Genesis Framework does the bulk of this SEO work for you, so you can get back to work.


 

1 INTRODUCTION TO GENESIS

1.1 WHAT’S A FRAMEWORK?

In short, a framework is a robust WordPress theme that can be utilized out of the box — as is —
or also easily extended with child themes and hooks (customized code).

Not only do they provide a number of enhancements above and beyond a typical WordPress
theme, they also serve as a platform on which to build added functionality.

1.2 WHAT’S A CHILD THEME?

A child theme is an extension of a framework comprised of typical WordPress theme elements.

With Genesis, these include a screenshot, theme files, a style sheet, a functions file and an
images directory. These elements are grouped together in what’s known as a child theme
directory and can be activated like any other WordPress theme.


 


WANT TO READ MORE? DOWNLOAD THE FULL FRAMEWORK GUIDE TODAY!

If you’re reading this article, the odds are good that you take SEO seriously.  Perhaps you’ve even created some great content, done some research on Google Analytics, and used your social media accounts to promote it all.  If so, then congratulations!  You’re well on your way to great search engine rankings!  However, even if you’ve done all of this, there is still one very simple problem that could be holding you back a great deal–your URL.  In this article, we’ll explain how URL can affect search engine rankings, discuss the best URLs to choose for your website, and the provide simple instructions on how to create such a URL for your WordPress content.

URL and SEO

Contrary to what some web developers may tell you, not all URLs are created equal.  Sure–no matter what URL you choose for your website, it’s not going to affect your pages crawlability, its speed, or any other technical matter.  What it will affect, though, is the ability of web users and search engines to determine what topics each page deals with. It’s anyone’s guess what:

example.com/rygn39_eue_569

is going to feature, and this hurts SEO.  On the other hand, you can probably guess what

example.com/Improve-your-SEO

is going to be about. Search engines appreciate this, and they will reward you for it!

Choosing the best URL

As mentioned above, a URL that is genuinely descriptive of a page’s content will produce better rankings. Apart from being descriptive, however, it’s also important that your URLs be “pretty.”  What exactly does this mean?

Use-hyphens-between-words, instead_of_underscores.

Don’t include unnecessary numbers or symbols. (They’re&really^^annoying.656666)

Keep it short!

Creating a URL for your WordPress

WordPress URLs are better nowadays than they were in the past, as the site now the title of each post in that post’s URL.  However, these URLs are generally not pretty.  Thankfully, this problem is easy to fix–and, in fact, you can even standardize the format for all of your posts in order to make SEO-friendly URLS easy!  Here’s how to do it:

In the admin menu, go to settings and click on permalink.  From there, you’ll be offered a list of “common settings,” as well as the option to choose a custom setting.  Under “common settings,” you’ll notice that the first option is “plain,” and this is the default option for wordpress users.  After that you will see “day and name,” as well as “month and name.”  These options are worth considering if you are a news blog, however for most users they add an unnecessary length to the URLs without contributing anything meaningful.  “Numeric” adds the number of each post, which is also unnecessary. For most users, “post name” is the best option, as it structures the URL around the post name without including any other data.   Though some “custom” options may be worth pursuing for advanced users, the simplicity and length of “post name” is difficult to beat, and we recommend it for most users.

Download the Program

1.) Download the Jing program here: http://www.techsmith.com/download/jing/ Note: Make sure to download the correct version for your operating system.

2.) Go through the installation process and then launch your Jing program. As part of the configuration process, you will need to sign up for a free Jing account that allows you to upload videos and pictures in real time.

How to Use Jing:

3.) Once you've launched the Jing application, it should appear as a little yellow sun at the top of your screen.

4.) Hover your mouse cursor over this sun, and click on the left most option that looks like a plus sign “+”. You will now have a large mouse cursor, and the purpose is to highlight the area that you want to capture. You will most likely want to capture what is going on in your web browser, so you will want to point the cursor over the topmost area of your browser window. Once you've highlighted the area that you want to capture, click your mouse.

Note: If the area that is highlighted does not look correct, just press your ESC (escape) button on your keyboard and re-select the area that you want to capture.

5.) Once you've selected your capture area, options will appear at the bottom left-hand corner of the capture area. You will have the choice to choose between:

--------------------------------------------------------------------------------------------------------------------------------

If you select the “Capture Image”

A picture has now been taken of the area, and the picture will appear on your screen in front of you.

6.) Enter a name for the image and then click “Share via Screencast.com” option. (It is the leftmost option on the menu bar that appears underneath your picture. It looks like three arrows moving upward).

Your image will upload to a public web server, and when it is completed, a success message will display:

 

7.) Click on the link that says “Your capture has been sent and the link is ready to be pasted”. Your web browser will open up to the picture that has been uploaded.

On this new page, look to the top of your web browser and copy the URL. You can now share your screenshot by pasting that URL, because it will take anyone to view your picture.

Click here to go to the next step

-------------------------------------------------------------------------------------------------------------------------------------

If you select the “Capture Video” option:

6b.) A countdown will occur, after which a video will be recorded of whatever you do inside of the capture area. Once you have finished, click on the “Stop” button located to the bottom left corner of your capture area.

A video has now been taken of your actions inside the capture area, and the preview will appear on your screen in front of you.

7b.) Enter a name for the video and then click “Share via Screencast.com” option. (It is the leftmost option on the menu bar that appears underneath your picture. It looks like three arrows moving upward).

Your video will upload to a public web server, and when it is completed, a success message will display:

 

-------------------------------------------------------------------------------------------------------------------------------------------------------------

8.) After you've captured a video or picture, click on the link that says “Your capture has been sent and the link is ready to be pasted.” It will open that link in your web browser window to show you what people will see when you paste the link.

Now you have an image and /or video of your actions, and can paste a link so that anyone around the world can view this picture / video.

Note: Please remember, we don't offer technical support on how to use these tools, but if you want to learn more you can always visit the support resources offered by the makers of the software.

---------------------------------------------------------------------------------------------------------------------------------------------------------- Additional Resources:

Jing Tutorials - http://www.techsmith.com/learn/jing/

Please see the following guide on how to clear browser cache on all devices - http://www.wikihow.com/Clear-Your-Browser%27s-Cache

The term home or home page is used in web development to refer to the the main page of a web site. It is often used in the navigation menus and other user interface elements of the website to direct users to the main page. By default, a WordPress website shows a home page with your latest posts listed in reverse chronological order.

Users can, however, choose to use a static page as their custom home page. This can make the website feel less like a blog and more like a fully featured website. Many users will choose to do this if they want to have their blog restricted to one section of the website.

There are several ways to modify your homepage or create a static front page. The first way is to either create a front-page.php file or a home.php file. Normally WordPress will serve your index.php file on the homepage. Before serving your index.php file WordPress will check to see if you have a front-page.php file. If you do, then it will serve this one instead. If you don’t have a front-page.php file, then WordPress will check to see if you have a home.php file before reverting to index.php.

The second way to modify your home page is to create a regular WordPress page in your admin panel. From Settings » Reading, you can select the name of the page you just created to be your homepage. You can also choose another page contain your blog posts.

Other terms used to refer to the home page are front page, main page, and main index page.

In WordPress theme development, a template defines part of a web page generated by a WordPress theme.

Example: header.php is a default template used in most WordPress themes. It defines the header area of web pages generated by WordPress. The header file will typically be loaded on every page of your WordPress site, allowing changes to be made to a single file, that will apply across the entire website.

Most WordPress themes have some default templates with code to generate HTML output for particular sections of a website.

  • Main – index.php. To display the main page of a website.
  • Header – header.php. Displays the header section.
  • Sidebar – sidebar.php. Generates HTML output for the sidebar section.
  • Footer – footer.php. Displays the footer section.
  • Theme Functions – functions.php. Contains code and functions to be used in a theme.
  • Single Post – single.php. Displays the single post page.
  • Comments – comments.php. Displays comments and comment form.

Templates can be included into each other. For example, single.php can have header, footer, sidebar, and content template included into it. WordPress allows users to add as many as they would like. Some themes will have them for custom loops and sidebars as well.

WordPress also has a templates hierarchy. If a theme doesn’t have single.php for some reason, then WordPress will automatically fall back to a more general templates like index.php.

Apart from these templates, each WordPress theme must have a style definition file named style.css.

AJAX or Asynchronous Javascript and XML, is a group of techniques used in web development which allows a web page to communicate with a server without reloading the page. Using AJAX, applications on the web can exchange data with the server without interfering with the existing web page. Although the “X” is intended to stand for XML, it is not necessary to use XML for the exchange of data. JSON can be used instead.

In computer programs, operations are ‘asynchronous’ if they operate independently of other processes. This is why the web page doesn’t have to be reloaded in order to send information to the server. The exact method for this uses something called an XMLHttpRequest object, which is effectively an interface that allows scripts to perform AJAX requests.

AJAX is not just one technology. All of these technologies work together to create a single HTTP or HTTPS request. According to Jesse James Garrett, who first coined the term, the following technologies are incorporated:

  • HTML
  • CSS
  • Document Object Model
  • XML XMLHttpRequest Object
  • Javascript

In WordPress, AJAX can be seen in action in the post edit screen where you can add a new category while writing a post without reloading the page. Another example can be seen on the comments page where you can approve or delete a comment without reloading the page.

In computer programming languages, an array is a special variable that can hold more than one value under a single name. It is possible to then access the values by referring to an index number or a text key.

WordPress is written in the PHP programming language and hence as a WordPress user you may come across them while working on WordPress themes or plugins or by simply looking at the core WordPress code. In PHP, the array() function is used to create them. There are three types that can be created in PHP:

  • Indexed – use a numeric keys to access values
  • Associative – use text or string keys to access values
  • Multidimensional – contain more than one array

Many arrays are used to loop through a set of data and perform some sort of operation on each value. For example if you have three pieces of fruit you could store each as a separate variable like this:

$fruits1 = "apple";
$fruits2 = "orange";
$fruits3 = "banana";

This can quickly get very messy. A better solution would be to put them all in an array like this:

$fruits = array("apple", "orange", "banana");

Now you can do things like use built in array functions to perform operations on the data. For example, count() would tell you how many elements are in your array. $fruits[2] would equal ‘banana’ (arrays start at zero).

Example in WordPress:

The $args variable is an array, storing a number of arguments. These are then passed in to the wp_list_categories function later on.

<?php
$args = array(
  'taxonomy'     => 'category',
  'orderby'      => 'name',
  'show_count'   => 0,
  'pad_counts'   => 0,
  'hierarchical' => 1,
  'title_li'     => 'Categories'
);
?>

<ul>
<?php wp_list_categories( $args ); ?>
</ul>

An iFrame is an inline frame used inside a webpage to load another HTML document inside it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.

WordPress users often come across iframes when they are trying to embed something from an external source into their WordPress site. The most common example of an iframe embed code is the YouTube video embed code which looks like this:

<iframe width="420" height="315"src="//www.youtube.com/embed/qzOOy1tWBCg?rel=0" frameborder="0"allowfullscreen></iframe>

In the above example, the iframe tag loads YouTube’s video player with the video ID provided in the code. It has other parameters defined as well, such as height, width, frameborder, etc. These parameters will be used by the script which loads YouTube video player.

Many other third party websites may provide users with an iframe embed code to insert certain elements on their websites. Most commonly web analytics service providers, social media websites, and video sharing sites offer users embed code in iframe format.

Caution: Users are advised to be cautious when they are asked to embed iframe code into their website. You should only embed an iframe code into your website if it is from a reliable source, and you are certain about the identity of the website. Sometimes hackers may also leave iframe code in a WordPress site as a backdoor. This code loads itself in an iframe and provides hackers remote access to a hacked WordPress site.

CSS or Cascading Style Sheets is a style sheet language used to define visual appearance and formatting of HTML documents. WordPress themes use CSS and HTML to output the data generated by WordPress. Every WordPress theme contains a style.css file which has style rules to define the formatting of pages generated by WordPress.

CSS is very simple to use and easy to learn. There are many websites publishing CSS tutorials for beginners that can help a new WordPress user get started. However, since it is very simple to use, a lot of WordPress users can understand the basics by simply looking at their WordPress theme’s style.css file.

Example:

body { 
font-size:14px;
color: #444;
background-color:#FFFFFF; 
} 

h1 { 
font-size:18px;
text-transform:uppercase;
}

.post-title { 
font-size: 16px; 
color: #4C0000;
font-weight:normal;
} 


HTML elements
can be styled directly in CSS. Designers also use identifiers and classes to define different sections that can be styled in CSS. This helps them use different styles for same HTML elements on a web page but in different sections. For example, an h1 element for the blog title in the header section of a page can be styled differently than another h1 element in the post area of the same page.

Example:

<div id="header">

<h1 class="blog-title">
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
</h1>

</div>

 

The HTML shown above contains an identifier named ‘header’ and a class called ‘blog-title’. These sections can be styled in CSS.

Example:

#header { 
background-color:#4C0000;
height:120px;
width:100%;
padding:20px; 
} 

h1.blog-title a { 
font-color:#FFFFFF; 
font-size:16px;
font-family: Georgia, "Times New Roman", serif; 
text-decoration:none;
} 

FTP or File Transfer Protocol is an internet protocol used to transfer files across the internet from one computer to another. For example, when you are installing a software like WordPress on your website, then you will most likely use FTP in order to upload all of the WordPress files from your personal computer to your server. In order to do this, you need something called an FTP client. The FTP client is software that runs on your personal computer and allows you to transfer files to and from your web server. Filezilla and WS_FTP are examples of easy to use FTP clients.

Most WordPress web hosting service providers give users access to FTP, so that they can upload or download files from their web hosting server directly from within their control panel. WordPress users may need an FTP client to upload WordPress files to their web hosting server before they can install WordPress.

Besides installing WordPress, if you plan on using plugins or modifying your theme’s functions.php file then it is good to understand how to use FTP. Sometimes adding a plugin or making a change to the functions.php file can cause the “white screen of death” and lock you out of your site due to poorly written code or compatibility issues between plugins. If you know how to use FTP, then you can simply connect to your server using your FTP client and delete the files that are causing the problems.

 

JavaScript is a programming language implemented in browsers to allow client side scripting on the user end. In plain English, it allows theme developers to add dynamic elements to your websites such as a slider, display alerts, buttons, popups, etc.

WordPress itself, and WordPress themes and plugins use JavaScript in combination with jQuery, Ajax and other web technologies to create faster, interactive, and better web applications.

A JavaScript file can be added with a WordPress theme or a plugin. It can be called in using wp_register_script() and wp_enqueue_script() functions. JavaScript can also be hardcoded into WordPress theme template, however this is not the best way to use JavaScript in WordPress themes.

Many WordPress themes come with a separate js directory inside them. This is where theme developers keep their JavaScript files and call them in their WordPress template files only when they need them. This approach of queuing scripts makes pages load faster and avoids loading unnecessary scripts.

WordPress also includes several JavaScript libraries which theme and plugin developers can use in their own projects. This includes jQuery, a number of jQuery plugins, Underscores, JSON for JS, and Backbone JavaScript libraries.

PHP is a programming and scripting language to create dynamic interactive websites. WordPress is written using PHP as the scripting language. Just like WordPress, PHP is also an Open Source.

PHP is a server side programming language. When a user requests a web page that contains PHP code, the code is processed by the PHP module installed on that web server. The PHP pre-processor then generates HTML output to be displayed on the user’s browser screen.

Example of a simple PHP code:

 

<?php
  echo "Hello, World!";
?>

In WordPress PHP files usually have a .php extension. PHP can be used inside HTML documents. The PHP pre-processor only processes code inside the php opening tag<?php and the closing tag ?>.

Example of PHP code inside an xHTML document.

 

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo( 'name' ); ?></title> 
</head>

A WordPress user does not need to learn PHP in order to use, run, or manage a WordPress powered website.

Most users can use WordPress without ever learning to program or code in PHP. However, if a user wants to develop WordPress themes, plugins, or modify default behavior of WordPress by using actions and filters, then they would need to learn the basic syntax of PHP along with HTML and CSS.

If you are a web developer looking to modify your website/blog/forum please take a look at the following tools that we recommend for making such changes.

(X)HTML, Design and Web Standards

Cascading Stylesheets

Development Tools