Posts Tagged: Web Design
Web Accessibility Evaluation Tool Code Snippets
Below are some code snippets to help resolve accessibility errors found using the WAVE accessibility evaluation tool. Remove redundant title text
1 2 3 | $('.slick-slide-inner-wrapper img, .hs_cos_wrapper_type_logo img, .hs-image-widget').removeAttr("title"); |
1 2 3 4 5 | window.addEventListener('load', function() { $('.cta_button').removeAttr("title"); }) |
Empty links used for javascript behavior like dropdown menus
1 2 3 4 5 | $('.hs-menu-item a[href="javascript:;"]').each(function() { $(this).prepend('<span class="sr-only">child menu</span>'); }); |
.sr-only CSS class to help bring meaning to visual elements like icons
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | .sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; /* 2 */ height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; /* 3 */ font-size:18px; } /* Use in conjunction with .sr-only to only display content when it's focused. @note Useful for skip links @see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 @note Based on a HTML5 Boilerplate technique, included in Bootstrap @note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver @author Sylvain Pigeard @see https://github.com/twbs/bootstrap/issues/20732 */ .sr-only-focusable:focus, .sr-only-focusable:active { clip: auto !important; -webkit-clip-path: none !important; clip-path: none !important; height: auto !important; margin: auto !important; overflow: visible !important; width: auto !important; white-space: normal !important; } |
Category: Code Snippets
What are Some Questions to Ask a Client Before Building Their Website?
Before creating an estimate or project proposal, it is extremely important to know the business objectives of client. Website’s are a dime a dozen, but a lead generating website is a rare jewel. These websites are more strategic and help your client generate new business. Below is a list of common questions I ask in… Read more »
Category: Common Questions
How to Fire a jQuery Function When the Page is Loaded and Resized
When building responsive websites you often want to run a script when the page loads. But when you resize the window the layout breaks. You can use the on method to run your code if the page loads or has been resized.
1 2 3 4 5 6 7 | // run on page load and when the window is resized $(window).on("load resize",function(e){ console.log("adjust layout"); $('.page-header').matchHeight(".target"); }); |
Source
Category: Code Snippets
How to Visually See What Your jQuery Selection is Selecting
I was recently working on form validation and wanted to mark a.form-group as successful if it contained a particular icon inside the label. The icon was set using PHP depending if the data existed in the database. I was writing .prev() and .parent() to try and select the wrapping .form-group but it wasn’t working and… Read more »
Category: Code Snippets / Tutorials
How to Create a List of Urls and Meta Titles from a Domain
I was working on a site migration and I needed to create an excel spreadsheet of all of the urls, page titles, and meta description. This document would then be shared with the copywriters to work on editing the page copy. I found some nice online tools to make this process easy. Step 1: Generate… Read more »
Category: Tutorials
What are the Open Sans CSS Font Weights?
I often want to use different font weights for Open Sans and so am adding them here for quick reference later. Open Sans light font-weight: 300; regular font-weight: 400; semi-bold font-weight: 600; bold font-weight: 700; extra-bold font-weight: 800;
Category: Common Questions
How to Add a Featured Tag with Text Over an Image
In this tutorial I will show you how to place a featured tag over an image using CSS3 ::before pseudo elements. A common use case for this is eCommerce where you might want to visually show a product is featured, on sale, or out of stock. Since your products are displayed dynamically using a database,… Read more »
Category: Tutorials
My 7 Tips for Learning the Artistic Side of Web Design
This is a great question and something I have been thinking a lot about. Especially in how to teach this skill online vs a classroom setting. If I had to pick four important factors to becoming a good designer they would be. Pencil sketch before moving to the computer Sketch a lot of thumbnails with… Read more »
Category: Articles
HTML5 Responsive Autoplay Video Code Snippet
In order to make your HTML5 video responsive you will need to add the following CSS style properties: width: 100%, and max-height: 100%.
1 2 3 4 5 | <video style="width: 100%; max-height: 100%;" autoplay="autoplay" width="300" height="150"> <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" /> Your browser does not support the video tag.</video> |
Category: Code Snippets
How do I design and build a website?
Building a website is one of the greatest experiences. It is a convergence of creativity, technology, and service. So congratulations on embarking on the journey. Below is a very high level look at the 3 major steps. If you have questions, please let me know. Creativity Before you start building you need a plan and… Read more »
Category: Common Questions