blog

Mindful Design

I know it’s strange, I’m a redneck and rednecks usually aren’t into meditation, unless it involves beer and fishing (not that there’s anything wrong with that). But, then there’s me I’m into meditation, yoga and qi gong. I’ve recently started yoga, and I have practiced qi going for years. I like to meditate, I’ve even built 2 meditational labyrinths. I walk our labyrinth regularly and recently started taking a mindfulness class.

Meditational Labyrinth by Matt Fitzwater The class is awesome, and it’s really made me realize just how much of the time I spend is just on “auto-pilot”. To be mindful or aware, to be truly present- man, that is difficult to do.

Of course I’m thinking about how to apply mindfulness to web design and that can be tricky to. Designing for everyone, being mindful of all the potential visitors. Here are just a few considerations to think about when mindfully designing a website.

  • What types of barriers could my website’s users have? Could they have a slow connection, a physical impairment?
  • 1 out of 5 people in the U.S. have a disability. Do my users need assistive technologies to access my websites, like screen readers, braille keyboards or maybe a mouth stick or head wand.
  • Is my message clear and concise?
  • Is my code clear and concise?
  • Am I writing to what my users need to hear, not just what I want to say?
  • Is my website, images, music, and videos inclusive, are they empowering people or are they excluding?
  • Am I following best practices for modern web design?

Incidentally, I guess this list could go on for a good while, but I hear some bluegill calling me.

Accessibility Classes, Badges, and Video Disasters

Accessibility has always been important to me, building an inclusive web has always seemed like the right thing to do. I’ve taken some accessibility classes in the past and this year I’ve decided to up my accessibility game. So I am taking a course from Deque University now (I’m going for the IAAP Certification) and I just finished a class from the University of Illinois at Urbana-Champaign “Web Design: Web Accessibility Evaluation Basics” and received their badge. These classes are really helping me become more of an empathetic designer, and realize some of the challenges people struggle with daily, like being deaf or hard of hearing and trying to watch a presentation or video without captions.

I’ve not dealt with a lot of videos on the web and only recently really thought about the accessibility considerations needed when working with video. Making websites inclusive is a serious subject, but this video on the fails of auto-captioning cracked me up, remember always double check the auto-captions. So now I’m in the process of redesigning my website to make it blazing fast and inclusive as possible. Stay tuned for some cool changes:)

New static website theme

demo website template

I have a need for speed, well speedy websites anyway. My goal is to build a bunch of super fast website themes that I can base my future work on, so here’s my first attempt. It’s a lightweight, responsive static website theme.

The entire website CSS is only 1.67 KB and the JavaScript is only 485 bytes gZipped! I’ve set up a demo version on my staging website and it runs like a scalded dog. 🙂
You can download the files on Github.

Loading Pages with jQuery

In my quest for redneck perfection, I try to stay in a constant state of improvement, working and refining on my craft. One of my goals this year is to get better at coding in JavaScript. I started using JavaScript when Alta Vista was the top search engine and jumped on the JQuery train in 2006. But it’s never been my strongest tool and I want to get better I just started reading and doing the exercises for A Smarter Way to Learn JavaScript (so far so good). I’m lucky enough to be in a position to expand my skills and I get some JavaScript work from time to time and usually, they aren’t a big deal but this time I really struggled to get a dynamic image to load, if I had hair I was ready to pull it out.

I tried wrapping my script in every type of “$(document).ready(function()” I could think of even trying “(“#id-thats-loaded”).ready(function()”. Finally I learned that “(document).ready(function()” only fires when HTML is loaded and DOM is ready.

And using a “$(window).load(function()” fires when the complete page is fully loaded. After I wrapped the script in the “$(window).load(function()” it loaded the image like it was embedded in the page.

Thoughts on SquareSpace and WordPress

I just published 2 new websites, but you won’t see them in my portfolio. They aren’t original designs, so I don’t feel like I can take credit for them.

Over the years I’ve designed and developed websites using a gaggle of different content management systems. I’ve probably used WordPress more than any other CMS, but I just finished a project using Squarespace. Picking a template was easy enough, they have probably 25 nice looking templates. You can add custom CSS and Javascript easy enough and there’s a developer mode to really get under the hood. I didn’t use the developer mode, the store or even any Javascript so I can’t really comment on those things.

The website came together pretty fast, less than 100 lines of custom CSS to get the right look and feel and we were off and running. I would think
Squarespace would work great for someone wanting to get their feet wet with a new website. Check out the final SquareSpace website here.

The 2nd website was a redesign for a custom website I designed and coded in 2014. Revel Salon picked the theme from Theme Forest and asked me to set everything up.

Setup was pretty typical, I downloaded the theme and installed it. Getting the theme installed wasn’t bad, but If you are new to building websites, there’s going to be a learning curve. Once installed, there were a lot of options for the theme at the site and page level. And that might also be a little daunting for people unfamiliar with WordPress or content management systems in general. The website came together pretty fast, less than 100 lines of custom CSS here as well. Anyway check out the final WordPress website here.

A person with minimal skills could probably get a SquareSpace website off the ground and published relatively quick and I believe it would be easier than getting a WordPress website off the ground. For the control freaks like me, tinkerer’s, and those who just want to learn, it’s just hard to beat WordPress.

Making websites more accessible

I passed a blind lady this morning on the steps, navigating the stairs with her cane. It really struck me how much I take my health for granted. According to the US Census of the 291.1 million people in the 2005 population of the United States, 54.4 million, or 18.7 percent, reported some level of disability.

There’s a good chance that some of our website visitors may have some form of disability, with that in mind I try to make sure sites I design meet the Web Content Accessibility Guidelines (WCAG) 2.0. Some of the tools I use to check accessibility are.

I try to be empathetic in design since I was born with Protanopia, doesn’t that sound awful? It’s not really that bad I’m just red-green color blind and with me being a designer, I guess it’s kind of weird. You will notice I always use a limited palette and for new colors, I will use color tools. I’m pretty safe designing when using a computer, just don’t ask me to paint using traditional tools, my paintings always come out looking like mud:)

Sharing local files

When starting a new project I’ll usually set up a domain on my localhost something like “new-project.local”. However, it presents a problem when trying to show your work to clients, either you publish to a live website or you can use this cool tool with a funky name NGROK.

Just drop the NGROK file in your folder, and type a few commands and bam, your localhost has a public address — something like “https://random-string.ngrok.io” that you can show the world, keep in mind your computer needs to be up and running for them to see. So if you send them a link be sure to tell them it’s temporary.

I’ve also just started playing with code-kit it looks promising and has some great features built in like compiling SASS and JavaScript and external addresses for sharing.

Putting Your CSS Framework On A Diet

I’ve worked on a couple of projects now that use Bootstrap. I like Bootstrap for prototyping, it’s quick and easy. However, I don’t care for the weight especially in public facing projects. Analyzing one Bootstrap project that I’m putting on a diet has a final stylesheet of 150k and over 3,000 unused classes (ouch).

Mobile users and users in rural areas with poor internet connections may be clients and customers. Getting users content delivered fast is crucial, well if you want to stay competitive. I believe speed is king and a couple of tools I’ve started investigating to speed up the projects are…

PurifyCSS and UnCSS, both of these tools are used with a task runner like gulp or grunt their basic mission is to strip out all unused classes. I’m not real clear about the dynamic classes yet. I guess this is another reason to prefix classes tied to JavaScript with “js-” or hey target the data-” attribute instead. Regardless I’m hoping one of these will slim the CSS down.

I am the ScrumMaster… koo, koo, cachoo

It’s official, I am a ScrumMaster! My “official name” (the one usually only mentioned when I’m in trouble or buying a house) is even on the Scrum Alliance website.

I’ve been working in an agile environment for over a year now and while it might not be the right tool for every project,
it has a lot of great aspects. If you aren’t familiar with Scrum, here’s a brief introduction or my “Fitz Notes”.

Scrum is a just a way to get things done. There are 3 primary roles on a Scrum team, and everyone is considered an equal stakeholder.

  • Scrum Team – people in the trenches working on the project (usually no more than 9 or 10).
  • Product Owner – The liaison between the Scrum Team and stakeholders.
  • ScrumMaster – helps the team constantly improve by facilitating meetings, and helping remove impediments.

Projects are time-boxed and developed in “Sprints” and can vary in length (we work in 2-week sprints). Each Sprint the team works to build a “potentially” shippable product increment. We use a Scrum board (we use JIRA) to track task and progress for each Sprint.

The task are discussed in a Sprint Planning Meeting before each sprint by ALL the stakeholders. Each member discusses the project and the task in a quick-never-more-than-15-minute daily meeting during the Sprint. There’s a “Sprint Review” meeting at the end of each sprint for the team to discuss and demonstrate the work that was completed during the sprint and “Sprint Retrospective” meeting to find out what the team did well and how we can improve for the next Sprint. There’s a lot more to Scrum, but this is my redneck definition of the basics.

ScrumMasters aren’t really the team manager or boss. Their primary role is to work with the product owners to facilitate the Scrum Processes and remove any roadblocks for the team. I believe the simple mission of a good ScrumMaster is to try their best in making sure the team is effective and successful. My primary goal as the “ScrumMaster” is to be a “Servant Leader” to the team.