liquidfish current en-US daily 1 Now Loading: Your SEO Rankings Wed, 07 Feb 18 14:44:04 -0600 We recently encountered an issue with Google AdWords being rejected on an existing site. After A LOT of digging and troubleshooting, we found that speed was the issue. The site was loading at an average of 12.5 seconds, with Uptrends, and Google PageSpeed Insights ranked it at an abysmal 20/42 mobile/desktop optimization rating. We knew what we had to do, but in the process, I thought it would be awesome to get some statistics along the way:

Style sheets and JavaScript Minification

Definition: The process of removing all unnecessary characters from source code without changing its functionality (Formatting, Whitespaces, etc.)

The first step was to make sure all files were minified and any unnecessary references were removed or relocated. Smaller, minified files result in faster response times and a better UX. After a few tweaks my speed tests were the following:
Base Test: 12.5s
After Minification: 12.2s

PageSpeed Insights
Base Test: 20/42
After Minification: 31/55

Not a bad improvement…

Image compression

Definition: Type of data compression applied to digital images, to reduce their cost for storage or transmission.

Sliders are the enemy. Your typical slider has about 4-6 slides and probably has a CSS and JavaScript library. This really cool feature on almost EVERY SITE can introduce a host of problems. Each one of our images was about 290 KB. After using some of my mad Photoshop skills, I was able to get each of the files down to about 70 KB with almost no noticeable difference in image quality.
Base Test: 12.5s
After Minification: 12.2s
After Compression: 11.5s

PageSpeed Insights
Base Test: 20/42
After Minification: 31/55
After Compression: 36/58

Still not very fast…

Lazy loading

Definition: The process of not instantiating an object until the point of request

I could’ve focused more on the front end, but I knew we weren’t proceeding by leaps and bounds. My personal philosophy is to have an interesting landing page that doesn’t do much except take you to other pages that do the work. The homepage of this site required numerous database queries and a lot of other logic. The only thing I could think to do was incorporate some lazy loading (think about Pinterest or Facebook not loading new posts/images until you scroll to the bottom). The results were astounding:
Base Test: 12.5s
After Minification: 12.2s
After Compression: 11.5s
Lazy Loading: 0.9s

PageSpeed Insights
Base Test: 20/42
After Minification: 31/55
After Compression: 36/58
Lazy Loading: 80/72

The takeaway: Incorporating one or two of these things in your site may help, but to get the best results, we need to focus on all or even more. Google announced that mobile page speeds are now a ranking factor for mobile searches so page responsiveness is more important than ever.

liquidfish Goes to Dallas Wed, 31 Jan 18 15:44:31 -0600 Culture is a huge part of liquidfish because it’s what makes us who we are and unique in our industry! We’re weird and quirky and wouldn’t have it any other way. Culture is part of our everyday work, and we try to build on our sense of community and camaraderie through various teambuilding activities throughout the year. This is also crucial for new hires. Since culture is such a big part of what we do, we believe it’s essential to introduce and immerse new members of our team into this important piece of our company. So, we make it a point to spend time together off the clock and out of the office.  

A few weeks ago, we took a team-building trip to Dallas. We all piled in a charter bus and set off to get to know each other better through brute strength and culinary skills. Our first exercise was axe throwing! We split up into teams and created our best axe throwing names (i.e., “Sliver Me Timber, Axeident Prone, Axel Rose, Twigger Happy). On top of being an absolute blast, it took us out of our comfort zone and introduced us to something none of us had ever done before. Needless to say, all of us learned some new badaxe skills.

Our second and more delicious activity was Team Building with Taste. We split into teams and competed in a mystery box dinner challenge. We rolled meatballs, fried tostadas, assembled tacos, and grilled chicken. It was fun to use skills we use in the office, like strategic planning, communication, and developing (flavors), but in a different, much tastier way!

We ended the night out downtown, winding down after a long day. Building a strong team based on trust and communication is essential to the success of any company; luckily, there are so many new and interesting team-building activities that companies can do this while having fun and keeping things interesting.




21 Things You May Not Know About liquidfish Thu, 11 Jan 18 14:17:27 -0600
  • In 2017, we worked with 161 different clients.
  • We worked in real-time messaging, push, mobile apis, flexbox, vue, webpack, npm, xamarin, hardware acceleration on front-end transitions, hung around the SPA, CQRS, MVC, .NET Core, .NET  Framework 4.6.2, redis, queues, azure, aws, EC2, RDS, NAT Gateway, Beanstalk, Custom Platforms, Security Groups, Firewalls, text messaging, algolia, push woosh, PayPal, Stripe, horizon, laravel, ADA WCAG 2.0 A AA & AAA, Hubspot, Visual Studio, PHPStorm, git, Sequel Pro, slack, MySQL, Aurora, DNN, Sublime Text, Visual Studio Code, migrations, node, xdebug, mongo, utf-8, postman, paw, Creative Cloud, VirtualBox, vagrant, USAePay, Heartland, Parallels, Android, iOS, native apps, C#, PHP 7, javascript, Java, Swift, Objective-C, IIS, nginx, SQL Server, SES, wordpress, forge, bash, CORS, XSS, PCI, CSP, cloudflare and many others.
  • Originally named Red Brick Designs LLC, I rebranded the company as liquidfish in 2010 because I absolutely love the ocean and thought it was a cool and memorable name for the company.
  • In 2011, I hired our first employee; today, we have 21.
  • We have a 2 beer taps, 4 pinball machines, 2 dart boards, 1 shuffleboard table, and 1 pool table in our office!
  • At our first Addy Awards (2013), we won the "Best of Interactive" award.
  • We work with 2 of the NBA’s finest: Kevin Durant and Blake Griffin.
  • Collectively, our team can speak 7 different languages.
  • Our team has 16 iPhones vs 5 Androids.
  • We built a device lab in 2015 for cross-browser/device testing that consists of a 16 device and OS combinations.
  • In 2017, we designed and developed 30 100% custom websites and applications.
  • We currently host 142 websites for clients in 18 countries and 5 continents.
  • We have an amazing saltwater aquarium.
  • I personally took 41 roundtrip flights last year for work-related travel.
  • We’ve taken 4 trips as an entire company to: 
    - Vegas (2012)
    - Denver (2013) 
    - Chicago (2015)
    - Dallas (2018)
  • Our offices are in our original location, which we’ve expanded 5 times. 
  • We put up our first outdoor sign just 4 months ago in October of 2017.
  • Our intra-company thermostat battles for heat/air are epic.
  • We live by our core values:
    - Authenticity
    - Respect
    - Craftsmanship
    - Ingenuity
    - Collaboration
  • We’ve been in OKC’s top 50 fastest growing businesses for 3 consecutive years.
  • Our vision: A nationally recognized brand comprised of passionate designers, developers, and marketers known for setting trends by merging technology and creativity.

    End-of-Year Highlight 2017 Thu, 28 Dec 17 13:44:32 -0600 It’s always fun to look back on our year and reflect on all that happened. We’re able to see how we grew, what we learned, and how we can set goals for next year. I wanted to pull some statistics that help sum up 2017 for liquidfish and that will help spur us to be bigger and better in 2018!

    Doin’ Work

    • More than 1000 projects spanning website design, development, web updates, branding, SEO, social, newsletters, and blogs
    • Launched 18 new websites
    • Worked with more than 150 clients
    • More than 36,000 hours worked
    • Extended client base in LA, NYC, Houston, Dallas, Denver and of course OKC


    • 396 donuts from Brown’s Bakery 
    • 720 slices of pizza from Hideaway, Empire and the Wedge
    • 3240 cups of coffee, not including trips to Starbucks, Leaf + Bean and All About Cha
    • 365 days of construction around our office (yay, streetcar!)
    • 1 parking lot remodeled
    • 1379 games of pinball

    Growing Our Fish Family

    • 7 new employees
    • 2 marriages
    • 2 engagements
    • 2 babies

    We have achieved so much this year as a company, and we couldn’t do it without our amazing clients. Thank you for challenging and inspiring us to work harder and dream bigger!

    OKC’s Top 10 Festive Spots Wed, 13 Dec 17 13:04:34 -0600 Snow Tube at LifeShare Winterfest

    Just in time for the holidays, the Chickasaw Bricktown Ballpark is fully transformed into the North Pole, complete with two wonderful man-made snow slopes to excite and exhilarate riders of all ages. All snow tubing sessions last for 2 hours, and we’re willing to guarantee that you’ll enjoy every second of sledding with your pals. 

    Grab Your Skates for the Devon Ice Rink at Myriad Gardens

    This classic family favorite returns for its 8th season in the Myriad Botanical Gardens all the way through late January. Enjoy the brisk weather with outdoor ice skating seven days a week for public skating and special events (like a Christmas DJ!) all winter long. This is great news if you want to book a private event! Visit for their full schedule. 

    Lights on Broadway (Automobile Alley Light Display)

    Grab the whole family and pile in the car, right now. Pack some hot chocolate with extra marshmallows and cruise down historic Automobile Alley for the ever-growing Lights on Broadway between NW 4th and 10th Streets. See your favorite retail shops like Coffee Slingers, Cultivar Mexican Kitchen, and Plenty Mercantile come to life with dazzling window displays and take in the nostalgic painted signs in a new way!

    Check Your List Twice at the Holiday Pop-up Shops at Midtown

    The Holiday Pop-Up Shops are back in Midtown for their 6th year! Shop for everyone on your list with 45 locally owned shops like Blue Seven, The Okay See, and Shop Good. Next door, pick this year’s Christmas tree with proceeds benefiting Bishop John Carroll Catholic Cathedral School. The shops rotate weekly, so make sure to stop by several times! With food trucks like The Saucee Sicilian and hot chocolate + treats served by Katiebug’s, there is something jolly to fill everyone’s stocking. Entry is free, shopping is encouraged. 

    Dazzle at the Nutcracker at Civic Center

    If you live for the holiday classics, a trip to the Civic Center Music Hall for The Nutcracker makes the perfect date night or surprise gift for your loved one or best friend. The Oklahoma City Ballet’s flawless dancers are joined with over 100 adorable children from The School of Oklahoma City Ballet as well as the Oklahoma City Philharmonic for a dreamlike production, whether you come for the ballet or simply to experience the holidays coming to life in front of your eyes.

    Celebrate Christmas in the Park

    It’s the happiest time of the year, otherwise known as the Yukon Lights Display. Drive along nearly three miles of magical wonderland where you’ll see over 425 one-of-a-kind twinkling Christmas displays. Cruise over 100 park acres or enjoy over 2 miles of walking trails on foot. Don’t be surprised if you witness Christmas characters like Santa and his elves along the way. Hop aboard the Santa Express Train between 6 and 10pm for only $2. 

    All Aboard for the Bricktown Canal LightsDisplay

    Stroll down and enjoy dinner at Zio’s Italian Kitchen or Knuck’s Wheelhouse along a view that’s as festive as it is romantic at the Bricktown Canal Lights Display. All aboard the Free Holiday Water Taxi Rides free of charge, just hop on below the entrance to Mickey Mantle’s Steakhouse. Each trip lasts between 20-30 minutes, and will point out every glittering light on the beautifully adorned Bricktown Canal.

    Enjoy the Many Merry Myriad Gardens Holiday Events

    Brace yourself: this jam-packed lineup is sure to be a major holiday hit. The Myriad Gardens glow well into the Christmas season with thousands of lights in the Crystal Bridge and outside. Our absolute must-see is the OG&E Merry and Bright tradition, with free admission on Sunday evenings to the tropical conservatory. Don’t miss the holiday lights and special plant exhibits that you can only catch during the holiday season.

    Spend Your (Devon) Saturdays with Santa

    A family favorite returns to the Devon Energy Center on December 16th. Bring the kids to visit the jolliest man of them all, Santa Claus himself. His elf friends will be joining him making crafts, riding trains, and playing live music. Don’t forget to pack your camera and snap lots of pictures of the kids with Santa. 

    Travel Down to Chickasha Festival of Light (and sing to Christmas carols the whole way!)

    We’ve been saving the very best for last. If you’re determined to get into the Christmas spirit, we recommend heading down to the annual Chickasha Festival of Light, where even the biggest Ebenezer Scrooge will forget what the ‘bah humbug’ was all about. The views are second to none, and the live nativity scene brings back the Christmas of old. Children can feed and pet all the friendly animals, and the glowing bridge makes the perfect photo-opp for that family Christmas card you forgot about… until now.

    The Thank Tank 2017 Wed, 22 Nov 17 10:39:48 -0600 As a mom, I try to teach my kids to be grateful all year. Each day we chat about something they’re thankful for and their responses often take me by surprise. I’ve heard things like, “my toes!”, “my comfortable pillow”, and my favorite: “that we live on Earth because if we lived on Jupiter we’d die”.

    Since I’m the only mom at liquidfish, I wanted to ask our team the same question. It’s clear from their responses that 2017 has been a great year! 

    This year, liquidfish received several awards and experienced a lot of exciting events. 

    3 Gold ADDY Awards
    4 Silver ADDY Awards
    2 Bronze ADDY Awards

    liquidfish was named a Metro 50 award winner for the 3rd year in a row. ⠀⠀⠀⠀⠀⠀⠀

    Eight employees joined our team: 
    Chris T.

    Two fish celebrated their weddings:
    Maddy married Josh Morgan
    Amanda married Joe Muenzer 

    Two fish got engaged:
    Moriah to Hayden 
    Chris T. to Sam

    Two fish became parents:
    Chris T. became a dad to baby Daxton
    Christopher L. became a dad to baby Ava 

    And, we (FINALLY!) made our mark on Bricktown with our new exterior sign! 

    Without further ado, here’s what members of our team are thankful for this year: 

    Katylee (Account Executive) -
    I am thankful for my loving family, my sweet husband, my adorable dog Penny, and fun, loving coworkers who push me to be better each day!

    Christina (Copywriter) -
    I'm thankful for my beautiful Lady Fish friends, dance parties, sangria, yoga, and traveling the world with my amazing husband.

    Chris T (Developer) -  
    This year I'm thankful for my son, his mother, our engagement, our families and friends, this great job, and streaming videos services because I would not be able to watch TV of my choosing otherwise, not with my busy life.

    Maddy (Project Coordinator) -  
    I'm thankful for my new husband and easier last name, my supportive family and friends, my dog Indy, and all the different ways you can eat potatoes.

    Jonathan (SEO) - 
    air conditioning
    caffeinated tea
    the miracle of flight
    Goro Ramen & Izakaya
    robot vacuums
    the cold seasons
    headphones that go loud
    hot sauce
    clean sheets
    crab meat with or without Old Bay seasoning
    Old Bay seasoning
    that good-good
    NVIDIA products 
    I don't have friends, I got family

    Erin (Executive Assistant) -  
    I'm thankful for OKC for being an amazing home to me these past 11 months (and for my boyfriend and his family who made it easy for me to call home since the day I arrived). For Snapchat and FaceTime for letting me feel like I'm in the same room as all my family and friends who are spread out all over the country. For working at a place where the hold music is EDM, bean bags are a normal seating option for meetings, and at any time you can find people attempting yoga poses on the floor, playing pinball, or just chatting. Oh, and working. Last but not least, I am thankful for the two fish that have survived in the fish tank next to my desk (RIP Dory and Marlin)

    Cody (President) -  
    My children, friendships, the ability to discern if those friendships are genuine, music, football, basketball, that baseball season is over, cheeseburgers, scotch, parents, brother, good health, good wine, a good team, good clients, Jesus, airplanes, love, guitars, drums, calendars, live television, and exotic animals.

    Amanda (Social Media) - 
    This year, a lot happened. The Astros won the World Series! (go home team, that’s my home team!) and I got married! Honestly, I’m all out of sap because the wedding has wiped me out. But I am extremely thankful for this life God has blessed me with. I’m healthy, my family is healthy, I have a home that’s full of love, and a husband who is God’s greatest gift to me. I’m blessed.

    Moriah (Social Media) - 
    I'm thankful for this new gig and my financé and holiday trips home to visit all my family! I’m also very thankful for Braum’s Mint Chocolate Chip ice cream. 

    Grant (Developer) -  
    I’m thankful for all the serial killer and alien documentaries on Netflix.

    Wendy (Social Media) -  
    Jesus, coffee, my husband and children, family and friends, ice cream, Saturdays, Spanx, freedom, cheeseburgers, electricity, and corrective lenses. 

    Christopher L (Designer) - 
    I am thankful for my family, health, and job. 

    Andrii (Developer) -  
    Thanks to my parents, who believe in me, and gave me a big support when I first left Ukraine. 
    This year I want to say thanks to China, the country where I spent 20% of my life, got my degree and found my wife! 
    I am thankful to my wife and her parents for supporting me for my Green Card and starting life in the US.
    Thankful to liquidfish for letting me on board so fast, and every employee here who are very friendly to me. 
    I want to say thanks to Liberty Tax for free teaching of US tax system. 
    Thankful to my wife for correcting my English mistakes, also taking care of my parents while they visited us in China. 

    Robbie (Designer) -  
    I am thankful for my amazing wife and my son. 

    Mikhael (Developer) -  
    I am thankful for my family, who raise my spirits and remind me that it's okay to just be yourself.

    Billy (Developer) -  
    I'm thankful for my wife for putting up with me always thinking about work and making me a better person, my awesome daughter who is more than I could have every asked for, my family, my co-workers, Sobe, Quake, vision, hearing and most importantly the Bible and creator of the universe.

    Happy Thanksgiving! 

    Limitations and Accessibility on the Web Wed, 15 Nov 17 09:12:31 -0600 In the early days of the internet, everything was text. I wasn’t there; I didn’t really start using the internet until well after the advent of the Web, though before we had good search. But my father made use of, even moderated, Usenet messaging boards (think forums you subscribe to via your internet provider), and he communicated with people in many different situations. Relevant to this article, I recall his mention of having talked with a woman who used a Braille display; a device which displays text in the bumpy writing system accessible to the visually impaired. That system had some advantages when all it had to deal with was text, but don’t take that to mean we haven’t made improvements since then; we just have to be careful now to make our non-text media more available.

    Consider the different ways in which people may be limited in their use of computers. There’s visual impairment, which includes full blindness as well as partial vision such as color blindness, blurriness, and other issues. In truth, the eye is a delicate organ capable of many unusual problems when it falls outside the normal configuration. We rely so heavily on vision for interfacing with computers, you may have never considered what it takes to make use of one if your vision were more limited.

    Then you have an audio impairment, such as full deafness, limited ranges of hearing, and also central processing loss, which when you hear the sounds just fine but your brain isn’t so good at resolving it into the meanings of language. This is where closed captioning on videos and audio transcripts become very important.

    Consider also, limitations in someone’s ability to interact with timed events, limits on their ability to use a mouse, brain issues such as dyslexia which may make input difficult. Even people with normal abilities may find an auto-rotating slider/carousel difficult to use. We humans are an incredibly varied lot, and while there’s a lot of things we consider normal, with seven billion people and counting there’s no small number of people who are outside the normal range of ability in some way or other. Accessibility is all about making your content available to more people who have some barrier to interacting with it typical ways.

    In the United States, we have the Americans with Disabilities Act standards for Accessible Design, which specifies requirements for public accommodations. But even if you don’t have to meet ADA requirements, you may want to make your content more accessible. And there are some simple ways you can make that happen.

    Images are an important part of most web pages; logos, decorative images, headers, photos... we like our images. But someone who uses a screen reader or a braille display won’t be able to see them. Rather, by default, a screen reader will tell the user that there is an image, and what the filename is. You’re probably familiar with Alt Text, the alt property of the HTML img tag provides text to use if an image cannot be loaded or must be treated as text, instead of reading the filename. So your site logo would have alt=”Your Site Name”, but specifically would not have alt=”logo for Your Site” because it’s not really important that it’s an image, is it? But what you may not know is when not to use Alt text. While you should have text on every link, and representing all your content, purely decorative images do not need Alt text; instead, the image should be made a background so that screen readers ignore it completely. This is a little more complicated than a regular image, and unfortunately, most visual page editors don’t make it any easier. But you can add images through styles which are ignored by screen readers. One example of such would be, instead of <img src=”/path/to/image.jpg” alt=”alternate text”> you can use: 

    <div style=”background-image:url(/path/to/image.jpg);
        height:100px; width:100px;”>

    Note that in this case, you will need to specify the size of the image. You can use this technique when the content of the image is already in text on the page, such as a decorative image on a link that also has text or a photo of a person with their name right below it.

    Then there’s the opposite case, where you want to display text on an element which does not normally allow for alt text. In this case, you can use a technique of visually hiding text. Again using styles, you might add something like this under a video:

    <div style=”height: 0;
        width: 0;
        overflow: hidden;
        position: absolute;”>
            Transcript or link to a transcript of the video

    And of course, a CSS class can be used if you’ll be making much use of that technique, so you could instead use <div class=”visually-hidden”>Hidden content</div>. A screen reader will still find this text and read it out, but someone looking at the page won’t see it.

    These are just a couple techniques which can make your content more useful to someone who can’t make use of it how you’d expect, and that’s really what accessibility is all about: considering the ways people may be interacting with your content and making the end user experience a good one.

    The 5 Spookiest Things for a Digital Marketing Agency Tue, 31 Oct 17 11:17:20 -0500
  • Spotty Wi-Fi
    When the majority, if not all, of your day-to-day work revolves around the internet, having a spotty connection can be downright frightening. Did my email send? Am I missing comments on my Facebook post? When can I push these website changes live? A strong and steady internet connection is more reassuring than a bag of garlic in a vampire lair. 
  • Website Without an SSL Certificate 
    Submitting information on a non-secure website (HTTP vs. HTTPS) puts your personal information at risk. It’s almost as freaky as a heavy breather calling and asking “What’s your SSN?”. Upgrading to HTTPS gives your site security and legitimacy and makes Google trust your site! 
  • The 2nd Page of Google
    Speaking of SEO rankings, the 2nd page of Google is like the haunted mansion down the abandoned road – no one goes there intentionally! On-site optimization keeps your future customers from finding themselves in a bad spot (your competitors’ websites) and elevates your site to the first page of search results. 
  • Comic Sans & Papyrus
    Fonts that are overused can haunt you. People still resurrect fonts like Comic Sans and Papyrus, refusing to let them pass on to the design afterlife. As a company, we’re always looking for new and inventive ways to display your content in a fresh, visually appealing way. So if you have outdated and lifeless designs lingering around, who ya gonna call? (liquidfish!)
  • Clowns
    Because those are scary no matter what! 

    Aim Higher, Grow Faster Wed, 04 Oct 17 10:07:57 -0500 As I write this, liquidfish’s owner and president, Cody, is attending the Metro 50 Awards Dinner. The Metro 50 is a list created by the Greater Oklahoma City Chamber featuring the top 50 fastest growing privately owned companies in the Oklahoma City metro area. This is our third year being included on this list, so in honor of that achievement, I want to write a little about the culture of high expectations and learning here at liquidfish that I believe is the reason we’ve been able to grow so much for this long.

    When you start something new, there’s usually an expectation that things are going to go as planned. You decide to renovate a fixer upper by yourself and are confident you’re going to be the next Chip and Joanna Gaines. That’s just how we function as humans: if we knew the house had foundational problems, or that it was going to snow the day after we started demolition, we might not have started work at all. 

    High expectations happen here at liquidfish too. We start every project with a vision, and that vision is perfect in our eyes: the clients love the ideas and designs first time around, development goes as planned, and we get it all done a week early to boot. We aim high.

    But when a seemingly unavoidable wrench (e.g. five people getting sick in the same week – get your flu shots, kids!) is thrown into that timeline, it’s time to bring some perspective into the mix and realize that just because things might not be going exactly to plan, it doesn’t mean failure. It’s words like progress and learning that help us see the big picture and grow.

    In my time at liquidfish, I have seen so much progress. Just a small example of this is the work we have put into refining our process. The team here has been working tirelessly on improving the project lifecycle process to increase efficiency, reduce problems and miscommunication, and strengthen the quality of our work overall. We use every project as a stepping stone for growth, going over in detail what we did right and what we could do better next time. We have implemented the good ideas and solutions to problems in a structured way for future projects. 

    All of these tweaks and improvements to our process have produced advancements in many different areas at liquidfish, from client communications to development. This progress is due in large part to the overwhelming desire and willingness of everyone at liquidfish to learn. One of our core values here at liquidfish is craftsmanship. We define that as, “Finding unique solutions to every challenge and continually improving ourselves, our work and our industry.” This continual improvement comes from our ability to turn any challenge into a learning opportunity. We come out on the other side smarter and ready to use that knowledge to improve our work and better serve our clients.

    Although we may feel annoyed or upset when problems arise and get in the way of our perfect plan, it’s important to keep the big picture in mind. Every obstacle is an opportunity, and working toward overcoming those in every new project might be the reason we’ve landed ourselves on the Metro 50 list for the third year in a row!

    Accessibility Essentials: Menus Wed, 20 Sep 17 09:11:11 -0500 If you are blessed with great vision and motor skills and aren’t familiar with the concepts of accessibility, first, be thankful, second, try to traverse a website using a screen reader like VoiceOver. It will give you a whole new perspective.

    One of the most fundamental aspects of a website is its navigation. Let's take a look at how to tackle the basics of making a website navigation accessible.

    If you start with the following navigation markup:

    <nav id="navigation">
    	<a href="/">Home</a>
    	<a href=“/about”>About</a>
    	<a href=“/contact”>Content</a>

    You would have an accessible navigation.

    Let’s face it though, most websites out there do not have a markup that simple. Designs are complicated and require complex structures. The more intricate the markup is for a website, the more thoughtful and detailed the accessibility features have to be.

    If you use a screen reader on a website that hasn’t been designed with accessibility at the forefront, you will notice that it will begin to repeat things like the navigation. Who has time for that? No one wants to listen to someone repeat something a thousand times. To fix this, we need to use something called “Skip Navigation” links, or skip links.

    The markup for skip links may look something like this:

    <nav id="skip-links">
        <a href="#content">Skip to Content</a>
        <a href="#navigation">Go to Navigation</a>
        <a href="#footer">Skip to Footer</a>

    Preferably, the skip links should be one of the first items that screen readers hear. This means it should be very close to the opening of the body tag.

    An approach that liquidfish uses is visually hiding the skip links at first, then on keyboard focus the links are given a transition to animate on screen (they can animate off if the keyboard isn’t used for a while). This transition allows the user to “tab” into the links and take advantage of them.

    This method seems to work well for sighted mouse users who do not see the link, screen readers who will hear the link, and sighted keyboard users who will see the link when they navigate to it.

    So, now that we have our skip links, we need to associate the related markup via IDs mapped to the hrefs. Here we reference the page content with the content ID:

    <div id="content">
    	<p>We're taking the Hobbits to Isengard.</p>

    These links allow the user to skip to the content they are interested in without having to waste time with repetitive information.

    There are several more considerations for an accessible navigation including font size, contrast, and other styling issues.

    If you would like have website audited for accessibility or to learn more about increasing your site’s accessibility or ADA regulations, please reach out to liquidfish!