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.

Poll Gadget

Polls are a big business today.  Corporations and Politicians alike spend big money to get your opinion on the questions they care about. Companies like Gallup exist for this purpose and utilize various methods to get inside your head.

Setting up the poll gadget was my chance to gather data for a question that I found interesting and relevant to the field that I work in today.  I wanted to know how each student accesses the Internet at home. While I suspected that cable would win out, I was surprised to see that one person is actually using satellite to access the Internet.  I'm curious how well it works and what else the user has to say about the service.  Because I work for a Telecommunications company, I was hoping to see more votes for DSL but I'm not at all surprised that most people are using cable to access the Internet.

Setting up the poll gadget was very user friendly and took seconds to do.  While most polls were clean and easy to read, I did notice that some polls had readability issues.  I really dislike scroll bars inside a webpage.

While voting on the other polls, it was interesting to see the variety of topics that other students care about and what poll options were used.  The one I found most interesting is the question about USPS and how long before it gets shut down.  I found it very interesting that Jen only posted three options; 1 year, 2 years and 5 years.  With these three options, it appears that the closure of USPS services is inevitable. What if I believe that USPS will be here for another 50 years? 

How To Make Your Picture Web Ready.

So you've made yourself proud by taking a beautiful picture of the Niagara Falls with your brand new digital SLR and you're itching to share it with the world.  But before you do that, there's a couple of things you need to do to make the picture is "web" ready.  Pictures taken with digital SLR cameras, especially in RAW format, produce extremely large file sizes and need to be processed for the web.  Using your favorite photo editor like Photoshop Elements, you can make adjustments to your already awesome picture that will totally make you look like a pro.

1. CROP It.  If you want to get rid of those pesky tourists on the side of your picture cropping is the way to go.  Cropping the picture not only removes the ugly tourist from the picture but it's also a way to reduce the size of the picture.

1. Open the picture in Photoshop Elements
2. Click on the crop symbol. 
3. Drag to select the area that you want to keep in your picture.
4. After selecting the area you want to keep, click the green check mark. 
5. Voila the tourist is finally gone.

2. SHRINK It.  Even with the tourist out of the picture it's likely that the file size is still too big for the web.  Internet connections can be slow and file storage limited, so file size on the web does matter. To resize your image follow the steps below.

1. Click on Image in the menu bar
2. Select Resize - Image Size
3. Use either percent or pixels to select the new size.
4. Click OK.
5. Voila... you got shrinkage... and that's a good thing.

3. ADJUST It. The RESOLUTION that is.  The standard resolution for web images today is 72PPI or pixels per inch so that's the most pixels that your monitor will likely be able to display.  Here's how you change the image resolution.

1. Click on Image in the menu bar
2. Select Resize - Image Size
3. Type 72 in Resolution field
4. Click OK
5. Voila... you got more file size shrinkage and you're being efficient with your pixels.

4. SAVE It.  After all of your hard work you're ready to take a break and maybe enjoy a beverage but before you step away from your pc and lose all of your data, you need to SAVE IT.  Always save your hard work as .psd file so that you'll be able to go back and open the image in photoshop format to see the different layers and adjustments that you've made so far.

1. Click File Save As
2. Name the file and choose Photoshop for the format.

5.  EXPORT It.  You thought you were done but you forgot a crucial step in making your picture web ready.  The web browsers don't know how to render your .PSD file so you need to export your picture in a format that browsers do recognize, like .JPEG, PNG, and GIF.  JPEG is my favorite because it gives you the best bang for your buck when it comes to maintaining the quality of the image while keeping the file size very small.  If you need transparency then GIF or PNG will need to be used.

1. Click File.. Save For Web
2. Choose JPEG, GIF or PNG 
3. Select the quality needed
4. Click OK
5. Name the File and click save.

There's other things that can be done in Photoshop to enhance your photo like special effects, borders, color enhancements etc.. but they're not always necessary when optimizing your picture for the web.

Readability vs Legibility

Readability and Legibility are similar concepts with a few differences that I will cover in this blog.

What is Readability?  Readability is a simple concept.  Make it easy for the user to read the text on your webpage and you've got readability.  To accomplish this you need to follow some general guidelines.  

• Use sans serif typeface for areas where you have lots of text.  
• Use the correct font size, in most cases 12 point size works best.
• Avoid really long lines of text when possible. 
• Avoid using large amounts of bold, italic, all caps, small caps etc. 
• Use good contrast.  This one is very important because it affects both readability and legibility.  

When I was looking through all the class blogs, I found this poll that has both readability and legibility issues and is a good example of what to avoid. Sorry Beth for picking on you.  The dark font on the dark background is a problem and needs to be changed to white. The scroll bar is also annoying and requires a user to take action in order to see all of the content.

What is Legibility?  Legibility is also a simple concept and differs from Readability because it applies to short bursts of text like lists, signs, buttons, page header etc. To make sure you have excellent Readability follow these guidelines.

• Use sans serif typeface.
• Avoid using all caps because it can hinder the user from quickly recognizing the word by altering its shape.
• Use different Photoshop techniques like anti-aliasing to make small font stand out.
• Be aware of contrast issues.

When designing a website it's crucial to make sure you understand the basics of typography and adhere to best practices that help ensure the website viewer can easily read your content.  Typography can be a challenge because there's many variables that can affect it.  While challenging, it's not impossible to make a beautiful website that looks great and is easy to read.  One of the best ways to control how your website looks is to use CSS (cascading style sheets).  Using CSS you can easily and quickly change the look of your whole site.  CSS also allows you to use very large font on your website.  When working with CSS one has to remember that not all browsers interpret css files the same way so thorough testing is required.  I plan to use CSS when I design my website project in order to have more control and flexibility in the design.

What have I learned so far????

Web design is not new to me but I have to admit that I absolutely have no artistic creativity and tend to stick to the more technical side of web design.  I've designed a few websites in the past but none from scratch, and have always used a template to get started.  I just don't have the visual talent to create something from nothing.  What I learned so far about graphic design is that it's not that complicated as long as you stick to the concept of C.R.A.P.  CRAP stand for contrast, repetition, alignment and proximity.  These four elements of graphic design ensure that a graphic or a web page is visually stimulating and effective.

Graphic design is absolutely everywhere in our lives today and it's something we encounter every day.  You encounter graphic design daily; in magazines, newspapers, websites, mobile device and even while driving on the billboards on the side of the highway.  There's no escaping from graphic design and the influence it has on us.  We are visual, and the best way to get a message across is to visually present your idea or product and if done correctly using the principles of CRAP, it will be effective.  Graphic design on the web has also become extremely influential and essential for businesses, politicians and anyone else trying to reach a wide audience.  The ability to reach millions of viewers across the world without spending a fortune has influenced many aspects of our connected society.

Web vs Print
When designing for the web, there's a few things that one has to keep in mind in order to be effective.  First of all you have to remember the basic design principles of CRAP.  The web presents a few challenges for web designers because of the many different ways that the Internet is accessed.  When designing for the web, you have to keep in mind how your content will be consumed either via a PC, mobile device or even a printer.  The different screen sizes and devices present more of a challenge for a web graphic designer than someone designing for print.  Print is a "static" design that is set and consumed in the same format after it is printed, while web graphic design needs to be fluid and dynamic in order to be relevant and effective.  With web design you can reach a wider audience and it can be as or even more effective than print media in today's connected society.

Reflection
Most of the topics covered in the videos are not new to me and were just a refresher of the things that I've learned over the years "tinkering" with websites and working in the technology field.  For me, the videos reinforced the fact that it's difficult to become a master of all aspects of web design and to make a living designing websites you have to specialize in certain technologies in order to become proficient and effective.  It doesn't mean that you shouldn't grow your skills and expand your knowledge in all areas of web design, but it does mean that there's just so much to know and so many programming and scripting languages out there that it's impossible to master all of them. To be successful in web design you need a modular approach to design that you can build on.  Even if you lack graphic design experience it doesn't mean you shouldn't try designing a website.  There's many resources on the web that can help you overcome your lack of expertise in areas of web design.  For example, when a friend of mine asked me to design a website for his business a few years ago I agreed even though I was lacking graphic design skills. I used a website called guru.com to solicit bids for a banner for the website.  The cost was minimal and I had a professional looking banner that I was able to integrate into the website's template. Bottom line is that you don't have to be an expert in all aspects of web design but you do need a solid understanding of all the pieces that go into web design in order to be successful. With the modular approach to web design you can build on your skills as you learn things like HTML and then build on that knowledge by learning XHTML, CSS and other aspects of web design.

Quiz Me

1.  In order to be cost effective while giving shareholders access to the annual financial report I would utilize the Web to provide shareholders a choice to get the Print Media.  I would give the shareholders an option download the report in a PDF format which they can then print or they can order the report and have it snail mailed to the address of their choosing.  This will be a cost effective way to satisfy the needs of all shareholders.

2. As a graphic's artist in a new city I would send out a brochure that has the best parts of my portfolio to visually grasp the reader's attention while promoting my work and talents.  In this brochure I would certainly include my website address and contact information that ad agencies can access the rest of my information and portfolio.  This would be more cost effective than printing all of my portfolio while still accomplishing my advertising goals.

3. As a small software company the best way to keep my customers updated with changes to our software would be via the web.  Not only can you automate the notification task through emails but also provide a link for the customer to download the new updates.

4. Because information changes frequently, the most labor effective and intuitive way to keep the clients updates is through the web via a portal.  You can setup a web portal that the client can access with their credentials. This will make sure all clients have the same information and it only needs to be updated once in the web portal.

5. In order to reach "the rest of the world" as a small businessperson or teacher there's really one cost effective option and that's via the web.  You can create an electronic version of the small booklets that students or clients can download and print themselves.

6. In order to achieve the goal of compiling a "high-quality" collection of artist's work I would use the web over print media.  With the web you can use the RGB color model to get more brilliant and vibrant color to display the artist's work, while printing on paper uses a four-color process known as CMYK.  CMYK process has limitation on what colors it can reproduce.  The other goal is to show the world this artist's collection and the Web is more cost effective at achieving this goal.

Adding Blog List

Adding the blog list gadget was a breeze and very much a straightforward process.  Took about ten minutes to do after I finally settled down on the template and background image for my blog. On a side note, I downloaded and installed Microsoft Expressions from Dreamspark and installed on my windows laptop.  Next thing on my list is to get it installed on my MAC using Parallels...

Backgrounds: Out of all the blog backgrounds in class, I like Scott's raindrops background the most.

Web Design 1st Class

I have no choice but to start a tech blog......it's not my fault, she made us do it.