Chapter 3 Notes: Site Planning

Here, again, are some of the notes I took while reading Principles of Web Design by Joel Sklar. This post has not been proofread. It is here merely to be my reference if I need help in these topics later on.

Site Planning

As with all major projects, building a website begins with the design process. It may often begin with a brief sketch of you website layout. Make all the necessary edits as you see fit for designing your home page and subsequent sections and subsections. If this is a big team project, there will probably be many meetings to discuss this portion of the project. Draft a timeline for due dates and milestones. As the project evolves, you should not find yourself needing to plan nor edit your design as you build the site. All design experimentation should be at the beginning of the design process.

When sitting down to think about the design of a website, think of these requirements:

  • Purpose for the site – information dissemination, product promotion, social outlet, etc.
  • Target audience – students in school, women, men, sports fans, etc.
  • Specifications – logos, branding, accessibility, color scheme

Soon after organizing what you want on the website, begin creating design sketches and page mockups. Organize the page as you like in your sketches. After you have created multiple drafts and as your design becomes more stable, your mockup will become more refined and you will be able to lay out exactly what goes where. A more detailed sketch is often called a wireframe, which is often a complete sketch of what your usable site will look like.

Constructions and content development will take the most time and require the most technical skills. Testing for quality assurance and usability will also occur as necessary during the development stage. Usability testing ensures that the viewer sees what you think they will see and can navigate the site without too much trouble.

Next comes publishing and promoting your site through various media and then site maintenance. Maintenance is always required to keep fresh material on the site. New sections may be added to include more content.

Tracing back to what we discussed in the Chapter 2 notes, it is important to draft up sketch of your website, the home page and subsequent section pages. After that process and after coming up with a web design that you like and are happy with, the next part of the planning process is creating a site specification document. This site spec doc is a more detailed description of what your site entails and helps keep you in focus as you build the site. (Don’t lose sight of your site!)

A site spec doc should answer the following questions:

  • Who is the client for this site? This is not the user of your end-product but the person or organization who decided they need a website. What does the client hope to gain from this internet product? For this Web Design course, the client I am “working for” is the Berkeley Optometry. “We” are creating this website to disseminate information about our School and OD program.
  • What is your mission statement?
  • What are the requirements for the site, i.e., your list of wants? Be explicit in your required functions.
  • Are your requirements feasible? Do you have a team that can build what the client is looking for?
  • How do you know that you’ve built a successful website? What are some factors you can use to assess the effectiveness of the new site?
  • What is your target audience? How do you know? Where and how can you find out more about your audience?
  • What are the limiting technical factors affecting your site?
  • Do you have a budget? What are some milestones for the site? What is the schedule like?
  • Are you building a completely new site or making changes to an existing site? If it is an existing site, why are you making changes and what are some things you can learn from the first edition of the site?

About content building – again, always keep your user in mind. This is starting to sound like an adage in web-design-speak now, but it rings true. No one wants to build a website only to have it go kahoot when the user reaches your site and then leaves frustrated after 20 clicks to find the information they are looking for. Your team of designers and other stakeholders may be more concerned about the look and feel of the site, which is completely valid, but you as the site developer should pay more attention to your user analyses data. Let those testing results guide your decision on how to build content. The goal here is to create a website your target audience will enjoy using. Ensure the ease of access for content they are looking for and provide a good navigation system for them to discover new content!

File naming conventions – just to make a quick note about this. The ISO 9660 Standard is the base file-naming convention that works on all operating systems. The ISO 9660 has a maximum of eight letters followed by a period and a three-letter extension; allowed characters are letters, numbers, and underscore ( _ ) symbol. To ensure that all systems can open your files correctly, start the habit of naming your files using all lowercase. While there is no case sensitivity between Macs and PCs, the UNIX server IS case sensitive. <picture.gif> and <Picture.gif> are two different files for UNIX.

URLS

URL stands for Uniform Resource Locator. There are two kinds of URLs – complete and partial. A complete URL contains the exact location of the file page. Here is a breakdown of a complete URL: <a href=”http://http://www.yoursite.com/business/trends/laptop.htm”>

http = protocol

http://www.yoursite.com = domain

business/trends = path

laptop.htm = file

Partial URLs are links to files that reside in your own computer or server. These omit the protocol and domain or server name, and specify a path to the file that is in the current server. Here is an example: <a href=”laptop.htm”>link text</a>

Now here comes a point in the textbook that I don’t quite get and would like some clarification. In the section about setting your directory structure, there is a little bit more about partial URLs. Now, remember that your files need to be transferrable from your own computer to the server that hosts your site. Any URLs that you link in your pages that lead to another page on your website must include paths that are transferrable. Sklar writes, “You should never specify an absolute path in your partial URLs” (Sklar 126). By definition, a partial URL will not go far enough to reach the root directory, does it? Or is Sklar referring to the fact that you just omit the domain in the partial URL but might still need to write out the full path to the file. So, instead of writing /business/trends/laptop.htm, we should write /trends/laptop.htm. Am I getting this right?

After you have down your main content outline, you can start sketching out your folder structure (or a site flowchart, as I like to think of it). This structure will help you organize your site in a way that makes sense to both you and your user. There are two common types of structures – single and hierarchical. A simple site (like a personal site or a mom-and-pop shop site) can easily have a single folder structure. All the files needed for the main page are contained in one folder. However, if your site is a little bit more complicated (for example, with sectional tabs and interactive media), it is a good idea to organize your files in a hierarchical way. You will have one main folder and many sub-folders (and sub-sub-folders).

A quick note to self about creating hyperlinks between your pages (I will probably read about this later in subsequent chapters): <a href=”../index.htm”>Home Page</a> will lead you up one folder to your home directory. <img src=”../images/logo.gif”> is an example of going up one level and then down again to find a logo for your current page.

Chapter 2 Notes: Web Design Principles

Nowadays, designing websites are more than just designing for the browser. You have to consider the design in mobile devices as well – smartphones and tablets. The buzzword is portability. Your site must be portable in a variety of monitor screens so that your design remains just as you want it to be. Test in various browsers, different operating systems, and device platforms. Think about monitor sizes/resolution and how this may affect the viewer’s experience with your website. Also of crucial interest is to test out your new site at various broadband speeds. It is easy to leave a visitor behind (or, rather, the visitor leaving your site) when your site takes forever to load because of slow connection speeds. When testing your pages, be wary of caches in your computer’s browser. Your computer will often reload a webpage based from information it stored in memory rather than download new information from the pages’ server because this is quicker to load. When testing a site, however, the cache can work against you, not showing the changes you’ve made because it is relying on old images/files from the cache.

Consider these two layout designs: fixed-width and flexible. The fixed-width design allows greater control for the designer to set how the page is to look. This kind of design works best for complex layouts that are heavier on media (images and video) rather than text. The flexible design will favor the viewer more. Based on the viewer’s device, the page is flexible to allow “stretching”, filling out the screen with flexible white space fillers. When viewing the site on a smaller screen, there will be less horizontal scrolling – always a plus in my book! This kind of layout is best suited for text-heavy and simpler layouts.

Design with the user in mind,” is a phrase I’ve seen a few times on various prints about web design and. To put this another way, BE the user and think of how you would actually use the site. The attitude should NOT be, “First the user will do this, and then they will do this. After clicking here, they will then read this.” A user is often less predictable than that. As a frequent web surfer, I know that I am constantly distracted by headlines, words in bold and larger fonts, and images. Once distracted, I will likely click on a link about the topic or image that first caught my attention. Once on the new page, I will get distracted by something else. Point is – users are often unpredictable and you cannot design your website with purely logical principles. There will (or should) be elements in your website that are catchy objects or text.

That said, though, there is SOME amount of predictability. Web users generally view a page in a few ways: a paper-based reading pattern, a landscape-based U, and an F-shaped pattern. A paper-based reading pattern is the pattern that forms when the web user treats the webpage like a book or newspaper. This is the most thorough kind of reading; the user reads left to right and then scan back to the beginning of the left side again. In the landscape-based U pattern, the reader starts scanning from the top left section, reads to the right, scans the rightmost items on the middle of the page, and then semi-loops back to the bottom leftmost section. (Think of this as a sideways letter U, with the opening to the left.) Finally, in the F-shaped pattern, users start at the top leftmost section, reads to the right, skips down a line or two to scan the second bit of the page, and then starts at the top leftmost section again and reads vertically downwards.

When designing your website, creativity is good when it is meshed in with some amount of convention particularly when it comes to navigation. A website with a good design will keep in mind that users come into a new site with certain expectations. We expect to find your company logo or blog branding somewhere on the top of the page, many times in the left corner at the top. We expect to be able to navigate through pages with a navigation panel of some sort. We generally find these on the left column, right column, or top of the page. If your site is a shopping site where users of your site also serves as consumers of your products, we would expect there to be a shopping cart icon or link to get to items we have toggled as interested in buying. We would first turn to look for this shopping cart on the top rightmost corner. If it isn’t there, we will be confused and frustrated if it remains nowhere to be found.

These expectations are just guidelines, of course. You can stay within the boundary of these guidelines or step out of them if you’d like. Just know that with these user tendencies, it is easy to point out which areas bolded text will work better than plain underlining to catch attention or which areas are best to insert some white space.

 

Citation:

Sklar, Joel. Principles of Web Design, Fifth Edition. Boston: Course Technology, Cengage Learning, 2012. Print.

Beginning with HTML

My experience with coding is quite limited. I took one computer science course and was required to learn Scheme, an obsolete programming language (in the family of Lisp) but apparently not completely wiped out from academia. According to Wikipedia, the Scheme Steering Committee once called Scheme “the world’s most unportable programming language” (see Scheme: Programming Language). Later in one of my cognitive science courses, I learned some coding in MatLab, a language that is math-based and used pretty much only in the research world for numerical computing. Needless to say, I now remember nearly zip of the two programming languages.

Picking up this third language, I am finding HTML to be a pretty straight-forward. It is easy to grasp so far. Here are some notes from the first chapter of Principles of Web Design by Joel Sklar (5th edition):

The newest rendition of HTML is now HTML5 (moving on from HTML 4.01). There are new elements in this version and new conventions of naming the sections of a web page. For example, <header> versus <div id=”header”>. In a nutshell, the elements are simplified in a neat and intuitive manner. The use of Cascading Style Sheets (CSS) is also a new method of efficient coding. Now you can do style enhancements and control these elements at one chunk of the code rather than go through your whole website HTML code to look for where the elements are applicable. 

A big rule in programming – create syntactically correct code! Code should be easy-to-read and easy-to-reuse by fellow programmers.

  • Documents must be well-formed
  • All tags must be properly nested and closed with the correct order
  • Use lowercase for element names
  • Empty elements are marked with a closing slash (even for those elements that do not require a closing, like <br>
  • Attribute values must be contained in quotation marks

Web Design – Where will this take me?

I recently enrolled in an online web design course offered through UC Berkeley Extension. I’ve had the urge to learn some web designing for a while (and this goes along with my interest in learning about user experience on the web), so I’m glad to be finally taking a first step in this direction.

I hope to put some of my notes on this WordPress blog, not only for my own benefit of active learning, but to also spread some of my notes to others who are on the same page as me.

The recommended textbook to use in my HTML/CSS class.

Principles of Web Design by Joel Sklar