Welcome
This website will serve as a portfolio and grounds for experimentation with the Hugo static site generator and Hyde theme.
This website will serve as a portfolio and grounds for experimentation with the Hugo static site generator and Hyde theme.
Carpenters, welders, and heavy equipment operators; it seems my family has always built things. Ever since I started developing for the web it has felt like the right balance of designing, engineering, and creativity. Instead of hammers and trowels, it is HTML5, CSS3, and JavaScript.
Working in a broad range of fields —from atmospheric research as an NSF fellow to managing ninety employees within a cinema company— has provided the perspective that I rely on to develop websites and tools for the web.
I grew up in West Michigan (one of the most beautiful parts of the mitt.) And spent over a decade in Ann Arbor (Go Blue.) I’ve just recently made my home north of Chicago.
Not specifically about web development
Honey Creek Meadows is a small homeowners association in Pinckney, Michigan. Their original website was from the table layout era, so I’m trying to build a responsive, accessible update.
New Honey Creek Development Site | Project Github Repository
The website is ultimately not visited very often (I, as a resident in the neighborhood, didn’t realize it existed for years.) It’s an informational bulletin board, so I thought this would be a good opportunity to work on a few ideas that are unfortunately not the highest of priorities on many websites. Throughout the project I wanted to focus on accessibility and readability.
At least in theory, the default system font within an operating system or web browser is designed for optimal readability. A project that values an easy to read website above brand identity seemed like an ideal situation to see what can be done within the default system UI font-family.
Marcin Wichary’s writing about different approaches to using the default system font on a website convinced me that this could work for the project. Here is the method Marcin supported:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
The shortcomings of this method (like needing to update this list when an OS changes the system font or “Roboto” appearing on an Ubuntu machine where it’s installed) aren’t serious problems for a really small website that is primarily informational.
Choosing to use the system font alone is a little limiting, but for a small project like this there is still plenty of available variety within the font family to create the desired hierarchy. Page titles can be thick and chunky, section titles can be tall and skinny, and body copy can still fit comfortably in between.
The Honey Creek Meadows site is primarily text and often paragraphs of it. At ever greater screen/viewport sizes it was important to limit the line length of body text. I choose to raise the default font size larger than I typically would to keep the line length comfortably readable.
The impetus that started this redesign was a desire to move away from the original site’s table layout. Using HTML accessible elements and a single page structure with sections for content that used to be individual pages made it both more accessible to screen readers and simpler overall.
Although I discovered HTML5Accessibility.com late in the development of the site, it’s an incredibly helpful resource. Prior to learning about this website, Mozilla’s dev page had been my go to reference.
A color pallet with sufficient contrast must always be considered. Yellow can often be a challenge, but it fit the honey theme so well. As a result, yellow distinguishes between different sections or components of the site. Underlines, navigation elements, or board member cards get a flourish of yellow. The thought being, spacing provides a similar signal in the event yellow doesn’t have enough contrast for some viewers.
Drew Buikema 3827 Brenton Ct SE Grand Rapids, MI 49508 drewbuikema+dev@gmail.com
Drew Buikema reserves the right not to be responsible for the topicality, correctness, completeness or quality of the information provided. Liability claims regarding damage caused by the use of any information provided, including any kind of information which is incomplete or incorrect, will therefore be rejected. All offers are not-binding and without obligation. Parts of the pages or the complete publication including all offers and information might be extended, changed or partly or completely deleted by the author without separate announcement.
The information and code in these repositories was placed here for my own use but are released into the public domain in the hopes that they might be useful to others. Where I have used information from others I have tried to use and attribute it properly.
I make no guarantees or warrantees of any kind about the suitability of it for any purpose whatsoever. Should you choose to use the information and/or code, then you are responsible for the way it is used or abused - not me. If you damage / injure equipment, property, person(s), or anything else it is your fault, not mine. If your project does not work as intended it is your problem, not mine.
Drew Buikema is not responsible for any content linked or referred to from these pages - unless Drew Buikema has full knowledge of illegal contents and would be able to prevent the visitors of Drew Buikema’s site from viewing those pages. If any damage occurs by the use of information presented there, only the author of the respective pages might be liable, not the one who has linked to these pages. Furthermore Drew Buikema is not liable for any postings or messages published by users of discussion boards, guestbooks or mailing lists provided on his page.
Drew Buikema intended not to use any copyrighted material for the publication or, if not possible, to indicate the copyright of the respective object. The copyright for any material created by Drew Buikema is reserved. Any duplication or use of objects such as images or texts in other electronic or printed publications is not permitted without Drew Buikema’s agreement.
This disclaimer is to be regarded as part of the internet publication which you were referred from. If sections or individual terms of this statement are not legal or correct, the content or validity of the other parts remain uninfluenced by this fact.
