My Website Guidelines

This website has a personal design guideline that I follow when editing and building it. The design of this site generally follows the concept of trying to build a website that not only serves me, my functions and accessibility needs but also includes a general accessibility mindset to the best of my ability. My guidelines mainly come from my own personal habits; such as frequently using my phone to browse, needing straightforward navigation, and needing clear organization. This page may change and evolve as time goes on, but that’s kinda how it goes when you’re still figuring out stuff!

• There is no autoplay, no pop-ups, and no large flashing graphics. Heavy GIF usage on pages is warned beforehand.
• Visual decorations should be properly inserted to avoid overlapping important site features. Visual decorations should be reduced or automatically removed if viewed on mobile to avoid hiding site features. Frequent testing of resizing windows is used to see if elements break as well as zooming in and out.
• When transforming the site from a grid display to a flex display for mobile, make sure elements make sense in a top-down vertical mobile layout (eg. Navigation Bar in relation to Content, checking margins)
• There is minimal usage of Javascript. If Javascript was disabled the site is still usable. Some pages (the Projects page and the Gallery page) use Javascript to add interactivity to buttons, however if functionality isn’t available, there are still other aspects of the site that do not use Javascript. Scripts should not add massive load times to pages.
• The website can be easily navigated on mobile. Font and font size are legible and based on viewport size respectively. Site themes are created both as a stylistic choice and to provide different contrast levels for visitors.
• Images are reduced in quality and size for faster page loading. Lazy load is used if reducing image quality isn’t sufficient. Alt-text is provided visibly on the main gallery page. On Gallery Archive pages, alt-text is written within the <img alt=""> tag to create less visually dense pages.
• Pages should avoid being dense in links. If it’s unavoidable or needed, either contain links in a scrollable container or reduce the visual footprint with other methods to keep the page from being too overwhelming.