Design a website for a target audience

It is important to recognize your target audience. As a web designer you always consciously choose colors, select fonts and write appropriate content based on your clients target audience and how they want their brand perceived. You always need to keep your  target audience in mind when you are in a process of creating a website, so you will be able to make better decisions about the look and feel of your website and how you want it perceived by your visitors. You should always know what your primary message is, who you’re writing for and how you want them to respond. Try to have a clear picture of who your target audience is, what they look like, what age range they’re in, working or retired, what gender they may be, any details that might help you clarify who you’re writing for. A clearly focused website enables you to attract more traffic; help you to differentiate you from your competitors; and ultimately ensures that you rank well with the search engines.

First clarify your underlying strategy. Each web page should have a different key message – you don’t want to duplicate content. Every web page should be prepared with this in mind, write:

• for a specific purpose
• for a specific type of reader
• for a specific result

Start with research with a client survey. Ask questions to find out who the clients are, what they do, who’s their competition and how they want to be perceived.  Research their competition and see what you are stacked up against. By knowing and understanding who your target audience is, it helps you to use the appropriate tone, language and vocabulary in your writing. For clarity and good search engine rankings, you need to think about exactly what the people you are hoping to attract actually want. So give them what they are looking for and use appropriate language that would be appropriate and relevant to your prospective audience.

If you are designing and writing  for professionals, you may use industry specific terminology more freely. But if you are designing and writing for children, you would use different methods to communicate the message. Develop good headlines. Headlines are the first thing readers see, and are typically the only thing they see if the article is shared. Your headlines should jump out at the reader and quickly draw their attention. A good headline can dramatically increase your views when shared on a social network.

Create a profile for different visitors of the site. Determine their age, job title, gender, education and how each profile will be interacting with the website. Sometimes your target audience will most likely be a group of different people. Then start designing  for your audience.  Layouts, color choices, font selections and content are all important decisions that need to be made.

Your target audience will also affect the content on your site and how the information is presented. Good sites address a specific audience. If you want your site to be the one resource that your readers go to first, research your audience! The age of your clients is one of the most discerning characteristics of your target audience. Websites should be geared for certain age groups be respecting the different needs and wants of those at various ages. For example, websites for products focused on a client base composed of  senior citizens should be very easy to navigate with short informational text areas and little animation or distracting graphics. Websites for children should be easy to navigate as well but must also be enticing and engaging for youth, including whiteboard animation videos or cartoons, for example, to keep their attention.

Colors are powerful and play an important role in the world we live in. Colors can make us  think, change actions and affect moods. Color can also play an important role in the perception of the target audience. For example, I wouldn’t expect to see a fluorescent green hospital website, so I suggest that you choose colors that make sense to the market.

Selecting appropriate fonts for your audience is also important. If you were designing for a younger group, you may use a fun scripted font whereas a corporate site would use a more conservative font such as Open Sans, Arial or Helvetica.

There are many creative ways to increase traffic to your website design. As long as your creating good, original content and make sure that your articles address the needs of your readers, and that they can find all of the information they need in one spot.  You need to offer visitors the information they need to achieve a goal, solve a problem, be entertained, and find out quality news. This is the most effective means for increasing traffic to a website

Static and Dynamic Websites

Static websites can only really be updated by someone with a knowledge of website development.There are many static websites on the Internet, you won’t be able to tell immediately if it is static, but the chances are, if the site looks basic and is for a smaller company, and simply delivers information without any bells and whistles, it could be a static website.Static websites are the cheapest to develop and host, and many smaller companies still use these to get a web presence.

A static website consists of a series of HTML files, each one representing a physical page of a website. So on static sites, each page is a separate HTML file. When you visit the homepage, you are viewing the actual homepage file. Even if two pages contain a chunk of identical content (like a footer), they both contain two versions. So, if you want to update the footer, you must do so twice, once on each page. This is fairly straightforward and it’s how all websites were built during the early years of the world wide web. With a static website, you simply have the raw HTML that creates your page in a file. A visitor’s web-browser will just directly request that page, and all the server has to do is hand it off as is.

Advantages of static websites
• Quick to develop
• Cheap to develop
• Cheap to host
Disadvantages of static websites
• Requires web development expertise to update site
• Site not as useful for the user
• Content can get stagnant

Dynamic vs Static website
Depending on your needs, either a dynamic website or a static website could do just fine. The best of both worlds would be accomplished by using a cache or caching plugin for your dynamic site, so that frequently accessed dynamic pages can be automatically turned into static pages.
A great example of this flexibility would be using a WordPress cache plugin. These can easily turn your WordPress dynamic website, into a site that still handles dynamic requests, but at the same time saves on resources by still serving up static pages when dynamic ones aren’t needed.
Static websites are popular because they are super efficient, extremely fast and usually free to host. Blogs, resumes, marketing websites, landing pages, and documentation are all good candidates for static websites.

Many sites from the last decade are static, but more and more people are realising the advantages of having a dynamic website. Dynamic websites can make the most of your site and either use it as a tool or create a professional, interesting experience for your visitors. Websites come in a variety of different shapes and sizes but one way they can be divided is between static sites and dynamic sites. The difference is not obvious when you’re just looking at a website in your browser, but it can make a big difference in the function of your website.

Dynamic websites on the other hand can be more expensive to develop initially, but the advantages are numerous. At a basic level, a dynamic website can give the website owner the ability to simply update and add new content to the site. For example, news and events could be posted to the site through a simple browser interface. Dynamic features of a site are only limited by imagination. Some examples of dynamic website features could be: content management system, e-commerce system, bulletin / discussion boards, intranet or extranet facilities, ability for clients or users to upload documents, ability for administrators or users to create content or add information to a site (dynamic publishing).

A dynamic website uses server technologies (such as PHP) to dynamically build a webpage right when a user visits the page. Basically, what happens is the user goes to a certain web address and the server finds a bunch of different pieces of information that it writes into a single cohesive web page, which is what you see. This way of building web pages “on the fly” has several advantages.

Since each part of a web page is separate, it is much simpler to update something across many pages, all at once. For example, if you have a change to your website’s navigation you only have to change it in one place (the file that holds navigation information) and it is updated on all pages that contain that file. If you had a static website, you would have to edit every single page in order to make a change to the site’s navigation. This is tedious, repetitive, and prone to errors.

Are there any disadvantages to a dynamic site?
It really depends on what the purpose of the site you’re building is. Dynamic sites may take longer to initially code and develop than static sites.
However, in most cases any up-front savings you may achieve from a static website will be wiped out multiple times over by the additional time you’ll need for future updates and revisions.
So if the site is simply for a limited-time promotion, only has a page or two, and is going to be taken down when the promo ends, it’s possible that a static site might be the better option. However in the vast majority of website projects, dynamic sites pay off in the end.
If you are trying to speed up your website, it’s important to first know the difference between a dynamic website, and a static website. These are the two types of websites that currently exist on the Internet.
A quick break down would be that dynamic websites require more server resources, but provide more flexibility when it comes to updating them. While static websites are fast in nature, because they don’t ask the server to do extra work, other than just handing off already completed files to the visitor.
Each one has its own advantages and disadvantages, and in this guide I’ll discuss why you might want to use one over the other in your specific case.

Advantages of dynamic websites
• Much more functional website
• Much easier to update
• New content brings people back to the site and helps in the search engines
• Can work as a system to allow staff or users to collaborate
Disadvantages of dynamic websites
• Slower / more expensive to develop
• Hosting costs a little more

The difference between HTML, CSS, JavaScript and PHP languages

HTML

HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other’s research documents. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today.

HTML is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the W3C, the organisation charged with designing and maintaining the language.

THEN, WHAT IS HTML? It is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language.  A markup language is a set of markup tags.  HTML documents are described by HTML tags.  Each HTML tag describes different document content. You use HTML to create the actual content of the page, this means in HTML you define the basic structure and the contents of a website. It is simply a format that allows you to specify certain ways to display information on a page.

HTML consists of a series of short codes written in “tags” into a text-file by the site author, which are types of a structure that are written between opening and closing brackets. The tags are what separate normal text from HTML code. You might know them as the words between the <angle-brackets>. Tags can be used to make links, format text, build the page layout and more. For instance this bold link is made of HTML code that looks like this: <strong>this bold link</strong> is made of HTML code. Different tags will perform different functions. The tags themselves don’t appear when you view your page through a browser, but their effects do. The text is then saved as a html file, and viewed through a browser. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages.

If you want to make websites, there is no way around HTML. Even if you’re using a program to create websites, such as Dreamweaver, a basic knowledge of HTML can make life a lot simpler and your website a lot better. The good news is that HTML is easy to learn and use. In just two lessons from now you will have learned how to make your first website. Complete websites can be built out of pure HTML and text, but they wouldn’t be very attractive looking, so we use CSS to style them.

HTML and JavaScript are two completely different things. HTML is a markup language designed for defining static web page content. JavaScript is a programming language designed for performing dynamic tasks. Sometimes the distinction is confusing because JavaScript code can go in the same file as HTML.

CSS

CSS was first developed in 1997, as a way for Web developers to define the look and feel of their Web pages. It was intended to allow developers to separate content from design so that HTML could perform more of the function that it was originally based on – the markup of content, without worry about the design and layout. CSS didn’t gain in popularity until around 2000, when Web browsers began using more than the basic font and color aspects of CSS. Web Designers that don’t use CSS for their design and development of Web sites are rapidly becoming a thing of the past.

THEN, WHAT IS CSS? Cascading Style Sheets, or CSS, allow you to specify things like the font you want on your page, the size of your text, whether the page is to have 2 columns, whether your text is to be in bold or italics, and so on. In other words, it is the part that lets you control the appearance of your web page.  CSS is responsible for the Design of the Webpage, how every thing looks, and where it is on the page. (CSS) dictate your website’s look and feel. Font size, font color, font type, styling around images, page layout, mouse-over effects, colors, margins, lines, height, width, background images, advanced positions and many other things are all determined by CSS.

If HTML is a house, with the structure (walls, roof, etc) and contents, like furniture, CSS is the color of the paint, the size of the rooms and the ornamentation. CSS is used on a website to make the design. Ok, so with HTML we make our webpage and CSS allows us to style it.  CSS revolutioned the world of web design!

JAVASCRIPT

JAVASCRIPT is a scripting language and was first implemented by Netscape Communications Corp. in Netscape Navigator 2 beta (1995).

THEN, WHAT IS JAVASCRIPT? JavaScript is the most popular programming language in the world,  used to make web pages interactive. JavaScript support is built right into all the major web browsers, including Internet Explorer, Firefox and Safari. So, it runs on your visitor’s computer and doesn’t require constant downloads from your website. Provided that the visitors to your site are using web browsers that support JavaScript (most do) and have JavaScript enabled (it is by default), then your JavaScript will run when they visit the page.

JavaScript is not a programming language in strict sense, is most commonly used as a client side scripting language, that is, a lightweight programming language that is interpreted by the browser engine when the web page is loaded (JavaScript codes are written into an HTML page.)  When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it’s up to the browser to do something with it. Javascript can dramatically improve the content of a website. There are a number of different places where JavaScript can be used but the most common place to use it is in a web page. In fact for most people using JavaScript, in a web page is the only place where they use it.

Creating a clock using Javascript:

1 <!doctype html>
2 <html>
3 <head>
4 <meta charset=”utf-8″>
5 <title>Untitled Document</title>
6 <script type=”text/javascript”>
7 // 1. Created the function
8  function updateClock ( )
9 {
10 // 2. Created some variables
11 var Time = new Date ( );
12 var Hours = Time.getHours ( );
13 var Minutes = Time.getMinutes ( );
14 var Seconds = Time.getSeconds ( );
15
16 //3. If needed, add Zeros to single intergers
17 Minutes = ( Minutes < 10 ? “0” : “” ) + Minutes;
18 Seconds = ( Seconds < 10 ? “0” : “” ) + Seconds;
19
20 //4. IF Else logic for choosing “AM” or “PM”
21 var timeOfDay = ( Hours < 12 ) ? “AM” : “PM”;
22
23 //5. Change from Military time to 12-hour format
24 Hours = ( Hours > 12 ) ? Hours – 12 : Hours;
25
26 //6. If Hour time is 0, change it to 12
27 Hours = ( Hours == 0 ) ? 12 : Hours;
28
29 //7. Final Clock output
30 var currentTimeString = Hours + “:” + Minutes + “:” + Seconds + ” ” + timeOfDay;
31
32 //8. Function to display current time
33 document.getElementById(“clock”).firstChild.nodeValue = currentTimeString;
34 }
35 </script>
36 </head>
37 </head>
38 <!—9. Update clock every 1000ms or one second—>
39 <body onload=”updateClock(); setInterval(‘updateClock()’, 1000 )”>
40 <span id=”clock”>&nbsp;</span>
41 </body>
42 </html>

JavaScript adds interactivity to Web pages and creating Web applications.It  is often used to create polls and quizzes,  and if you command an image to be replaced by another one, JavaScript tells the browser to go do it. Because the browser actually does the work, you only need to pull some strings by writing some relatively easy lines of code.   Do you need a clock or date on your site? Dancing bears and hula girls? That’s what makes JavaScript an easy language to start with.

PHP

PHP was originally an acronym for Personal Home Pages, but is now a recursive acronym for PHP: Hypertext Preprocessor. Originally developed by the Danish Greenlander Rasmus Lerdorf, and was subsequently developed as open source. PHP is not a proper web standard – but an open-source technology. PHP is neither real programming language – but PHP lets you use so-called scripting in your documents. To describe what a PHP page is, you could say that it is a file with the extension .php that contains a combination of HTML tags and scripts that run on a web server.

On a server side and just before a page is delivered to the client browser, PHP makes it possible to create pages that changes depending on the data given to PHP, for example you can show a different page to people from different countries or you can show a different page depending on what was posted recently on the page. PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. PHP is what makes your website do stuff and works like this: A PHP script runs on the server and can alter or generate HTML code at will. An HTML web page is still delivered to the browser, which doesn’t know or care that PHP is involved in tweaking the HTML on the server.

PHP is the code that is used to interface with the database. The power of having all of the content stored in a database means that you can switch out themes and code to radically change the design of a website while maintaining the same content. PHP gives you the freedom to add advanced features to your website. PHP can be used in many contexts – discussion forums, polls, shops, SMS gateways, mailing lists, etc. The only limitation with what you choose to do with PHP is your imagination.

 

 

 

Do’s and Don’ts of using Audio files on a website

Don’t use background music on your web pages!
Some web designers like the idea of a little background music to set the mood of the page. In special cases like say an MTV or Disney website, this can work. But for most websites this is just a bad idea for a few reasons:
• Music files are typically pretty ‘heavy’, and take time to download. Most surfers will not think that it’s worth the wait. Besides, many computers simply don’t have sound capability, so it seems silly to force these people to download something they can’t use.
• Unexpected music/sound spewing forth from ones PC can be very annoying and potentially cause problems.
Do: If you want to have music on your web site, make it an option that the user can turn on and off. A good way to do this is with a Flash movie; most browsers come equipped with the Flash plug-in and the Flash supports compact MP3 files. Of course, if you just want to give users the option to hear some piece of music, like your band’s latest tune or a sound clip from an interview, the easiest solution is to create an MP3 of the audio, and then create a link to it.

Don’t add music to your site that plays automatically. This is the fastest way to get someone to leave your site. Remember that people might be browsing the internet from a place where sound is unwelcome (an office, library etc) or they might have their own music playing and yours will only interfere. If they can’t find an obvious way to turn the music off, they will simply close your site immediately! Do: If you have a music site, give your visitors a media player and allow them to turn it on and off as they wish.

Basic Audio Etiquette
1. Don’t set your audio player to “auto-play”: Nothing is more irritating for a visitor than to arrive at a site and have to frantically search for the “mute” button.
2. Forget “mood music”: Assuming that your visitors will appreciate a bit of mood music is almost always misguided. This rule should be heeded especially by e-commerce and personal websites.
3. Stay Consistent: If you choose to embed an audio player on your website, pick just one, not multiple players. Staying consistent with your audio player will help you to best track the number of plays your songs are getting, as well as to streamline the design of your site.

Do: Then again, it’s also important to know when you should avoid embedding an audio player on your website altogether.

There are plenty of valid reasons why you should embed audio onto your website; maybe you’re in a band and want your visitors to be able to listen to your music without having to be re-directed, or maybe you’re a voice over artist who needs to showcase the range of your work. For these good reasons, you need a good embedded audio player to use on your site, one that won’t drive you in circles trying to make it work for all browsers and, well, all of your fans.

Audio & Video
Do: Take advantage of media providers like YouTube to store your videos (since YouTube is in itself a great search engine). Using YouTube as your video provider means you can embed your video quickly and easily into your own site, and you know it will work across iOS devices.
Don’t: Automatically play video or audio when a page loads. Most users find that annoying which means their first impression of your site won’t be a great one.
Flash
Don’t: Since iOS doesn’t support flash, anything using flash (page intros, navigation menus, audio & video) won’t work. Best practice – ditch the flash!

 

 

Landing Pages and why we use them

In the purest sense, a landing page is any web page that a visitor can arrive at or “land” on. Landing page is a standalone web page distinct from your main website that has been designed for a single focused objective.

Landing pages help increase your conversion rates. The main reason for this is that targeted promotion or product specific. Landing pages are focused on a single objective that matches the intent of the ad that your visitors clicked on to reach your page. You should try to use a landing page for every inbound advertising campaign you operate. The goal of landing pages is to convince the visitor to provide you with his or her information in exchange for a high-value offer. They are the best way to convert a person into a lead. Most small and medium-sized businesses have very few–if any–landing pages on their sites. You will now have the opportunity to email them and nurture them down your sales funnel by continuing to market to them via email, phone calls, or social media to influence them to buy from you. The more landing pages you have, the more opportunities to generate leads and fill your funnel.

The design of your landing page is extremely important and affects the conversion rate of your forms. The look, headline, and text must all be relevant to the offer to obtain a high conversion rate. All of your content on the landing page should be contained above the fold. This means that the visitor should not be required to scroll down to see any of the page content. Effective landing pages will also contain an image that is relevant to the call-to-action button that drove the visitor to the landing page. The text should be very direct and easy to read. A landing page is typically linked to an offer. A landing page needs a form to capture contact data for a website visitor. In most cases, you do not want to include your main navigation bar at the top of the landing page so the visitor’s only option is to complete the form. Not including the navigation bar has been shown to increase conversion rates by as much as 100%. Landing pages let you narrow your focus and remove the clutter from your pages that could distract your visitor from taking the action you want them to take. It allows you greater control to direct them and help them find what they’re looking for much faster. See above the anatomy of a landing page.

If you consider the example of sending traffic to your homepage vs. a standalone landing page, you can understand that your homepage is designed with a more general purpose in mind. It speaks more to your overall brand and corporate values and is typically loaded with links and navigation to other areas of your site. It’s important that the design of your landing page matches the branding and design standards of your website. This is more critical with a click through landing page, as the visitor will transition from one to the other right away – and you need to maintain the consistency. Every link on your page that doesn’t represent your conversion goal is a distraction that will dilute your message and reduce your conversion rate. A fundamental aspect of conversion centered design is message match, which is the ability of your landing page to accurately reflect the messaging presented on the upstream ad. On the left a good sample of a landing page.

Most visitors are very impatient and will leave your site without a few seconds of arrival if you don’t reinforce their mission with a matching headline and purpose (quickly and clearly).

SIX LANDING PAGES THEMES: