10 Things New Web Developers Need to Know Now

If the content that you are delivering can be broken into a checklist, it will often go smoother. People like the checklist format because it’s easy to digest and to take action when the content is itemized in this way. Here is a checklist for web developers looking to build a site for a client.

1. Know the Technology

fig-1Before starting, you’re going to need to know what server technology you need to use. HTML is the simplest and takes much less server resources to serve out to the browsers. However, if the client wants a method of tracking what items they have may checked off, such as a shopping cart, then it’s easier if you use some form of server technology, such as PHP, ASP, APS.NET or Cold Fusion. Once the server-side script type language is determined based on your client needs, it will dictate the server technology. For example, if your client is a government agency, you should stay away from PHP. Since PHP is open source, it is not recommended for government use since they prefer to avoid products where developers have open access to the source code.

Can you imagine how much work would be involved if you started developing in HTML and all of a sudden, you needed to start using session variables to track specific things from the visitors along the way? It is best to make the right server choice up front and have your client signoff on that technology.

2. Is it going to be RWD or Mobile Friendly

fig-2When planning a Responsive Web Design (RWD), developers often think of the phrase “Mobile First”. This is because it it is necessary to think about the mobile design before designing the rest of the tablet or desktop site. Knowing if it is RWD or mobile friendly will greatly impact your site.

A RWD site will reconfigure its layout and the content based on the screen device that the page is being viewed on. On the other hand, a mobile friendly site will not necessarily reconfigure or hide parts of its layout, but it will look good on a mobile device. A mobile friendly site usually has its tag widths set in percentages as opposed to pixels. The layout of the page is the same on the desktop, tablet and mobile devices. All of the same content is there, but it may mean more scrolling when viewing it on a smart phone.

3. Create a Schedule

fig-3Although this is point number 3, it is probably the most important. You need to create a development schedule. You can create the schedule in tools like Word, Excel or in a specialized application like MS Project. Once you have a vision of the end product which is the website, you can start to plan when each part will be done and who will do the work.

4. SEO Planning

fig-4Another important item to consider is how people are going to find your website. Google is the most widely used search engine, although there are others out there. Each search engine has a unique (although similar) algorithm for ranking. The higher your site ranks, the more people will visit it. Although Google doesn’t share exactly how they rank pages, their documentation is very helpful in pointing developers in the right direction. A few things include having a mobile version (RWD or mobile site), a title on each page and ALT text for images, keywords and links. You can find the documentation here http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf

5. Consider your audience

fig-5Do the client’s objectives of the site meet the audience’s needs? You’d be surprised at the number of times the client thinks they know what their customers want – but it’s not always a complete picture. It’s important to think of who is going to be using the site and why they are going to the site. Make sure that the content is easy to find from the audience’s perspective. The site structure should be as intuitive as possible. A good practice is to develop a flowchart of the structure of the site to ensure that the audience intuitively looks under the correct menu item to find what they’re looking for. If they can’t find what their looking for quickly and easily, they’ll check out a different website.

6. Optimizing content

fig-6Based on the requirements from a development standpoint, how can the site be best optimized? For example, if a photo gallery of images is required, it is imperative to have the images sized appropriately so that they load quickly. There is nothing worse than waiting for images to appear. It may be a good idea to have smaller images (smaller file size) to load on mobile devices that use either cellular data or a weak WIFI connection. When using JPG images, you can adjust the compression to reduce the file size. The balancing act comes when you want small file sizes and good quality images.

When adding inline images, make sure that the width and height are set for every image, with no exceptions. If the dimensions are missing, the browser will stop loading content below the image until it knows how much space to leave for the image.

7. Could display differently in different browsers

fig-7As you’re developing your website, it’s a good idea to frequently take a look at what it looks like in the various browsers. A few of the top browsers to consider are: Internet Explorer, Google Chrome, Mozilla Firefox and Opera. Many of the CSS rules for styling will display similarly. However, in some cases, you may have to write specific rules targeting specific browsers. For example, if you want to have a white background in Chrome your CSS rule may look like this: background-colour: #FFF; or like this background-colour: #FFFFFF; both would work fine. Older versions of Internet Explorer are pickier and prefer to have the six-character version of the hexadecimal color, rather than three.

At the start of the project, it is recommended that you discuss the baseline browser technology. For example, a large government or military organization, who lock their machines down, will focus on having Internet Explorer. If the site is more open to the public, then determine the appropriate browsers and their versions to target.

8. Where’s the content coming from

fig-8As a web developer, you will likely be provided with the website’s written content as well as photos or graphics. Written content on the web is read very differently than written content for print or other media. It is usually not a good idea to take the written content intended for print and copy and paste it onto a webpage. When we read on the web, we like to consume the content very quickly and effortlessly without straining to read a big block of copy. The paragraphs should be short, use unordered or ordered lists, where appropriate, and include rich imagery. Imagery is very important. Professional photography or graphic designed artwork is worth the price. It can be the difference between a good and great website. The way the images and text is arranged is important for the overall layout and ease of use for the person visiting the site. It’s important to have consistent layout and quality standards for images.

9. Accessibility

fig-9Website accessibility is sometimes overlooked, but it is very important. It is best to spend the time upfront to plan and incorporate the accessibility parameters to ensure that everyone has equal access to the content. Trying to add this later, could be more time consuming and costly and cause you to risk missing some parameters. If someone is hearing impaired, any video or audio on the website should be accompanied by a written transcript. For anyone with vision issues, make sure that images have “ALT” (alternate) text. It is also important to ensure that the images have a small description so that screen readers can aid the user.

10. Your client will change their minds

fig-10This isn’t a case of “if” your client will want changes but “when” they will want changes. Keeping this in mind, you need to plan your development to minimize the effort it will take to make future changes. Having well-structured CSS pages is a good way to start. You can also look at creating web pages from a template that you’ve created. By making changes to the template, you’ll be able to update the entire site. If you are using a server-side script (PHP, ASP, etc.), it’s possible to have separate files for different parts that are assembled by the browser. For example, you could have pages for:

  • Header
  • Navigation
  • Footer

These files would be included within each page. Therefore, if you make a change to the footer file, the entire site will change when the footer file is included.

Considering these 10 points now can save you time, money and frustration down the road. Before you begin your next web project, remember these points! Happy developing.

Leave a Reply

Your email address will not be published. Required fields are marked *