28
Website Design Bootcamp for Beginners Noah Campbell University of Windsor @NoahFCampbell https://www.linkedin.com/in/no ahcampbell1/

ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

  • Upload
    others

  • View
    10

  • Download
    0

Embed Size (px)

Citation preview

Page 1: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Website Design Bootcamp for Beginners

Noah CampbellUniversity of Windsor@NoahFCampbellhttps://www.linkedin.com/in/noahcampbell1/

Page 2: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

About Me

Page 3: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

What is a website?• A website or web site is a collection of related network web resources, such

as web pages, multimedia content, which are typically identified with a common domain name, and published on at least one web server.

Page 4: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

What is a website used for?• Connect with customers

• Sell products

• Tell your brand’s story

• Provide helpful information in a timely manner

Page 5: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

E-Commerce• Ecommerce, also known as electronic commerce or internet

commerce, refers to the buying and selling of goods or services using the internet, and the transfer of money and data to execute these transactions.

• Traditionally, e-commerce websites are more expensive to produce and maintain (why?)

• Fun Fact: Global retail ecommerce sales are projected to reach $27 trillion by 2020.

Page 6: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Website Technology Stack

Page 7: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

DIY or Hire a Developer?• Hiring developers on a freelance/contract basis can be

a high-risk, high-reward opportunity.

• Hire a Dev: ~$2000 - $4000

• DIY Using an Editor: $400 - $700 (including email)○ Added bonus: you control your website at all times.

Page 8: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

AODA• The Accessibility for Ontarians with Disabilities Act (AODA), 2005 requires that

website content is made available to everyone regardless of their disability.• Web content includes:○ the web page text○ uploaded documents (.pdf, .doc, .txt, etc.)○ uploaded images○ uploaded video

• All new sites should be reviewed to ensure they are accessible and meet all AODA, WCAG 2.0 and W3C requirements before going live to the public.

• A comprehensive overview of the AODA as it pertains to web development can be found on the Ontario Government website

Page 9: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Key Accessibility Requirements for Websites

● Use headings properly and in the correct order to organize information on your pages

● Headers should not be used as a way to make text bigger.● Don't use "Click Here" as hyperlink text, explain in clear English where the link

goes and what will happen when the link is selected.● Use Alt Tags and Titles with images.● Describe images as completely as you can in alt tags.● Do not rely on colour solely as a visual clue.● Use tables only for tabular data—do not use them to design or control the

layout of your page.

Page 10: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Key Accessibility Requirements for Websites

● Use bold and italics to highlight text. Do not underline—underlining indicates a hyperlink.

● Use left justification for text, do not use full justification.● Do not use multiple fonts or inconsistent formatting on a single page.● All videos posted must have closed captioning.● All attached documents must be properly accessible—just like the page

itself.

Page 11: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Key Accessibility Requirements for Websites

Page 12: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Design-Best Practices1. Keep branding consistent2. Create strong Calls to Action (CTAs)3. Fast Loading Time

a. Reduce image sizesb. Cachec. Plugins

4. Search Engine Optimizationa. Keywordsb. Invest in a tool!c. Google Search Console

5. Mobile Optimizationa. 8/10 customers will disengage from a hard to read website

Page 13: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Design-Best Practices6. Easy Navigation

a. Limit nav bar (4-6 options).b. Contact information should be in right-hand corner, easily visible.c. Back to topd. Let visitors know where they are

7. Email marketing

8. Social media

9. Quality photos and content. Compliance is King.

10. Plan your content before you start! Feel free to use our sample template

Page 14: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Responsive Website Design

Page 15: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Responsive Website Design• It takes about 50 milliseconds (that’s 0.05 seconds) for users to

form an opinion about your website that determines whether they like your site or not, whether they’ll stay or leave.

• 57% of internet users say they won’t recommend a business with a poorly designed website on mobile

• 75% of consumers admit to making judgements on a company’s credibility based on the company’s website design.

Tools exists to make websites responsive on mobile browsers! Your mobile site should have the same (if not better) features as your Desktop site.

Page 16: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Common Tools

Page 17: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Wix● Wix.com Ltd. is a cloud-based web development platform that was

first developed and popularised by the Israeli company also called Wix.

● It allows users to create HTML5 websites and mobile sites through the use of online drag and drop tools.

● A variety of free and paid plans available + training, documentation, and support.

Page 18: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Popular Wix Features

1. Cloud-based2. Scalability into e-commerce3. Mobile Responsive design and testing4. Wix ADI (Artificial Design Intelligence)5. Design manager6. Helpful design tools (you don’t need to be a graphics expert to make a good

looking, impactful website)7. Connect any domain (even one you bought elsewhere)8. Predictive add-ons.

Page 19: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Popular Wix Add-Ons

1. Wix FAQ2. Wix Get Subscribers / Wix ShoutOut (think Mailchimp, Constant Contact)3. Social Media Stream4. Form Builder5. Wix Stores6. Wix Bookings7. Wix Logo Creator8. Wix Answers (Knowledge Base)9. Wix SEO Wiz

10. GSuite Add-on (~$100/year for full suite)

Page 20: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

GSuite + Wix

● Purchase a personalized G Suite mailbox directly from Wix! ● G Suite mailboxes include:

a. A personalized email addressb. Access to Google Calendar, Docs, Sheets, Slides, and so on (save $ on an

Microsoft Office Subscription)c. 30 GB of Inbox and Google Drive storage

i. Cloud-based documentation/file sharingii. Add aliases and additional users

Page 21: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Wix Pricing

Page 22: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Wix Pricing

Page 23: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Search Engine Optimization - Wix SEO Wiz

• SEO is all about getting search engines to show your website high up on a search engine results page, better known as a SERP.

• You probably perform several online searches every day, scanning the results for a website that has the information you are looking for.

• But while we all see SERPs every day, most of us don’t fully grasp which elements mean what.

Page 24: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Google My Business

Page 25: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Google My Business - checklist1. Consistent NAP2. Local Phone Number3. Choose a Precise Category and Location4. Completeness and accuracy5. Quality Images (and a Virtual Tour)6. Utilize GMB insights7. SEO + GMB

Demo!

Page 26: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Data Privacy/CollectionWhen deciding on what type of data to collect and how to protect it all for website users, web design and web development experts should consider the following:

1. Informed Consent from Users – Ensure that users are aware of why their personal data is being requested and how it will be used on the site to improve their experience;

2. Give Good Value – In exchange for this data, be sure to provide value to the user in the form of a user-friendly, easy to navigate, and highly secure website;

3. Allow Users to Manage their Data – Putting control of personal data in the hands of the user allows the user to feel more safe since they can add and remove information as desired.

Page 27: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Let’s make a sample site!• Get involved by attending our events, talking to us on

campus, and joining our mailing list to be updated on current events and project intake periods.

Page 28: ahcampbell1/ @NoahFCampbell ...€¦ · 4.Form Builder 5.Wix Stores 6.Wix Bookings 7.Wix Logo Creator 8.Wix Answers (Knowledge Base) 9.Wix SEO Wiz 10.GSuite Add-on (~$100/year for

Thank you!

Any questions?

Noah CampbellUniversity of Windsor@NoahFCampbellhttps://www.linkedin.com/in/noahcampbell1/