CLUB WEBSITE MANUAL Username
Password
LOG IN >>
Forgot your password?
A Small Foreword...
1
Thank you for taking the time to read our very first website manual made by the very first District Technology committee! We’re so excited to finally be able to provide resources to help our fellow website makers. This manual is meant to guide you in your website journey and give you a few tips on making the optimal website for your Club. On that note, the District Technology Committee wishes the best of luck on your website!
Table of Contents 1
Introduction
3
Website Checklist
5
Comparison of Web Builders
7
Hosting/Domains
9
Online Booking Systems
11
Branding and Web Design
19
Outstanding Website Archives
21
References and Contacts 2
Website Checklist
This section will help provide some of the fundamental items needed for a club website. The checklist references the qualifications on the Outstanding Website award, due on October 1st via email. However, it is highly recommended to have the website published before your Club’s first meeting. An Outstanding Website follow the four main categories listed below. For more details on this, please refer to the Outstanding Websites Archive on page __
1. Content and Usage 2. Promotion of District and Divisional Events 3. Appearance 4. Organization
3
Website published before first meeting List/Calendar of Club events
Masthead on the homepage
List of Club officers
Original graphics
Circle K websites linked
No copyright infringement
Photo gallery/drive
Ease of access
International seal
Ease of navigation
CNH District emblem
Follows CKI brand guide
Graphic standards
Contact info District/Divisional Events Club theme
4
From scratch
Making a website from scratch means developing web pages locally and then uploading it to a hosting server and domain.
From scratch Allows for great flexibility and can be customized to the fullest extent
Wix/Weebly
This category is specifically for those that build web pages visually rather than through lines of code.
WordPress Specifically, wordpress.org, allows for flexibility in hosting and website creating without the limitations of Wix/Weebly
5
Will have to write code for everything Will have to worry about hosting and domain Not recommended for a Club website since it’s too hard to pass on to successors. Good for event websites or websites with little content (i.e. FTC/DCON) Clubs with these types of websites tend to appoint more programming orientated technology chairs in order to maintain their site
WordPress
Wix/Weebly
Able to upload posts/downloads in an organized fashion
Great for beginners and easy to pass on to successors
Lots of plug-ins and widgets available
Has a learning curve Content is very structured/blocky Will have to worry about hosting/domain
Good choice for club websites if you have the time to learn it Successors will have to get used to the mechanisms
Easy to use design interfaces Hosting/domains included in the premium package
A Wix/Weebly website will always look like a Wix/Weebly website Customization is limited to the plug-ins they provide you, and there aren’t many of them
If you are more design-orientated rather than programming/tech orientated, this tier is a good choice 6
Hosting/
7
/Domains
If you're building your website from scratch, with WordPress, or with a similar service, you may need to purchase hosting and your own domain in addition to the work you've done developing your site. Hosting provides the memory, storage, and computing power your site needs to go live on the web. A domain gives your website an identity that makes it easy to find and remember for your users. Both may be purchased, typically paid for on a monthly or yearly basis. However, many web builders, like Wix, Weebly, and SquareSpace provide both of these features in their pricing plans, so make sure you do your research! Hosting services to consider:
Places to purchase domains:
• Digital Ocean
• Google Domains
• Amazon EC2
• GoDaddy
• Bluehost
• NameCheap
Note: Club websites typically don't experience too much traffic or require much storage, so in general the minimum hosting plan will suffice. There's no need to pay a premium price!
8
Online Booking Systems Online booking systems can allow club websites to effectively arrange and coordinate events to the members. Listed below are some plug-ins and programs that can be utilized with your club website. Play around and see which below (or from your own research) is the best for your club!
9
G Suite
G Suite involves utilizing both Google Calendar and Google Forms as a method of sign up. Another way would be to use Google Sheets.
Teamup
Teamup is a clean interface calendar system with an ability to organize events by color and category
WordPress
If you’re using WordPress, you can have members make an account and they can register themselves in an event
10
Basics of the Circle K Brand Guide The Circle K International Brand Guide applies to all the material that is associated with Circle K. International Websites are no exceptions to this rule! This spread lists out the main rules to look out for not just when building a club website but also in any media relating to Circle K International.
Circle K Style htCNH tps:/ company-70313. frontify.com/d/zDV4I aLwZ1nC/cnh-cGuide ircle-k-style-guide Circle K International Brand Guide https://www.circlek.org/resources
11
Padding Seals and wordmarks should contain the respective amount of padding (also known as white space) around them. Be sure to leave a proportional amount of padding around the border of these graphics.
Mixing/Modifying Refrain from making changes to the graphical elements provided by Circle K International. This includes skewing the graphic itself, combining graphics, and obstructing the graphic itself. When in doubt, let it be!
12
Web-specific Branding
This will be the first written guide to outline what qualifies as a website that follows the CNH Circle K International graphic standards.
Below are the official CNH Circle K requirements that a Club website must have in order to be deemed as “following graphic standards”
1. Use the Circle K International Seal visibly on the website 2. Masthead should be on the homepage 3. The masthead must look like the standard masthead - wordmark, stripes, and CNH logo together - when the website first loads, but it’s okay if the elements get separated later on (due to a slideshow, scrolling animation, etc.)
4. Masthead recommendations a. Putting it at the top (in the navbar) or at the bottom of the page b. Downsizing the wordmark and CNH logo to better fit web screens c. If you have a general slideshow on your homepage, you can integrate the masthead directly onto the slideshow
13
HOME
ABOUT
CALENDAR
EVENTS
CONTACT
One recommended way to incorporate masthead in a Circle K website is to use it in the navigation/menu bar.
© 2018 by Circle K International at Circle K University
The masthead can also be incorporated into the website’s footer (or the very bottom) of the page.
14
Web Design Tips This page features design tips to help your website be as functional and aesthetic as it can be! The first spread covers a series of methods used to clearly outline your website and website’s expectations. The second spread covers small tricks and tips to make your website pleasing to the eye.
15
FTC
201 8
If you’re in the beginning steps on developing your club website, refer to the steps below to help you in your journey!
1. Sketch
The best way to bring your website to life is to do exactly that -- bring it to life through pen and paper. List out what you want your website to do and what it needs and then draw the elements accordingly on the paper. It might sound a bit weird to start with that but it’s the fastest way to visualize your website. A sketch can describe your idea much better than words.
2. Wireframe
Wireframes are your website’s structure. Rather than telling you what the website looks like, it tells you what the website will do and the relations between them. A sketch can give you a page on a website but the wireframe will tell you what happens when a button is pressed.
3. Mockup/Prototype A mockup is the website in barebones. It is the sketch but filled in -- add the text (lorem ipsum), fonts, colors, images to make a static page. Use your favorite website builder and reference your sketch and wireframe to produce the web page. Once you have the mockup, you can move on to the prototype. The prototype is the mockup with interactions. Once you add the content and functionality, you’ve finally made your club website!
4. Revise and Launch!
If you reached this step, congratulations! You’ve reached the final stages in this design process. Here, you ask for input on the website you’ve made, from either your committee, board members, or even from a survey sent to your club members. Your website will go through and continue to go through many iterations even past its launch date. Notice how the FTC website on the left does not exactly look like its sketch. This is completely given! Creativity doesn’t stop at the sketching phase, it only develops and grows as you work on your website more.
To see the FTC website’s design process in more detail, click htps:/docs.go gle.com/document/d15vZbOV62 HolJG649here vXyUwkGrL72x3MPrphxu SDRHw/edit?usp=haring tps:/ brainhub.elinked u/blog/difference-between-website wireframe-mockup-prototype/ Information has been synthesized from Brainhub via htthis
16
The example above is super readable and simple. By making their product the focus of the homepage as a detailed picture, the viewer cannot miss it and ideally want to buy it.
17
Purpose
Readability
Simplicity
Keep your purpose in mind when designing your homepage. If you want to inform members about the club, then it would be best to add a section outlining info regarding the club. If members are mostly using it to sign up for events, then having a calendar on the homepage might be the best move
What good is a website if you can’t read anything? Make sure there is enough contrast with the color of your text and the background. It’s also best to stick with a readable font in a reasonable font size. It is not ideal to have the majority of your website in a 8pt script font.
The phrase “keep it simple” heavily applies to websites. A general rule would be to stick to three fonts and colors. It’s okay go have more but the overall effect of the website should be harmonious, not cluttered. You don’t want the design to get more attention than the content itself.
Ensure your website is showing up properly on multiple screens -- big and small!
Check out templates and other websites to get some inspiration!
Optimization Just as everyone has a unique fingerprint, every monitor has its own display resolution! As you are developing, check with your board to see if the website is showing up properly on their monitor. If someone is having trouble viewing the website, then there will most likely be a general member with the same issue.
If you’re stuck, refer to other websites or website templates and take a look at their structure, colors, and fonts they used. Looking at multiple sites can help refresh the brain and give new inspiration than sticking with a blank canvas.
https:/ www.wix.linked com/blog/2017/10/5-desigwebsite n-tips-for-a-professional-site/ Information has been synthesized from Wix via this
18
Club Website References The Club Website References is a separate resource that the District Technology Committee created for your convenience. It can be used as inspiration and as a reference to help create your club website. Take the time to look at the screenshots and see what can be done with your website. You can find this under ‘Resources’ on cnhcirclek.org.
19
20
District Technology Committee Contact Info Technology Chair, Jonathan Chu
technology@cnhcirclek.org
Executive Assistant, Sandy Tsan
cnhtech.ea@gmail.com
District Website Assistant, Alvin Nguyen
cnhtech.website@gmail.com
District Website Assistant, Tate Yeung
cnhtech.website@gmail.com
District Events Website Chair, Carl Dungca
cnhtech.eventsites@gmail.com
Software Developer, Chris Lam
cnhtech.software@gmail.com
Software Developer, Kevin Tran
cnhtech.software@gmail.com
Software Developer, William Lin
cnhtech.software@gmail.com
Webinars Technology Assistant, Francis Tran cnhtech.webinars@gmail.com
Special Thanks/Credits Brainhub and Wix for providing content for the web design tips section Carl Dungca for providing his FTC design process document Issuu for the manual’s template Ryan Hoang for helping with graphic standards of print and website And lastly, District Technology Committee for prooďŹ ng and fact checking
21
Questions? Contact the District Technology Chair through e-mail at technology@cnhcirclek.org or check out the CNH Technology Chairs group on Facebook and propose your question with your fellow Technology Chairs!
?
22
Live to serve, love to serve cnhcirclek.org
8360 RED OAK STREET SUITE 201, RANCHO CUCAMONGA, CA 91730 USA