Weebly Link

rickettsglen.weebly.com

Final Blog

HTML Editor

I started my HTML website by first downloading an HTML editor for my MAC called Taco HTML Editor.  It's fairly inexpensive at $24.99 for the full version, but I settled for the 30 day trial to get this project completed.  The only feature that I really liked in this html editor versus free editors such as text wrangler is the Live Preview feature that allows you to see changes live in a split window configuration.  Taco html editor also has some advanced java script components such as image slider and form builder that I tried to incorporate into the website but had trouble displaying it properly due to the constraints of the template that I chose.

Template

I downloaded a free template called "green jelly" from a website called templatemo.com.  The thing that I really liked about this template is the java script image viewer that rotates through images automatically.  I wanted the images from Ricketts Glen to be the focal point of my website.  The image viewer not only gave my website a nice visual appeal but also makes the site look modern and dynamic when compared to the templates that are available in web expressions.

The Work

After completing the storyboard and figuring out the layout of the website I began to modify the template to match storyboard that I came up with.  The template was fairly straightforward to edit and I did all of the work editing the template in code view since the tace html editor does not have a wysiwyg option.  I started with the image viewer and edited the five images that I used in the image slider.  The pictures that I used were taken in 2011 on a hiking trip with my wife to Ricketts Glen.  I started the website by resizing and then enhancing the color and contrast of the pictures.  Getting the images to appear in the slide show was very easy by editing the html code in index.html and referencing the new pictures.  I did not have to edit any java script files in order to make this work just the .html files that were included in the template.  After setting up the home page with all the images and menus I copied the home page and renamed it for the other five pages of the website.  Copying and then editing the content of each file in the html editor gave me a consistant navigation and website structure.  While building the website, I saw a need to make a few changes to the storyboard and did not follow it one hundred percent.  One of the things I changed was related to the content of the website and how many pages I was going to have.  I reduced the website to five pages to make it more manageable and to give it more logical structure.  Instead of maps menu I used a directions page and included the individual campground and state park maps on their own respective web pages.

What I learned about using this template is that the best way to edit the template is to use the <!-- --> html tag to take out the things that you don't want before actually deleting them from the template.  This is a quick and easy way to make changes to a template without actually deleting any content.

Another thing that I liked about this template was how easy it was to have drop down menus.  Using built in java script it was easy to setup an activities menu with drop down options for hiking, camping and Lake Jean activities.  This not only gave the website a clean but also a more modern sophisticated look. After setting up the home page with all the menu items I ended up copying the index.html, renaming and then editing the file to make the rest of the site pages.  The whole process was easy but very time consuming especially when I decided to make a change to the layout that affected the whole website.  I had to edit each page individually using the code editor to remove some of the footer information that I decided was no longer needed.  Besides being time consuming using the template was straightforward and it was easy to get the look that I wanted.

Weebly - rickettsglen.weebly.com

I initially was going to do the web 2.0 site using Wix but when I experienced issues with the registration process I moved on and used weebly.com to build my site.  I started by finding a template that looked similar to the html template that I used.  Weebly has a very clean and easy to navigate portal and it took about 1/4 of the time to build the whole site when compared to doing it in the html editor. It was extremely easy to copy and then edit the pages in weebly which kept the navigation and look consistent throughout the website.  I was also able to use the same two column layout for the page content as I did in my html site.  It doesn't get much easier than dragging and dropping elements onto a page and then pasting the content.

The Contrast

The main differences that I found between using html editor and weebly portal was how much control you had over the design.  While weebly gives you access to almost all parts of the website such as css and source html, it does not allow you to edit some of the components such as the google maps component and the image slider. Not being able to edit the size of the image viewer/slider I had to much white space at the top between the image slider and the header.  I searched google for a solution but was not able to come up with one, and instead found that indeed it is a limitation that weebly has in place.  So while it was quick and easy to build the site in weebly, I found that I didn't have total control over everything and had to live with some of the limitation that weebly has in place.

One such example was not having the ability to create a drop-down menu in weebly and instead I had to create an individual link in the menu bar for each page.  This prevented me from logically grouping menu items together.  While this isn't a big deal with a small site like mine but it would become an issue when building a more complex site.  The other issue that annoyed me with weebly is that some of the more advanced features such as a search option are not available to a free user.  I can't blame them for trying to force people to pay up but c'mon we're talking about a search option....frustrating and disappointing.

Overall I thought Weebly was very easy and intuitive and would be great for someone who is looking to build a basic website with no previous experience.  For me it comes down to control versus time.  I can spend the time and build something from scratch or use open source CMS software such as joomla or wordpress or use weebly but also give up some control and access by not having full access to all the files that make the website work.

Conclusion

Because I've built website in the past and had previous html and css experience, most of the items covered in class were an excellent review.  The two very important things that I learned in this class are the concepts behind good web design and also how to use photoshop elements software to edit images for the web.  Because of this class  I have gotten much more comfortable and proficient with editing images for the web, and will be able to use this knowledge in the future as I take on new website projects.

It's been fun!!!!!

Home Stretch

Tips and Tricks

Chapter 13 describes a few neat techniques that make a web designer's life easier.  One of these techniques is the use of tables to align graphics and text on a webpage.  With tables you have complete control over your layout and have the flexibility to change cell properties including color, border, padding etc.  Tables also give you the ability to reassemble sliced graphics giving you even more flexibility in layout design. 

Another technique that I found interesting is locking the transparency of a layer to be able to change the colors of the pixels on a layer without affecting the transparent background around the image.

Testing the Site

This is a crucial step in web design and one that cannot be overlooked.  There are a number of tools available that help with testing and site management.  Most html editors have the ability to find and update broken links, missing graphics and other website issues.  These tools are critical in making your life easier when managing large scale websites.  Testing your site using the major browsers such as chrome, internet explorer, safari and Firefox is also a critical step that should not be overlooked.  And lastly, you should always check your site on a mobile device to make sure it’s accessible, legible and usable.

Picking a webhost for your website and uploading the content is the last step required to get your site on the web.  There's a large number hosting options available that are inexpensive and easy to use.  Some of my favorite webhosts are 1and1.com and hostmonster.com.  They have packages available that start at less than $5 per month for unlimited space and bandwidth.  The domain name typically costs less than $10 a year and most hosts will include one free domain name with your hosting package.  When choosing a webhost stick to the ones that have been in the business for a few years and check online reviews to help make your decision.  Uploading your site can easily be done using ftp or the control panel that is provided by your webhost.

Why bother with storyboards?

Storyboards facilitate creative thinking and allow you to visually plan out your website layout and content without worrying about the technical aspects of web design.  Storyboards are an effective way to figure out the content of your website, how the information will be laid out and presented.  Using a storyboard is a critical step in web design and helps you achieve consistent and an effective website that achieves its objectives.  I personally have always skipped this step but after using it for this website I can see why it’s so critical and how much planning ahead with the storyboard helps stay organized and promotes creativity and efficiency.

Accessibility and Usability go hand in hand to make sure your site is available to any web user even the ones with a disability or someone using a mobile device or a slow internet connection.  When a website has good accessibility, its users can access all services and content all the time.   Usability goes even further to make sure that not only is your website accessible but the site is efficient, intuitive and simple to use.  The difference between these two terms can be summed up as a site with good usability is “web-user-friendly” while a site with good accessibility is “all web-users-friendly”.

I will be using Wix to design my web 2.0 site.  It appears to have all the features that I need including great templates and rich multimedia options using html5 technology.

Web of Thoughts

It’s fantastic that nearly everyone who has access to the internet has the ability to create a website.   With so many free tools available it doesn’t take someone with a computer science degree to have a web presence.  The Internet gives us the means to collaborate and share information across the globe quickly and efficiently.  While this can be a positive when used for the right reasons, it can also be a tool that can spread hate, violence and false information.  

Take the recent example of a hacked AP twitter account and the hacker’s posting false information that the White House has been attacked.  Our stock market responded by plunging on the news before recovering after learning that this was false information.   It’s all about the content, and because of how easy it is to post information online web users need to do their diligence before accepting the information they read on the internet as the truth.

If you build it they will come?

It’s usually not that easy.  While creating a simple website is not a difficult thing to do with all the available tools online, it does take time, knowledge and most importantly good content to drive users to your website.  Some of the benefits of building a website yourself is you have all the control and you can drive the vision for your website.  When building it yourself you will develop enough skills to not be afraid to update your website quickly and often.  Cost is also an obvious reason to build it yourself.  If it’s a simple website, it can be built quickly and on the cheap.  There are a large number of free content management systems available online that make building even complex websites very easy.  Two of the most popular CMS packages today are Wordpress and Joomla.  Both are open source with many features and have a huge developer community behind them.

The main reasons to hire a professional are determined by the complexity of your website, your lack of expertise, and how much time and patience you have.  Most web developers at a minimum will charge a few thousand dollars for a simple website and updates will also be an extra fee.  Hire a professional if you have an aggressive timeline, a complex website, have no desire to learn new or existing web technologies or have no clue about web security or search engine optimization techniques.

Usability and Accessibility

Both are extremely important when designing a website.  Usability refers to how easy it is to find information on your website.  It’s all about the web interface you built and how effective and engaging your design is to the user.  Usability includes the concepts of Readability and Legibility.  If large amount of text on your website is easy to read then you have good Readability.  If your navigation is simple and straightforward and short text is easy to read then you have excellent Legibility. 

Accessibility refers to how well your website presents itself to people with disabilities and does it follow (WCAG) Web Content Accessibility Guidelines.  When designing it’s important to keep in mind that your website will be accessed by people with physical disabilities such as vision impairment.  Your website will also be accessed on many different devices with different screen sizes.  When using a lot of multimedia content the web designer has to be sure to include text equivalent of the images to make it accessible.  There are many tools online that can help you evaluate the accessibility factor of your website.  One such example is a free website called wave.webaim.org that can evaluate your website and provide suggestions to make your website more accessible.

Ugly Rat

Which is a better designed webpage?  A or B?

A:

or

B:

It's a no brainer. A is Ratz ugly and has many visual interface problems and B resolves those issues quite nicely.  Exhibit B is very nicely organized and puts you visually at ease, all the important links and information is right in front of you in a nicely laid out interface with excellent use of colors, alignment and contrast.

Exhibit A: Problems

• Interface is cluttered doesn't seem to fit on the page and has ugly navigation links.
• Bottom left of the webpage there's a missing image or path is incorrect.
• Alignment needs work.  Centering just doesn't work well in this case.
• Ratz ball image next to a rectangular navigation button just don't go well together.
• Font is to big on navigation button and competes for attention with the header.

Exhibit B: Solution

• Neat Interface and well organized, very nice use of graphics.
• Logo is well proportioned to the rest of the page.
• All important links fit on the page without having to scroll.
• Navigation links nicely laid out on the left hand side of the page.
• Very nice contrast and use of colors.
• Excellent alignment of text and navigation links.

Simple is Beautiful

There's one common theme that I find in all visually stunning websites and that is simplicity.  When a designer puts all his effort and focus into functionality and usability of a site, the end product is usually simple and effective.  When I started looking for an example of a visually appealing and effective website I stumbled upon these two fantastic examples of a simplistic yet visually stunning design.

http://dcurt.is/ and https://squareup.com/

I used the following criteria to analyze these two websites.

• Navigation and how well it presents the content
• Visual appeal, use of graphics, contrast and alignment
• Effectiveness of interface to fulfill purpose of the site.
• Use of multimedia or graphics
• How lean is the website
• How does it look on a mobile device
• Typography

The first website that I evaluated was dcurt.is.  

Dcurt.is is a blog using Svbtle as the backend software that was created by Dustin Curtis.  What first struck me about this site is how clean, minimalistic and yet effective the design was.  After all it is a blog, and a blog has one purpose and that is for people to read it.  There's no unnecessary links or graphics on the page distracting you from the content.  I like how Dustin used the frame option to freeze the links on the left while letting you scroll down the page as you read the blog.  It's an effective way to keep the reader from getting distracted from the content.  

There's nice use of graphics, the logo is repeated throughout the webpage in different elements.  The red color is also repeated throughout the blog entries adding to the visual appeal.  Left alignment is excellent with a dashed line separating blog entries.  None of the graphics are over 50Kb so the site loads quickly with no delays (chrome has a nice feature built in called Inspect Element that shows you all the parts of the website including graphics that are used and their sizes).  The font that is used on this site has excellent readability making it easy to read long lines of text.  The mobile version of the site is just as easy to read as the desktop version removing the left side links and moving them to the top leaving just the content to read.  Simplicity at its best.

Squareup.com is a website that also has a very simple layout but uses a lot more multimedia elements and graphics to drive its purpose.  

The purpose of the website is to show how easy it is to process credit card payments with the square up iphone adapter.  The high quality background image is visually striking  and effectively presents the product and message.  There's no clutter in this design with only four links on top of the page and the rest being in the footer.  Use of alignment is excellent with the form being in the middle of the page and left aligned.  This site also uses java script to allow you to view the interactive forms and graphic for each product.  The only issue I see with the product is the lack of contrast with the links at the bottom of the page.  Squareup uses high quality graphics so they're larger in size but are still below 500Kb so the site loads fairly quickly. Just as dcurt.is website squareup.com also has a mobile version of the website that is designed for the smaller screen.  While both of these sites are completely different in their purpose and design, they both very effective by being simple.

I'm enjoying learning all the concepts that go into designing a great looking website.  Understanding the basic concepts of great design has given me the know how to evaluate a website and determine the site's effectiveness.  I find myself being a lot more critical of some of the websites that I've designed in the past and have the urge to redesign some of them.  The most important thing that I learned about web design, is that all great websites have something in common, they have great content and were designed around a specific purpose.  Take craigslist for example, it's one of the most bland looking websites out there but is very popular and has been around for years.  When I will be designing my website for class, I will need to keep the interface simple and well organized with rich content if I expect it to be effective.