A website can make or break a business – with many factors accounting for that. From site structure to usability to design, the creation or rework of a website has many considerations.
Website development/design tips
- Bucket page content into categories and subcategories, with that becoming the site structure (a hierarchy of pages); the navigation, URLs and breadcrumbs should consistently adhere to said hierarchy; if one strips off the last part of the URL, there should be a page there (the page above it in the hierarchy)
- URLs that match page hierarchy are necessary for proper analytics/reporting
- URLs that match page hierarchy are necessary for creating audiences based on browsing behaviour
- URLs that match page hierarchy help the user know where they are on a website
- URLs that match page hierarchy help convey to search engines how content relates to each other
- Top level navigation items require actual pages: Can link users to said pages/categories, can attempt to rank said pages for higher-level search queries, etc.
- When structuring pages/content, heavily consider those searching (via Google/etc.) for the product/service/information; if there’s enough content, each topic area should have a page to itself to help capture external (and internal) search queries
- Consider: Most traffic to a website will not enter the site through the homepage (if structured and optimized properly)
- Content or results displayed via filtering: If searching/filtering are the only way to produce a subset of results, consider if people actively search for said results in Google/etc. — if so, those pages should have static versions that can be indexed by external search engines
- Include standard SEO and social sharing fields in the CMS: title tag, meta description tag, og tags
- Include basic SEO capabilities in the CMS: no index, redirects, canonical URLs
- Internal search: Ensure search results are created in a way that is easily tracked via popular analytics packages (Google Analytics, etc.)
- Internal search quality can become a major issue among both external and internal users — heavily scrutinize the search results and adjust algorithms accordingly for optimal ranking; consider the ability to have editors create “promoted results” that sit atop regular search results
- Content that is to draw traffic from search needs to appear in the DOM
- Ensure code and content meets accessibility standards (which typically happens to be good for SEO as well!)
- Allow for editors to easily incorporate call to action blocks
- Provide modules for editors to avoid custom HTML: mobile-friendly tables, quotes, heading styles, etc.
- Don’t use a mobile/”hamburger” menu for desktop view – seeing the navigation options up front is best where possible
- If using overlays for forms or content, ensure there’s a way for any editor to link it
- Run Lighthouse (and/or similar tools) to help with page speed, accessibility, SEO and other areas
Web development/design resources
- W3C Validators and Tools – checks compliance of HTML, CSS and more; checks for dead links
- Dead Link Checker – scans a URL for dead links
- Can I Use… – details browser support for front-end web design techniques
- Hover.css – hover effects via CSS
- DevDocs – searchable documentation for various APIs, including HTML and CSS
- Google Analytics – free, detailed analytics for websites and apps
- WordPress – advanced blogging tool with a huge collection of plugins and themes; free download for your servers or use WordPress hosting
- BuiltWith – view what technology is used for any URL – servers, coding languages, analytics packages, ad servers, etc.
- SiteUptime – get notified when/if your website goes down (and when it becomes live again); Free for 1 monitor and minimum 30 minute interval checking
- Peek – free user testing feedback (from one person)
- Open Foundry – open source, downloadable web fonts (top 30); resize in view
- Google Fonts – web fonts to use, including icons
- Favicon Generator – quickly create favicons from text, images or emoji
- Let’s Enhance – improves the resolution of images
- Adobe Photoshop Express – make minor edits to images (cropping, touch ups, background removal, etc.) – online
- Cognito Forms – super customizable forms that can be embedded into a webpage; free plan forms contain minimal/clean branding
- GTmetrix – site speed testing tool
- Lighthouse (part of Chrome) – run tests on webpages and get results in terms of page speed, accessibility, SEO and more
- Dark Agents – list of AI Agents, bots, scrapers, etc. with information to exclude via robots.txt