ProvoastMedia - Blog http://www.provoastmedia.com/blog I’m here to embolden timid and calm the gun slingers. Fri, 19 Mar 2010 21:48:47 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 User Experience : Why force users to signup? http://www.provoastmedia.com/blog/?p=167 http://www.provoastmedia.com/blog/?p=167#comments Fri, 19 Mar 2010 21:48:47 +0000 Sam.p http://www.provoastmedia.com/blog/?p=167 When scouring the Internet looking for an internet service that does what I want, I get frustrated when I’m asked to signup for a service thats offered for free. When sites do this without a need for it, I get very frustrated and it turns me away from the site.

Typically these sites have two reasons for requiring a signup. One reason for requiring signup is to create a database of contact information to sell to other businesses. The other reason is because the webservice actually need the info to send you newsletters or account updates. The latter is understandable and should be the only reason you would ever require your users to signup.

You might ask, what about the contact form? Contact forms are a different ball game and should be used strictly for optional contact purposes. For example, I have a contact form on ProvoastMedia and its there for you’re convenience. If you want to contact me regarding a job or questions regarding web production, then you can submit the form. This is the only reason I have a form on my website.

When you do have an online service that requires users to signup you need to remember to only require the necessary contact information from your user. For instance, if you have an online service that only deals with online transactions, then you don’t need to even request the user to input their physical mailing address. Even when you request unneeded information from users, it takes away from a smooth signup for the user and instills a subconscious negative feeling about your site and possibly reduce the frequency of visits.

I hope this helps you understand that signup forms shouldn’t be used unless you want to offer a contact form, newsletter signup, or user access. If you’re reasons don’t match these three and you still insist on a user signing up, then you probably don’t care about their experience and are only thinking about the bottom dollar.

Remember, if you care about you users, make the signup sheets as easy as possible to fill out and don’t request any information you don’t need. If you do what I have advised you will have more people willing to use your online service.

Happy surfing!

]]> http://www.provoastmedia.com/blog/?feed=rss2&p=167 0 The Webpage Setup: Hyper Text Markup Language (HTML), baby steps 1.2 http://www.provoastmedia.com/blog/?p=150 http://www.provoastmedia.com/blog/?p=150#comments Thu, 18 Mar 2010 21:42:32 +0000 Sam.p http://www.provoastmedia.com/blog/?p=150 Its been a while, but hopefully you haven’t forgot the previous two articles laying out the basics of building a website. In this article I’ll cover the more advanced basics of building a website, namely the doctype, lists, and email links.

First off is the doctype. The doctype didn’t really exist in the eyes of the World Wide Consortium (W3C) until HTML 4.0. The reason behind defining a doctype is to take your web page out of quirks mode, allowing it to comply with web standards. Quirks mode allows for backwards compatibility, but does not allow you to validate your website code therefore making it not search engine friendly.

I can’t stress it enough, you must use the doctype if you value validating your code. Remember that when you have valid code then search engines such as Google, Yahoo, and Bing like valid code and you’re website will show up if it is valid. The three common doctypes used are listed below.

  • Strict, in which deprecated elements are forbidden
  • Transitional, in which deprecated elements are allowed
  • Frameset, in which mostly only frame related elements are allowed

An example of how to implement the doctype in a page is highlighted below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd" >
<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
</head>
<body>
    <!-- Insert your content here -->
</body>
</html>

Whenever you want to make bullet or sequential lists you will want to use the ul (unordered list) or ol (ordered list) tags. The list syntax is similar to table syntax meaning that there are tags located inside the parent tags. For example, when you want to create an unordered list you type out the ul opening and closing parent tags and then insert the li (list item) opening and closing tags inside them. You can add as many li /li tags as needed. When you want an ordered list the only thing that changes is the parent tags. Once you’re done with your list you close the parent tag.

Examples of list implementation are below.

Unordered list:

<ul>
  <li><!-- Insert your content here --></li>
  <li><!-- Insert your content here --></li>
  <li><!-- Insert your content here --></li>
  <li><!-- Insert your content here --></li>
</ul>

Ordered list:

<ol>
  <li><!-- Insert your content here --></li>
  <li><!-- Insert your content here --></li>
  <li><!-- Insert your content here --></li>
  <li><!-- Insert your content here --></li>
</ol>

Ordered lists are numbered by default and can be changed via CSS to Roman Numeral, alphabetical, decimal, etc. You can also change the style of bullets in your unordered lists via CSS. For more ul and ol styles click here.

Assuming you are creating a website to get in touch with people around the world I feel you need to learn to provide an email contact link. The email link uses the ⟨a⟩ tag like a hyperlink. When a user clicks on the email link they’re email program (Microsoft Outlook, Apple Mail, or Mozilla Thunderbird) opens up a new message with the recipient being the person you would like to email. If you would like to include the subject of the email in the email link, then you can add it as well.

An example of email link implementation is below.

Without subject code:

<a href="mailto:info@provoastmedia.com">Email Us!</a>

With subject code:

<a href="mailto:info@provoastmedia.com?subject=An email Subject">Email Us!</a>

Now you know the basics to creating a website using HTML and the next step is to incorporate CSS to style the HTML code. Cascading Style Sheets have greatly improved the web and are a must if you wish to get serious about creating websites. I’ll introduce CSS to you in the next installation of “The Webpage Setup”.

Happy surfing!

]]> http://www.provoastmedia.com/blog/?feed=rss2&p=150 0 The Webpage Setup: Hyper Text Markup Language (HTML), Baby Steps 1.1 http://www.provoastmedia.com/blog/?p=137 http://www.provoastmedia.com/blog/?p=137#comments Wed, 24 Feb 2010 20:24:37 +0000 Sam.p http://www.provoastmedia.com/blog/?p=137 Last time we covered the short history of HTML and learn how to create a bare bones web page. I’m assuming you’ll care about the look of your website in the future, so this article will cover tables, images, and links.

The table tag ‹table› is useful for displaying data such as comparing different software features or for organizing a contact form. There are three basic parts to creating a table. The first part is the parent ‹table› tag which is found at the beginning and end of the table content. The second element found in a table is the row tag ‹tr›. The table row tag is found at the beginning and end of each table row. Thirdly is the individual table cell tag ‹td›. The ‹td› tag is found at the beginning and end of each table cell. Table styling can be edited via Cascading Style Sheets (CSS), which will be covered in later articles.


<table border="1">
  <tr>
    <td>This is where you put header text</td>
    <td>This is where you put header text</td>
    <td>This is where you put header text</td>
    <td>This is where you put header text</td>
  </tr>
  <tr>
    <td>This is where you put your data</td>
    <td>This is where you put your data</td>
    <td>This is where you put your data</td>
    <td>This is where you put your data</td>
  </tr>
</table>

Next is the image tag, ‹img›. The image tag is very useful and almost mandatory if you want your web page to have any styling besides solid colors. When calling an image you must always include three elements. The three elements are as follows; img (image tag must always be first), src (URL location of the image), and alt (the alternative description of the image). Image tags will be a necessity to your website so know this tag well.

<img src="images/sample.jpg" alt="This is a sample image"/>

Last is the link tag also known as the anchor tag, ‹a›. This tag is used to link to other pages on your website, websites throughout the Internet, or a specific section on your web page. An anchor tag must always have two elements, a (anchor) and href (URL of the page you would like to navigate to). The anchor tag must always wrap around content on your page. This content can include images or text. If you have a lot of content on a web page and would like to provide your readers with a jump link you can add an anchor tag. You must implement a “id” element to the section you want the reader to jump to. This is displayed in the final example below. When sending your readers to a website away from your own, it is wise to add “target=”_blank”" to the anchor tag. This opens the link in a new window or tab. This function can also be viewed in the final example below.


<a href="sample-page.html">Click here for the sample link</a>

Below, I have created a page displaying all we have covered so far.


<html>
  <head>
  <title>My First Webpage</title>
  </head>
  <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.  Click <a href="#image">here</a> to move down to the image.</p>
        <br>
    <table border="1">
      <tr>
        <td>This is where you put header text</td>
              <td>This is where you put header text</td>
              <td>This is where you put header text</td>
              <td>This is where you put header text</td>
      </tr>
      <tr>
        <td>This is where you put your data</td>
                <td>This is where you put your data</td>
                <td>This is where you put your data</td>
                <td>This is where you put your data</td>
      </tr>
    </table>
        <br>
    <img id="image" src="images/sample.jpg" alt="This is a sample image"/>
    <br>
    <a href="sample-page.htm">Click here for the sample internal link</a>
    <br>
    <a href="http://www.google.com" target="_blank">Click here for sample external link</a>
  </body>
</html>

Click here to see the example page

That is all for today. You now have the basics of a web page covered. Next time I will begin talking about advanced elements of HTML and why you should use them in your webpage.

Happy surfing!

]]> http://www.provoastmedia.com/blog/?feed=rss2&p=137 0 The Webpage Setup: Hyper Text Markup Language (HTML), Baby Steps 1.0 http://www.provoastmedia.com/blog/?p=105 http://www.provoastmedia.com/blog/?p=105#comments Tue, 16 Feb 2010 23:05:59 +0000 Sam.p http://www.provoastmedia.com/blog/?p=105 Hyper Text Markup Language or HTML is the basis of the Internet. If you want to create your own website, you need to learn HTML. We have already covered the tools you need to create HTML, so now I’ll share a little history about HTML and then you’ll see it in action.

A name that you might have heard or already know is Tim Berners-Lee, the father of HTML. In 1980 Berners-Lee, a physicist, decided tat he and his collegues needed a way to use and share documents via the Internet. Thus he proposed to create an Internet based hypertext system. In 1990 he specified HTML and wroted the browser and server software. Berners-Lee first publicly documented HTML in 1991 with HTML Tags. In the document, 20 tags were described and of those twenty 13 still remain.

Since then HTML has moved quite a ways, and now has a governing body which oversees the standardization of HTML. This body is called the World Wide Web Consortium (W3C) and was formed in 1996. Because of the W3C and the ever increasing push to make the Internet simpler, Cascading Style Sheets (CSS) were introduced to reduce load time and clean up HTML coding. I’ll speak more of CSS in a different article.

Now that you have a little knowledge about the history of HTML you need to know the basic tags to create a webpage. First open your source code editor, select a new document, save it as an html document, and proceed with the example below.

<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

When coding with HTML it is important to keep the ‹html›, ‹head›, ‹title› and ‹body› tags at the beginning of the document. While coding you must also remember to indent the tags as seen above. Indenting makes it easier for another programmer to easily read your code. In the example above you will also see . This is the closing part of the tag and must always happen. You should always close your tags, unless told otherwise, which will be discussed in a later article.

The tags that you see between the ‹body› tag are where the webpage content is represented.

The ‹h1› tag is the first of six numbering h1, h2, h3, etc. The ‹h› tag should wrap around the title of your content section. Also remember that the lower the number on a ‹h› tag means a larger font size.

The ‹p› tag is the paragraph tag which should be used to wrap around page content.

It might seem like a lot, but remember that you must always have closing tags, ‹html›, ‹head›, ‹title› and ‹body› tags in order to display any content. In the next article I’ll cover embedding images, tables, and links in your webpage. If you have any questions please email me.

Have fun and safe surfing.

]]> http://www.provoastmedia.com/blog/?feed=rss2&p=105 0 Too Many Print Designers Try to be Web Designers http://www.provoastmedia.com/blog/?p=82 http://www.provoastmedia.com/blog/?p=82#comments Thu, 11 Feb 2010 21:36:22 +0000 Sam.p http://www.provoastmedia.com/blog/?p=82 This article is not intended to hurt any feelings of print designers, but simply to enlighten people to the fact that just being a good print designer does not make a good web designer. The reason I say this is because print designers typically concern themselves with the look of their design, not the usability. Usability is really what a website should be about first and foremost. A user should navigate to a website and know what to do upon arrival. Someone who has never used the internet should be able to see your website and know how to use it.

It should be too simple, and too intuitive. Sure this might seem like not enough, but look at Google, Flickr, and Twitter. Each of these sites originally focussed on one service and focussed on doing it well. After they achieved “doing it well” they designed their sites around their services.

  • Google – They originally started out as a search engine. They still are focussed on search functions, but now have many other services for their users which can be easily found at the top of the page in their home page. It is easy to know what Google is all about when you visit their page. Users see the Google logo a search bar and two search buttons, one for a “Google Search” without any parameters other than your search terms and the other “I’m Feeling Lucky” to further refine your search.

    Google

  • Flickr – Originally created solely for users to upload their digital pictures. When you arrive to the flickr homepage you instantly know what they’re about. In bold black letters is “Share your photos. Watch the world.” Directly above the headline is a button that entices the user to create a flickr account.

    flickr

  • Twitter – Is still focussed on providing users with the ability to write and read what’s going on in 140 characters or less. The Twitter homepage has a search bar to see what people are saying about a specific topic and a “Sign up now” button is directly to the right of the search bar.

    twitter

This brings me to the title of this article, “Too many print designers try to be web designers”, because of the nature of print the print designer must only focus on conveying the information on that piece of paper to the reader. The reader is already engaged with the print design because they’re holding it or they physically walked up to it. A web designer must worry about the eye-catching design, but also worry about keeping a viewer returning to their site. A web designer must present a user with something that they didn’t realize they needed and now they can’t live without. In essence, a web designer should think of themselves as a product designer and worry about designing a product that is easy for the customer to interact with.

I understand you might see this as a rant, and it is. I am tired of the websites like MySpace, Yahoo, and the past couple of Facebook designs. I seldom visited the sites because of their jumbled user interface and their disregard for their viewers. They don’t care if the viewer doesn’t want ads placed inside any open space through out the site, and this is why MySpace and Yahoo are losing users. They tried to do too much and never focussed on doing one thing well.

  • Yahoo – It isn’t apparent what Yahoo originally focussed on. Now, when a user visits the site, they are bombarded with too many things to do. Does Yahoo specialize on anything. I know I have a yahoo email account, but that might possibly be the hardest thing to find at a glance.

    Yahoo

  • MySpace – Originally set out to be a social networking service. After the company found they can make a lot of money from advertisments they’re placed all over the homepage. Many of the advertisement headlines are larger than the myspace logo.

    myspace

So remember, if you are new to the web design business focus on the usability of your web site design. Keep asking yourself is it too easy, is it too intuitive? The answer should always be no.

Have fun and safe surfing.

]]> http://www.provoastmedia.com/blog/?feed=rss2&p=82 2 The Web Page Setup: Content Management http://www.provoastmedia.com/blog/?p=58 http://www.provoastmedia.com/blog/?p=58#comments Tue, 09 Feb 2010 17:34:36 +0000 Sam.p http://www.provoastmedia.com/blog/?p=58 Last time I left you with a huge list of text editors and probably more questions than answers. In this second installment of “The Webpage Setup” I’m going to touch on the wide world of File Transfer Protocol Clients (FTP Clients) and Content Management Systems (CMS).

I’ll first touch on choosing a CMS that works for you. There are many different CMS systems out there and they can be a great tool to help you or your client organize all of their online files. There are five things that I consider when choosing whether or not a certain CMS will work for the project I’m working on.

  1. Cost – I first look at the cost of a CMS. As a web developer I look for the cheapest/best product out there. Don’t get me wrong, there are many CMS solutions out there with 24 hour support and the like, but I tend to try to keep things on the cheap for myself and my clients. There are many products out there that are open source and free.
  2. Usability – This entails many things. There are a lot of systems out there that provide you with many tools and no easy way to use them. I look for an easy to use system with a variety of tools, and is easy enough for clients with virtually no web experience.
  3. Permissions – You need to be able to set a client up with the ability to add new users and set their permissions. Look for a CMS which enables administrator accounts, and content creating accounts. There are some systems which allow the administrator to set which directories a user can access.
  4. Versatility – Once you start feeling out which types of tools you like using with various systems, you can start looking into the versatility of the product. Will it let you change the layout of the tools? Will it allow you to create plug-ins, or add widgets? Versatility and usability go hand in hand when you’re trying to add new features to your CMS. If it’s too hard to add a new tool it can become very frustrating.
  5. Design/Customization – This feature is last on the list but certainly not least. When you or a client want to add content to their website it should be an enjoyable experience. You also want to be able to customize the design to make it coincide with the design of the website you’re using it for. The design is the first thing that many people will notice and if they can’t find their way around, then the system features are lost on them.

With that list we can now look at a list of CMS’s that are widely used and offer users a variety of functions and versatility. When choosing a CMS you should also research to see if it is widely used. If it is, there will be plenty of documentation regarding how to use the product or troubleshooting. Remember a CMS runs on the server that hosts your website, so it doesn’t matter which operating system you create the content with. My list of content management systems are very versatile and have ample documentation.

CushyCMS

  • Cost – Free for basic account and $28/month for Pro account.
  • Usability – Very simple to use. Everything is up front and available to use. They have a “how-to get started” video on their homepage.
  • Permissions – You have the ability to add editors. You can’t differentiate what kind of permissions they have.
  • Versatility – Limited ability to add your own tools or customize the user interface.
  • Design – Clean and fun design. If you sign up for the Pro account you can customize the user interface.

Get Simple CMS

  • Cost – Free
  • Usability – Very simple. They have quite a bit of technical documentation for troubleshooting.
  • Permissions – No ability to create permissions.
  • Versatility – Somewhat limited. This CMS is devoted to people who need a lightweight system so they don’t offer too many frills.
  • Design – Designed with the user in mind. A simple design that is easy to customize.

Wordpress

  • Cost – Free
  • Usability – More complicated than the top three because there are so many tools. Typically you have to install Wordpress yourself, but BlueHost(my website hosting company) has a Wordpress tool that installs it instantly to your domain.
  • Permissions – You can add admin and editor permissions.
  • Versatility – Supports many plugins and widgets.
  • Design – Fully customizable. The default design is a simple and professional.

Drupal

  • Cost – Free
  • Usability – Installing Drupal is complex and not for people new to website hosting.
  • Permissions – You can add admin and editor permissions.
  • Versatility – Supports many different tools.
  • Design – Fully customizable. The default design is lacking, but it’s encouraged that you improve upon it.

Joomla

  • Cost – Free
  • Usability – Installing Joomla is complex and not for people new to website hosting.
  • Permissions – You can add admin and editor permissions.
  • Versatility – Supports many different tools.
  • Design – Fully customizable. The default design is also lacking, and begs to be improved upon.

After overwhelming you with all that information about the different content management systems, I can tell you there is a simpler way to get your website from your computer to the internet in a click of the mouse. Using a File Transfer Protocol (FTP) client is the way to do this. There are two major types of FTP, FTP and SFTP. SFTP is a secure version of FTP and encrypts your data as it is sent between your computer and the hosting servers. There are many clients out there that offer a great file transferring solution. Here are a few.

Software Price Operating System
FileZilla $0 XP, Vista, OSX, Linux
WinSCP $0 XP, Vista
FTP Commander $0 XP, Vista
Fetch $0 OSX

I don’t have any particular bias, but I do use FileZilla for my own website because it is cross platform so there is more user documentation regarding troubleshooting and tutorials.

I hope you enjoyed this lengthy installment of “The Webpage Setup”. Have a great day and get outside every once in awhile.

]]> http://www.provoastmedia.com/blog/?feed=rss2&p=58 3 Inspiration http://www.provoastmedia.com/blog/?p=37 http://www.provoastmedia.com/blog/?p=37#comments Fri, 05 Feb 2010 18:29:36 +0000 Sam.p http://www.provoastmedia.com/blog/?p=37 Påskeskyer no 4 by Einar Sira via Flickr

Many people get inspiration from different places. Some get it from nature, God, and some from human creation. I myself, get inspiration from all forms of beauty. It can be the way the clouds in today’s sky billow up, or from the way an experienced grandmother knits the dinosaur into her 20 year old grandson’s sweater. The very existence of life in this world is cause for inspiration, and the fact that these instances of life can create is mind blowing.

I find that if I’m confined to work in an office while trying to create something that inspires warm feelings inside people, I frequent the internet. This is my window to the outside, in a sea of gray. I frequent many website and the ones I visit most are listed below. Hopefully you’ll find them as inspiring as I do.

Flickr is a very good resource which gives me lots of inspiration and also keeps me up to date with what other designers or photographers are up to. Since Flickr is comprised of millions of people there are many different lifestyles represented online, which are neatly categorized into groups and tags, depending on the user preferences. A basic account is free, with the choice to upgrade to a pro account. A pro account is really only viable to someone who uploads pictures or videos constantly, and wants to track the amount of people who visit their page.

Another good resource for inspiration is a design and web development webzine named Smashing Magazine. I have only recently started reading Smashing Magazine and I find myself returning daily to the site to read their new articles, and many of their archived tutorial articles. As a matter of fact my Google homepage has a Smashing Magazine widget in it to keep me up to date with their articles, and I have my browser homepage set to Smashing Magazine.

When I get tired of looking for inspiration which only requires virtual action, I look toward two DIY sites which provide me with physical inspiration. The first is Design *Sponge, a design blog. I found it while searching for design trends. It doesn’t have too many up to date articles about design trends, but their articles about readers’ before and after DIY projects are truly inspiring and humbling. The next DIY site that I love to geek out with is a site about DIY projects, but geared mainly toward geeks and nerds who try to beat the system by making their own versions of products you might see at a store. The title of the site is Instructables. It’s not a blog, but is a massive DIY community where everyone posts directions, schematics, and instructions on how to construct a home power grid to help get you off the grid.

These are the few windows that I use to view the outside from my cubicle, and if you search the internet for what inspires you, I’m sure you’ll find a website devoted to it. This is the beauty of the internet and why I like it so much.

Happy surfing.

]]> http://www.provoastmedia.com/blog/?feed=rss2&p=37 0 The Webpage Setup: Source Code Editors http://www.provoastmedia.com/blog/?p=7 http://www.provoastmedia.com/blog/?p=7#comments Thu, 04 Feb 2010 19:04:21 +0000 Sam.p http://www.provoastmedia.com/blog/?p=7 Many people are scared when it comes to creating their own websites.  Many people have no fear at all and jump in guns blazing not caring where they get their tutorials or education, just as long as it looks good on the web.  I’m here to embolden timid and calm the gun slingers.  When you learn how to create content for the web you’ll want to know how to make it visually attractive to your audience.

It also needs to be, in a sense, visually attractive to your computer.  The base language that web pages are built upon is called Hypertext Markup Language (HTML).  HTML is a visually based language, meaning that once you execute it correctly, it can be viewed on your computer.

The basic tools you’ll need to create a web page include a computer.  That’s it.  Pretty much anything nowadays constitutes as a computer, I update my website from my iTouch every now and then.  The software you’ll need to create a webpage comes as a default on all computers.  If you don’t care to use the default software on your computer you can choose from many already on the internet.  I’ve taken the liberty to assume you want something better than what you already have.  I’ll list out the text editors below and what operating systems they support.

Windows

OSX

Linux

Cost
SubEthaEdit ✔ €29
Aptana Studio ✔ ✔ ✔ Free (Pro – $99)
Ultraedit ✔ ✔ Free trial (Full – $49.95)
Komodo Edit ✔ ✔ ✔ Free
Eclipse ✔ ✔ ✔ Free
TextMate ✔ €39
HTML-Kit ✔ Free
Scriptly ✔ Free
BBEdit ✔ $125
TextWrangler ✔ Free
Screem ✔ Free
CSSEdit ✔ $39.95
Arachnophilia ✔ ✔ ✔ Free

For a larger and more in depth view of text editors, go here.

Now that you have waded through all of the choices of HTML editors you can create a web page. Tune in next time when I’ll go through the software you’ll need to put a basic web page on the internet.

]]> http://www.provoastmedia.com/blog/?feed=rss2&p=7 0