Sample S2 Shows a Simple Top Menu Bar
- A company logo on the left.
- The company name in the top center.
- The familiar three bar menu icon with a popup is on the top right. The top navigation is intended to be user friendly.
Header & Navigation Design Tips
- Place the company logo in the “Header” whenever possible. Search engines look for branding in the header, so always include an alt tag on the logo image that contains the company name.
- The header menu is designed for visitor usability. Visitors quickly lose interest if they cannot easily find the information they are looking for. Keep navigation clear, simple, and intuitive.
- Do not use the
<nav> tag in the header. The header menu is intended for user-friendly navigation and design flexibility.
- The SEO-friendly
<nav> element belongs in the footer and should contain a simple list of the important links for search engines and accessibility.
- Be sure to click the (i) icon button in the WebTools Footer section for detailed instructions and examples on the proper use of the
<nav> tag.
Default CSS Starter Notes:
- CSS is Section Wide – this means it specific to the new Section 2 JS-CSS system so you can update older website in stages.
- All classes and IDs have are named with the sufix ...S2 so we can have multiple layout styles on the same Section of this website.
- Please communicate recommended changes so starter code CSS and JS is helpful as a quick starter.
Default CSS Starter Notes
- CSS is Section-Wide. The default CSS applies only to the new Section-2 JS-CSS system, allowing older websites to be updated gradually without affecting existing layouts.
- Class and ID Naming. All classes and IDs use the suffix S2. This naming convention allows multiple layout and styles to coexist on the same website without conflicts.
- Progressive Upgrades. Designers can implement the new Section-2 JS-CSS system on selected pages while leaving older content unchanged.
- Please Communicate. If you discover improvements or recommended changes, please share them. We need feedback for the CSS and JS starter defaults to be useful.
Start and End in CSS for Sample-S2 is marked:
- Start: /* Nav Style 2 - Top Nav with Mobile Menu Panel */
- Ends: /* End Nav Style 2 */
AI Starter Text for JS
- Before editing JS (JavaScript), copy the AI Starter Text and paste it into your AI chat. The starter text was created with the assistance of Claude AI and contains the exact project parameters, coding standards, and requirements needed for this system.
- Always paste the AI Starter Text before describing your task. This provides the AI with the necessary context and helps produce compatible code.
- Use the AI Starter Button. The AI Starter button is located at the top of the JS Editor in the new WebTools Section-2 JS-CSS system for all JavaScript code types. It has a quick copy button at the top.
- Please use the AI Starter Button whenever working with AI-generated JS. It helps ensure consistency across projects and reduces the need for revisions.
IMPORTANT NOTES WHEN USING STARTER DEFAULTS
- Replace all placeholders. Be sure to update all links, images, graphics, contact information, and sample text so they match the actual website and business.
- Use the Schema System in WebTools. Proper schema markup helps search engines better understand your website content and dramatically improves visibility in search results.
- Maintain consistent content throughout the website. Google and Bing want websites to be clear, accurate, and with consistent information across all pages. Always take advantage of every opportunity to improve organic search visibility.
- Review AI-generated content carefully. AI is excellent at researching topics and creating relevant content, but it is your responsibility to verify accuracy, maintain consistency, and follow company standards and project requirements.
- Quality matters. A few extra minutes spent reviewing content, links, images, and SEO settings can make a significant difference in the effectiveness of a website.
