When we build image cards, sections, and everything in between, we try our best to stay away from background images. Background images have a few issues when it comes to page speed. Background images use the maximum size image as it's not pulled from the media library.
We take the time to create absolutely positioned images that act and feel like background images. These image are pulled from the Media Library. This provides us the benefit of using alt tags that we assign to provide additional SEO benefit. But from a page speed stand point. Images pulled from the Media Library are assigned based on the viewport screen size.
Because we are using oxygens Media Library to call images, the images are pulled based on the screen size. This is huge for mobile devices. Why load the 1200px or 1600px version of an image when all you need is 300px. By using the Media Library in oxygen rather than the media url, we take advantage of the ability to pull images that have sizes that correspond the the viewport.
Mobile Traffic is a large part of web users these days. This percentage is only growing by the year. We need to honor the mobile users by ensuring that we only call the image sizes required for a quality user experience. Most mobile devices are on cellular data and therefore don't have the fast, powerful internet that we expect from our home and office routers. By calling smaller images we reduce the load time on page and therefore keep users engaged for longer.
Let's make sure we use every trick in the book for our clients. Keeping users on the page and engaged can only happen if they don't leave because our site won't load. Page speed increases are a key to keeping our ranking up on google. Let's face it, we don't need to our run the bear, just the people in the race next to us. If we can do small things to keep up above our competitors, we will have an edge on our competition.
All of our design sets are search engine optimized. I build image cards the right way. The use of background images is a thing of the past. We use absolutely positioned images to provide the same user experience as a conventional background image. Why? To get the benefit of SEO and page speed. When you call an image from the media library, the image get to use the benefit of its alt tag. Background images do not use alt tags as they are embedded in the CSS.
Image alt tags provide SEO benefits by giving meta data to an image. Images are only as good as its surrounding content. Why not get the added bonus of the alt tags you assigned when you added the images into the system. Every quality keyword counts.
A website should have 1 H1 tag at the top, then it can pull an H2 tag. All other heading tags should be h3 on the page unless nested then we can start using H4, H5, and H5 to provide a outline style nested structure for search engines to follow.
Most of my designs use H3 tags unless they are explicitly a hero image. In this way, we save tons of time not having to go back and change the tag type to H3, or H4. In the few occasions where the tags need to be H2, well, make the change manually.
It's much safer to have a ton of H3 tags on the page than to have a load of H1 tags.
Because this design set was born to help my agency to succeed. Every trick in the book is build in to my designs. I want the best for my clients and my team. With every passing year, I reevaluate and apply new techniques to my designs.
I hope you enjoy this design set ad much as I do.
Oxygen Builder is a wonderful tool. When I first discovered this template builder I was hooked. Easy website building and reusable elements made website creation fast and easy. I soon found myself wanting more designs and a better class system to keep my design teammates organized.
I searched for some solutions to my class issues and found OxyNinja. It's classes controlled everything from text size, spacing, responsive grid systems to global colors. With the additional of a lot of design sets, my development team went from a crawl to a run. Not only that, but they were delivering consistent results. Using classes meant that updating client websites was a breeze.
Even with the vast number of design sets that OxyNinja provides, I found that I was running into a wall. I wanted design sets that were based on dynamic content. My team was using MetaBox to product service, client logo, and FAQ pages. We needed a way to display these items in a consistent manner. I decided to build my out design set that piggy backed on OxyNinja's class system. In this way, I could provide additional design sets for use by my designers to keep things consistent yet offer enough variety to my address my clients needs.
With each new project that I take on. I find myself needed custom designs. I create new design sets to solve custom needs and user experiences. This allows my team access to these design sets for future builds. My designers can grab one of my design sets, change a few elements to customize it to a new project, and they are off and running.
Need a responsive modal form for a pup up button done. I spend the 1-2 hours once to design a custom template that we can lightly modify in the future. Now my team can add a responsive design section in minutes rather than hours.
This design set was created to solve my own agency problems. As a by product, the efficacy and accuracy of our designs skyrocketed. Now I offer this ever growing design library to you. If you want more custom designs, don't hesitate to draw me a napkin sketch or screen shot a competitors website. I love create new elements and section that we can all benefit from.
Kia`i Barretto
