Find Web Developers
Find Web Developers

The Web Development Process – Part 1

September 16th, 2018

One of the more misunderstood concepts, in regards to the web design industry, is that the actual process is much different than that of other client centric initiatives – like financial planning for instance. Yes, the details are different, but the methodologies involved are quite similar.

The precise details of the web design process might vary slightly from design agency to individual designers, but the fundamentals are generally the same:

1. Information Gathering
2. Planning
3. Design
4. Development
5. Testing
6. Launch
7. Maintenance

Setting the stage:
The most critical step in the web design process is creating an accurate project definition. The same way that a Painter starts with an initial sketch, or an Architect with his/her blueprints, a project definition is necessary if one is to envision the entire scope with any accuracy. As such, the client survey (Discovery Phase) is used to gather the information needed to get the project moving in the right direction.

1. Information gathering – Discovery phase

What is on the client’s mind? What are the needs that you are trying to uncover as the solutions provider? Regardless of your sector, a concise fact finding sheet will have many of the same elements – Purpose, Goals, Design direction etc. The idea here is to ask enough questions so that any grey areas will slowly vanish and the client will feel comfortable knowing that you listened to what both their vision and ROI needs are moving forward.

— Purpose
What is the purpose of the site? Do you want to provide information, promote a service or, sell a product? A clearly defined purpose will result in better ROI metrics later on!

— Goals
What do you hope to accomplish by building this web site? Two of the more common goals are either to make money or share information. Similar to purpose, but with a slightly more ‘outcome’ orientation built into the answer. Exp.: Purpose – provide information; Goal – more subscribers

— Target Audience
Is there a specific group of people that will help you reach your goals? It is helpful to picture the “ideal” person you want to visit your web site. Consider their age, sex or interests – this will later help determine the best design style for your site.

— Branding
How would you describe your brand? How do others perceive your brand? How would you NOT want your brand perceived? Once you’ve figured out the answers, the next step is to figure out how design will push the brand forward.

These are really only the top 4 questions, please look under “Discovery Phase” for a full list.

2. Planning

Site Structure

“Redesigning a website is like remodeling a kitchen – you need to figure out what features and capabilities you need and how you will use them before you design your layout i.e. where to place appliances and electric plugs; and select tiles, curtains and countertops.” —

Good web design requires solid site architecture based upon the goals, purpose and target audience established in the project brief. The deliverables from this phase are:

Content Outline breeds Site Maps and/or Wireframes

These three deliverables are dependent on each other and need to be completed sequentially.

Content Outline

Working closely with your clients, create a list of all existing content. Additionally, brainstorm new content that needs to be created for the site. Review your list, trimming anything that does not match the goals or audience needs as stated in the Discovery phase.

Take time to think about the future and how the site content might need to grow. Make sure you leave room for growth. Next group your content into categories. Once your categories are established, create an outline of your content and review it for accuracy.

There are two types of methods that can be used – depending upon the complexity of the desired website:

1. Site Map

For the purposes of planning a website, a visual site map can be very helpful. By drawing even a simple sketch of the sections you would like to have, you can be sure that you capture everything about your website that you need to be successful. When using a site map as a planning tool, you can be as simple or as complex as you need to be.

A sitemap is a list of pages of a web site accessible to the end users. It can be either a document in any form used as a planning tool for Web design, or a Web page that lists the pages on a Web site, typically organized in hierarchical fashion.

2. Wireframes

A wireframe is a non-graphical layout of a web page. It is a simple drawing of the chunks of information and functionality for each page in your site. You will want to create a wireframe for the home page, each unique second level page and any other significantly different page on the site.

Wireframes include the containers for all the major elements of the page. Elements include navigation, images, content, functional elements (like search) and footer. The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website.[Ex.] Wireframes help establish functionality, and the relationships between different screen templates of a website. Creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept.

3. Visual Design

Two interesting quotes to get us started:

“Structuring the site on paper before starting visual design is a critical step toward effective presentation of content to your intended audience.”

“Designers are not mind readers or magicians. Good design is dependent on good site structure and a solid project definition.”

Now it is time to let the designers be creative! Review the project brief, sitemap or wireframes with the designer(s), than give them free reign to brainstorm solutions and develop the different visual designs. The designer(s) should also review any branding guidelines as well as the technical requirements for screen resolution, browser compatibility, download time, web standards and accessibility.

At this point, the designer(s) has a clear idea of the purpose of the site, the content that will comprise the site, the site architecture and the elements that need to be on each page.

The target audience is one of the key factors taken into the design consideration. A site aimed at teenagers, for example, will look much different than one meant for a financial institution. As part of the design phase, it is also important to incorporate elements such as the company logo or colors to help strengthen the identity of your company on the web site.

Drawing on their knowledge of design principles (balance, rhythm, proportion and dominance), design elements (point, line, shape, color, typography) and user centered design (usability), they can develop design options that meet the project goals.

A sample of the visual design tasks:

— 1st draft of visual designs for home page and one sub-page
— Client provides feedback on designs
— 2nd draft of visual designs for home page and one sub-page
— Client selects design and provides feedback
— 3rd draft of visual design for home page and all unique sub-pages
— Client provides feedback on design
— Final visual designs for home page and all unique sub-pages
— Client approval of final design

In this phase, communication between the client and your designer is crucial to ensure that the final website will match their needs and taste. It is important to work closely with your designer, exchanging ideas, until you arrive at the final design for your web site. The most common terminology that describes this feedback system is Agile Methodolgy.

Joomla Web Development – Why It’s the Top CMS Choice

September 15th, 2018

Content management systems can help you build a website and then continue to manage the content on the site once it is built. WordPress has been a popular choice due to its’ ease of use. It is open source software (free to download and install on your server) for developing web sites just as Joomla, but lacks Joomla’s complex features. The complex features enable one to create more complex websites for any type of industry. WordPress is more suited for blogs and websites that simply publish readable information. Since Joomla doesn’t require programming knowledge to use, many beginners utilize it to develop websites. Most hosting companies offer a free installation of Joomla utilizing a script inside your hosting account. Joomla installs quickly and is fast and secure. Since Joomla has an abundance of complex features it is considered an advanced content management system and does have more of a learning curve than WordPress.

Joomla is utilized by novices as well as professional designers. It has been used to create and manage websites for social networking, major ivy league universities, financial institutions, eco-resources, magazines, cultural institutions and furniture design companies just to name a few. Many professional designers like its’ enormous range and ease of use. They especially find it resourceful when a web site is finished and it’s time to turn the reigns over for the firm to manage on their own. The CMS is user friendly for the client, making the web designers’ job of training the client much smoother.

The major advantage of Joomla is the software’s abundance of features. The features are called “extensions” and they are the vital building blocks which make Joomla user friendly software that is great for creating simple or complex websites. There are thousands of extensions covering almost any type of function your web site may readily need. Most of the extensions are free. However, if your company has a rare need that isn’t available in an extension, the Joomla framework allows a developer to build applications on the open platform.

Joomla can be downloaded in almost any language. It also has several translator extensions so anyone can view your web site in their own language. Your web site can have multi-lingual content. There are many language dictionaries that allow you to choose a default language, translate languages or learn languages.

There are template extensions that enable ease of design. The templates allow one to render a site quickly by following a pre-design. However the templates are flexible and therefore can be customized to create the design you desire.

If you’re not a developer and feel that the task of learning how to maneuver around Joomla in order to create your own website is a bit too daunting, then consider outsourcing. An expert Joomla developer can help whether you need a new website or simply want to improve the existing site. The technical aspects will be quickly grasped by the expert Joomla developer. Your site will be up and running faster and more apt to suit your business requirements because of their deeper understanding of the thousands of extensions available.

Web Development with SEO in Mind

September 13th, 2018

When a business owner decides to bring their business to the web, generally the last thing that they think about is search engine optimization. They assume that whomever they hire to do their web design will put up a site and then submit it to the search engines and the traffic will magically pour in. Unfortunately it takes more than that to drive search engine traffic to your site, and even more unfortunately most developers don’t program with SEO in mind, nor do they educate the client about the process involved in gaining traffic from search engines.

Whether it’s carelessness or a lack of knowledge, or a combination of the two, this often leads to a client that several months down the road doesn’t understand why their site doesn’t get any traffic and isn’t helping their business. A good designer will not only program with SEO in mind, but will also educate the client about the basic principles of SEO, whether they are the one who executes it or not.

Many times the clients I inherit have gone through this scenario and then face drastic on-site changes to get their site search engine friendly before we are even able to begin the arduous process of link building. Whether you are designing a site for yourself or for a client, following the simple steps below when programming will ultimately save the business time and money and result in a search engine friendly site that truly maximizes the online potential of the business.

Use proper tags for headings, bold text, italic text, and lists – HTML has heading tags, bold tags, italic tags, and ordered and unordered lists for a reason and you should use them. Using CSS you can practically style them however you like, but actually using a heading tag for your headings, and bold tags for important text, will help allow search engines understand what text on a page is a heading or what is more important than the surrounding text. Simply applying a CSS style that makes text larger or bold doesn’t do that.

Optimize your images – search engine spiders can’t read text within an image. Adding ALT text to your image tag helps, but ideally you should remove all wording from the image and style it using CSS, adding the remaining portion of the image as a background image to the text. Here is a side-by-side comparison [http://www.seo-playbook.com/image_example.php] of two images that look the same in your browser, but much different to a search engine spider.

Avoid canonical problems – believe it or not, search engines can see http://yoursite.com, http://www.yoursite.com, and http://www.yoursite.com/index.html as three different pages. A simple solution is to use a 301 redirect to point all of your pages to their “www” counterpart. You can also select the preferred domain that Google shows in the new Google Webmaster Tools console.

Get rid of Session IDs if you have a PHP site – have you ever seen a PHPSESSID variable added to the end a URL on a PHP page (it looks something like PHPSESSID=34908908)? This happens because PHP will add a unique PHPSESSID to URLs within your site if cookies aren’t available. This can be extremely problematic for your site’s search engine ranking. Google and Yahoo will see a unique PHPSESSID in the URL every time they visit a page on your site, and in turn think that said page is a different page each time. At worst, this could be viewed as duplicate content and get your site banned, and at best it will reduce the perceived value of each page. One solution that I’ve used successfully is to utilize url_rewriter.tags, which you can Google to find out more information about.

Put CSS and JavaScript in external files – nearly every site nowadays uses CSS and JavaScript for something. While both are great for enhancing user experience, neither will help your search engine ranking if left on your page. One of the factors that search engines consider when ranking your site is the percentage of code relevant to the search term. CSS and JavaScript can take up hundreds of lines of code, minimizing the importance of your text and in turn hurting your ranking. By putting them in separate files and simply including them in your page by reference, you can reduce hundreds of lines down to one and increase the amount of code in the file that is relevant content.

Minimize the use of tables in layouts – the debate about whether or not tables should be used in site design has been going on for years and there’s no end in site. I fall somewhere in the middle – there are certain circumstances (like organizing tabular data) where I think tables still make the most sense, but I also appreciate the SEO benefits of using CSS layouts. CSS layouts drastically reduce the amount of code in your site that isn’t content that the user sees. Just like moving CSS and JavaScript to an external file, the less on-page code that isn’t content, the better.

Validate your site – a site doesn’t have to be perfectly coded to rank high in the search engines (there are many, many other factors), but valid HTML will help ensure that search engines and browsers alike will accurately see your page. Try using the official W3C Validator on W3.org or install the handy HTML Validator Firefox Add-on. Validating generally identifies areas of code that are redundant, unnecessary, or not accepted across all browsers. All of which will help make your site more search engine friendly.