Here’s a rough draft of steps to troubleshoot a website problem.
You might need to go back and repeat a step more than once. For example, you can be on step 3 and need to go back to step 1 to ask more questions and update the problem description.
You should be able to describe the problem. Your problem description must include steps for reproducing the issue.
What the customer needs isn’t always what they say. You need a sixth sense to read between the lines and ask precise questions.
Skills you need:
What we need to know:
Prerequisites:
Skills you need:
By the end of this step, you might not know the exact root cause, but you are in an excellent place to test a fix or workaround.
Take this example: On all of the admin pages, we see a notification message that tells us to click a button, but we don’t see any.
TO DO: narrowing down, pruning, and getting rid of things that don’t contribute
TO DO
TO DO
TO DO
What is flex?
Flex is short for flexbox. Flexbox is short for the Flexible Box Module in CSS.
So, the secret to (visually) changing the order of HTML elements is to use display: flex
on the parent container first. Then, add the order
attribute to order each child element in that container.
It’s probably easier to understand by looking at the code. You’ll also realise how easy it is to reorder elements using only CSS.
/* Parent Container */
.fusion-social-networks-wrapper {
display: flex;
justify-content: center;
}
/* Children of Parent Container */
.fusion-icon-facebook {
order: 4;
}
.fusion-icon-twitter {
order: 3;
}
.fusion-icon-instagram {
order: 2;
}
/*
No need to set YouTube to #1.
It will display first by itself.
*/
Using the ThemeFusion Community Forum page as an example, we’ll change the order of social icons in the footer area.
The original order is:
Swipe the slider below to the left or right to see the before and after.
Did you notice the difference?
You got it! When you apply the CSS code above, you’ll get the reverse order:
Learn how to add custom CSS to WordPress if you don’t know how to yet. Don’t worry, adding CSS to Avada is covered.
Thanks for reading!
Sliders courtesy of Swiper.
I used Avada by ThemeFusion as an example because the topic of this post began in the Avada community forum.
I have no affiliation with Swiper or ThemeFusion.
Since Google announced on July 1, 2019 that mobile-first indexing will take priority over desktops, I’ve been interested in site speed. I’ve been taking random Google PageSpeed Insights samples since June 2019. Recently, I’ve started sharing these reports.
In this post, we’re going to look at web design and web developer sites. I chose seven firms that I’ve stumbled upon from either working with clients or doing SEO research.
The idea behind this report is simple. If your web designer/developer cares about their mobile load speed, chances are they’ll care about your site’s performance on mobile.
For each site, I list the
Here are the PageSpeed scores ordered by the slowest rating (1) to the fastest (7).
Swipe the sliders below to the left or right to see the mobile and desktop reports.
Web Design, Web Development & Digital Marketing Expertise
Platform: SiteInfinity
Mobile | Desktop |
---|---|
5 | 35 |
Strategy. Engagement. Storytelling.
Platform: WordPress Salient (yet Salient’s own site is on GeneratePress)
Mobile | Desktop |
---|---|
15 | 61 |
Simple & Conscious Design
Platform: Wix
Mobile | Desktop |
---|---|
24 | 61 |
Increase Your Digital Branding Asset
Platform: Unknown
Mobile | Desktop |
---|---|
27 | 55 |
How Can I Help You Do WordPress Better?
Platform: WordPress Astra
Mobile | Desktop |
---|---|
44 | 91 |
Make your Mobile App & Website cut above the rest.
Platform: unknown
Mobile | Desktop |
---|---|
57 | 89 |
Remote independent UI engineer helping brands build modern, resilient, and inclusive user interfaces
Platform: Hugo
Mobile | Desktop |
---|---|
96 | 98 |
I feel there are two takeaways here. And, they are similar to my previous post on Hugo’s PageSpeed scores.
Thanks for reading!
Should you check my site’s performance first? Absolutely! Here’s my showcase site’s benchmark.
Sliders courtesy of Swiper.
Hugo is a SSG written in the Go programming language. Go is a language designed at Google.
When I’m shopping for a site builder, page builder, or theme for my clients I always look at the demo sites.
For this speed test, I selected a Hugo theme demo site that was:
Meghna Hugo is tagged as fast and minimal. It looks nice. It was updated on 21 March 2020. Dude, that was like yesterday (this post was originally published 22 March 2020). So, I ran with that.
According to gohugo.io, Hugo is
The world’s fastest framework for building websites
OK. It might be the fastest framework for building sites. Let’s check what Google PageSpeed thinks about Hugo’s site speed.
Swipe the sliders below to the left or right to see the mobile and desktop reports.
Now, let’s look at gohugo.io itself. It’s the official Hugo website. Yes. It’s built with Hugo. I checked.
Let’s hold my official site as the benchmark. My site is powered by GatsbyJS on Netlify.
Which is the more “fair” assessment of Hugo’s PageSpeed test? Would the demo sites or the official site be the better litmus test?
It’s hard to say. There are countless factors involved with how websites perform. IMHO, I believe demo sites will be closer to the truth. Why? Because the way they’re developed is probably closer to how most sites are built. This is coming from experience.
When I run into an exceptionally fast site that’s also well designed, I always wonder about their budget. I wonder if they had a loftier budget to spend on performance—compared to us mortals.
At any rate, I feel there are two takeaways here.
Thanks for reading!
Sliders courtesy of Swiper.