View
11
Download
0
Category
Preview:
Citation preview
Website Design Bootcamp for Beginners
Noah CampbellUniversity of Windsor@NoahFCampbellhttps://www.linkedin.com/in/noahcampbell1/
About Me
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.
What is a website used for?• Connect with customers
• Sell products
• Tell your brand’s story
• Provide helpful information in a timely manner
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.
Website Technology Stack
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.
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
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.
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.
Key Accessibility Requirements for Websites
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
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
Responsive Website Design
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.
Common Tools
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.
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.
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)
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
Wix Pricing
Wix Pricing
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.
Google My Business
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!
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.
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.
Thank you!
Any questions?
Noah CampbellUniversity of Windsor@NoahFCampbellhttps://www.linkedin.com/in/noahcampbell1/
Recommended