Web Design Blog Post 3

Last week's assignment was on web programming basics, with an emphasis on learning HTML and CSS, inserting images, and creating webpages using a text editor (Apple=TextEdit) or (Windows=Notepad).

This week, we were introduced to Adobe Dreamweaver. The professor provided us with a .txt file containing 11 pages of essential copyright information for creative professionals. Project one was to use that information to create a multipage website. He also taught us how to create a small background image and have it tile in the wrapper section to the left and right sides of the webpage outside of the main body content.

The first step in Dreamweaver is to set up a site name and location. The homepage will be named index.html, the CSS file, which I named styles.css, and then various names for the remaining 10 pages. The professor then covered SEO recommendations.

Summary of the website SEO Recommendations:

1. Use Hyphens (-) in internal and external URLs and image names:

   • Hyphens are preferred over underscores for SEO.
   • Google treats hyphens as word separators, improving readability for both users and search engines.
   • Google treats underscores as long combination words.

2. URLs (internal and external):

   • Use descriptive title attributes different from the shortened URL name.

3. Navigation Placement:

   • Header Navigation:

     • Prioritize key pages.
     • Boosts crawlability, authority flow, and user experience.
     • Ideal for primary SEO targets.

   • Footer Navigation:

     • Best for utility links and comprehensive site linking.
     • Helps with crawlability but carries less SEO weight.
     • Good for secondary pages and long-tail keyword links.

   • Best Practice: Use both strategically—header for core content, footer for support and completeness.

4. Homepage Naming:

   • Naming your homepage index.html is standard practice.
   • It supports clean URLs and aligns with server defaults.
   • No significant SEO impact if configured properly, but sticking with index.html is recommended for simplicity.

5. Image Tags:

   • Alt Attribute: Essential for SEO and accessibility.
   • Title Attribute: Optional, used for hover-tooltips. Offers slight UX enhancement but minimal SEO value.
   • Focus on crafting descriptive alt text first.

Being old school, I had all of my URLs and images named using underscores, so I changed the underscores to hyphens.

I also had all of my navigation links at the bottom of the page, so I did some research and figured out how to create a table and move them to the header section of each webpage.

Lastly, I use and designed my website on a desktop computer, but I know a lot of the younger generation are using tablets and their cell phones to view webpages. So I researched and implemented responsive elements into my HTML and CSS files to adapt the webpages to various screen sizes.