WordPress database error: [Got error 28 from storage engine]SHOW FULL COLUMNS FROM `wp_options`
It’s frustrating spending hours crafting the perfect piece of content to have it barely get noticed.<\/p>\n
That time spent creating and editing feels like a waste because traffic remains stagnant. All-the-while competitors receiving great community reception for content pieces half the quality.<\/p>\n
The problem isn’t the content… it’s the front end optimization.<\/p>\n
There’s something preventing people from digging in and exploring. Something that Google doesn’t like so you’re ranking lower. What could it be?<\/p>\n
There are several elements of the front end that could make a difference. Which is why we’re coming at you with several hacks you can do right now.<\/p>\n
User experience is an encompassing area of design taking account of how users “feel” about their experience. It’s a process best outlined through Peter Morville’s user experience Honeycomb<\/a>.<\/p>\n The honeycomb attributes value if it’s:<\/p>\n This model allows the designer to consider all beneficial elements that work off another. It sets a baseline when acting on front end optimization efforts.<\/p>\n Let’s keep this mode of thinking in mind when making improvements with the following hacks:<\/p>\n Say what you want about bias but improving site uptime would provide the best return on investment if you’re short on time.<\/p>\n After all, what good are the design changes if the site isn’t online?<\/p>\n 40% of people will leave if a site takes longer than 2 seconds to load<\/a>. Combining great Web hosting, a CDN, and website monitoring removes this problem.<\/p>\n Take these three actions:<\/p>\n A great foundation (ie. uptime) will allow the other front end optimization hacks take full effect. Small changes make a big difference with the user experience.<\/p>\n A website becomes convoluted with code as updates and redesigns take effect over the years. Legacy code and plugins linger resulting in incompatibilities and slower page speeds<\/a>.<\/p>\n Here are a few, quick ways to improve the markup:<\/p>\n These back end changes will dictate the front end optimization. Faster load speeds and simpler markup lets you explore creative strategies that were hindered by frustrating code.<\/p>\n A study by the Nielsen Norman Group found users experiencing “click uncertainty<\/a>” due to flat UI elements.<\/p>\n The study paired eye-tracking software with modified versions several site pages and domains. The pages showed flat UI elements versus 3D elements.<\/p>\n The results found a lack of stimuli in the flat UI themes.<\/p>\n A flat UI may be easier to scan but the “click uncertainty” is preventing people from taking action because they don’t know what to do. Resulting in fewer conversions.<\/p>\n Try this: Bring back 3D call-to-actions in design elements and measure results against the recent site theme.<\/p>\n Generic stock photos are a cliche in modern web design.<\/p>\n We spend our time on online social platforms mingling with real people. We’ve become accustomed to seeing one another.<\/p>\n There’s an immediate “blindness” to stock photos when we see them. The NYT’s covered how we ignore generic photos<\/a> way back in 2010!<\/p>\n Instead, use a combination of:<\/p>\n Choose photos representative of your brand and offers.<\/p>\n Include illustrations and stylization with the photos to create punchy imagery.<\/p>\n Prefetching tells the browser to load elements before user interaction. This reduces page load speed when users navigate away from the page.<\/p>\n An easy way to enable prefetching is attributing links with the rel=”prefetch”.<\/p>\n Tools like Prerender.io creates a cache of JS files. The file is delivered to the browsers and search bots. The middleware reduces load speed resulting in a happy visitor and improved SEO.<\/p>\n Want to learn more? Take a look at CSS-Trick’s guide to prefetching, preloading, and prebrowsing<\/a>.<\/p>\n Reasons to design for mobile:<\/p>\n The limited “real estate” of a phone screen presents challenges in design.<\/p>\n Design for mobile first by:<\/p>\n A simple way to implement mobile-first design is by using website-to-app services such as Wix or Squarespace. These tools will take your existing site and convert it into a mobile-friendly design. Then, package it as an app!<\/p>\n The entire process of this conversion should take less than an afternoon. Minus minor tweaking and listing it in app stores.<\/p>\n A couple hundred extra bits of data can make all the difference in reducing page load speed. Reducing site graphics is easy with the help of file compression tools.<\/p>\n Want to compress images online?<\/p>\n Else, use a desktop application to make the tweaks:<\/p>\n These programs contain options to resample photos to keep image quality while reducing file size. In Photoshop, you will find this within the Image Dialog Box when sizing and saving the image.<\/p>\n Feeling lazy and use WordPress? Use the SmushIt plugin to automatically reduce image sizes while keeping the quality.<\/p>\n What works for one site may not work for another. These hacks may draw upon best practices and experimentation but you should use analytics to verify results.<\/p>\n Tools to help with measuring would include:<\/p>\n UserTesting.com (another great testing tool for our list) recommends an internal approach<\/a> to major design changes. Set benchmarks and test the new front end optimization features within a closed group before taking it live.<\/p>\n\n
1. Improving site uptime<\/h3>\n
\n
2. Cleaning up the markup<\/h3>\n
\n
3. Bringing back embossed<\/h3>\n
4. Ditching the stock<\/h3>\n
\n
5. Using prefetching<\/h3>\n
6. Going mobile first<\/h3>\n
\n
\n
7. Compressing graphics<\/h3>\n
\n
\n
Experimental Hacks and Measurable Results<\/h2>\n
\n
Hungry for more Hacks?<\/h2>\n