Remember the recent discussion and feedback post about ToolGuyd’s layout? I mentioned that I’m working on the site layout, and you guys offered some fantastic feedback, commentary, and requests.
I have been working on small changes, but all my plans were recently thrown to the wind.
I recently received a message from Google:
Advertisement
Google systems have tested 6,160 pages from your site and found that 100% of them have critical mobile usability errors. The errors on these 6,160 pages severely affect how mobile users are able to experience your website. These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users.
Here are the problems:
- Touch elements too close
- Small font size
- Viewport not configured
- Flash usage
Touch elements too close: Google is telling me that it’s too hard for the average reader’s finger pad to hit the exact link a reader wants to press. In other words, they want to click on “hand tools,” but might click on “power tools” in the top menu.
Small font size: I’ve noticed inconsistencies, and were planning to fix them, but basically all the sizes have to be adjusted for mobile users.
Viewport not configured: A viewport scales a page to mobile-friendly sizes. If it’s not configured, only the desktop site will be shown in full-screen on all devices. This is the biggest issue and requires a “fresh slate” design.
Flash usage: YouTube videos embedded before a certain time were Flash-based. I’ve since swapped them out with non-Flash-based code.
Advertisement
Desktop vs. Mobile Users
There are now a LOT more mobile users than previously. One and two years ago, the gap between desktop and mobile users was a lot larger. That’s not true now.
On ToolGuyd, the ratio is currently approximately 53% desktop (and laptop) users, 33% mobile users, 14% tablet users.
To ensure that mobile visitors can find ToolGuyd reviews and content through search, where Google is by far the dominant player, I have to fix these issues.
The Plan – ToolGuyd Will Look Completely Different
Google’s message really says “get moving and fix this fast.” It has really lit a fire under me to get this done quickly.
There is no easy way for me to modify ToolGuyd’s current theme to be more mobile-friendly. I knew this, which is why I had already started working on developing an updated and migratable layout.
The only solution is a “fresh slate” design where the framework or parent theme is completely redone.
I hand-coded the ToolGuyd theme as it looks now, basing it on an official bare-bones parent theme, and made small and careful adjustments over time. I had been tidying up all of these customizations and adjustments, and am nearly ready to begin adding them to a responsive framework/parent theme.
Normally, when I make a lot of changes all at once, I develop the site on a local computer and work at it until it’s perfect. I don’t want to do that now, or rather I cannot really do that now. Given my current schedule and workload, I just don’t several hours a day for a couple of weeks to develop the “perfect” site all at once. The only way to provide a near-seamless theme change is for to pause all content for a couple of weeks, but I don’t want to do that.
This is what will happen:
One day you’ll be on ToolGuyd, and it’ll look as it does now. Then, the next day, everything will be completely different.
I will be using GearGuyd to test some of the major things out first, before the overnight change happens. And no, as GearGuyd looks now is NOT how ToolGuyd will look.
Some of the ToolGuyd look and feel will carry over, but I want you to be prepared that certain aspects will remain different. There were a few changes I wanted to make for a long time, such as to the front page, but they were too difficult without writing massive amounts of code. Starting with a clean framework or parent theme will allow me to more easily build in those features I’ve always wanted.
I am really attached to the way the site looks now, partly because I was wholly responsible for designing it this way, and partly because it’s been like this for so long. This is going to be hard for me, but I hope that most if not all of you will be pleased with the new look.
There is just no way to implement some of the changes readers requested – such as wider columns and larger images – or the mobile-friendly changes Google is strongly advising for, with the infrastructure the current theme is based off of.
Change is inevitable, and it will happen all at once.
Why I’m Telling You This
I want you all to have a very positive experience when you’re on the site. When the changes go live, if there’s something that doesn’t work for you, or something you don’t like, please let me know!
I might not be able to honor every request, but I’ll at least consider each one.
I’ll be tinkering with the back-end of the site a little bit every single day for a while, and so your feedback will be even more invaluable than before.
After an initial significant shift, changes will be small and incremental as I add polish to everything. This will help to ensure less bloat, but the primary intent is so that I can get things done sooner. It took me a very long time to design and code the current ToolGuyd layout, and my decision to shift away from it is easy nor at all willy-nilly.
rhyino
Whether using a smartphone, tablet or desktop, I have not had any problems navigating your site.
Stuart
Me neither. But the combination of changes readers requested, changes I want to implement, and changes Google is essentially requiring, is too much to be folded into the current layout.
It would take far longer and way more effort to “gut the house” and keep the outwards appearance, than to build or buy a new house and change the outwards appearance to suit.
Joe Sainz
Stuart – any thought about keeping the current site, but adding an @viewport call for now in the css to move some things around? That would give you the ability to make some quick mobile changes to keep your page rank up until you are ready for prime time with the new theme.
Stuart
That would really just be a band-aid on top of more band-aids, with even more to come, and that’s not even saying it would be easy.
I looked over everything a couple of times now over the past 2 years, and I really need a ground-up redesign of the core to be able to do everything I want to.
Making the switch to a new theme isn’t going to be quick or easy in any way, which is why I decided to rip the band-aids off quickly. Otherwise 2016 will be here before I know it and I’ll still be talking about updates that will be coming “soon.”
I’ll be able to work out the most fundamental changes before going live, but after that it’ll be gradual progress as I fit design and development around all of my other ToolGuyd duties and activities.
The design change won’t affect new visitors at all, but it’s the day-to-day and regular readers that I don’t want to surprise or disappoint, hence the transparent heads-up.
Michael
I also have not had any problems with your sight as is. I am very pleased and appreciative of all the hard work you do. I visit your site often and I enjoy reading the reviews especially.
Benjamen
I don’t know who shoved the stick up Googles butt. Both android and IOS have solved all these problems. Why are they they forcing this issue now? It’s like they are going after WordPress for some reason, maybe to force more people onto Blogger. I didn’t get this message on any of my Drupal 6 sites, but I got it for my wordress sites, and the Drupal sites are way less mobile friendly.
I bet there is yet another anti-competitive lawsuit in googles future.
Mike
Most of
the sites
conforming
to their
standards
end up
reading
as
twenty
pages
formatted
like this
instead
of half
a page
like it
should
be.
Like you said, device OS and apps fixed readability problems long ago. Now with Google’s standards the sites are horrible to read and navigate. I am currently reading the site with a 7″ tablet and there are no problems whatsoever. Except not being able to type three words in a row without needing a correction.
Stuart
Just because you didn’t get warnings yet doesn’t mean you won’t. It’s not about competing services, but whatever their algorithm deems to not be mobile friendly.
Stuart
Looking at this post on my phone, I see some of the Android fixes, such as swapping the font, adjusting some of the font sizes, and playing around with margins, such as for the ordered list in the post.
And if you recall from our combo, it does funky things to line widths and the number of words pet line.
Unfortunately, Google doesn’t consider the user experience – only what their algorithm says is a good mobile-friendly user experience.
Although ToolGuyd is perfectly usable on mobile devices, it’s not ideal. There are other things I want to do, and so it makes sense to do it all at once.
firefly
I think you might be on to something here… Personally I like toolguyd site. I own multiple mobile devices with various screen size from 4.3 to 10″ on different OS and this is one of the better mobile experience that I get.
So it’s clear that the algorithm that google is using is deeply flawed. Now it’s debatable whether this is intentional or not but it’s scary considering how much power that Google have.
Google products have taken a dive as of lately. I like Google and in general I like their product but it seem like they aren’t eating their own food anymore and it’s sad.
Now if the decision are truly coming from the top and this is now Google want to run their business going forward then by all mean. But I really hope that they pay more attention to their user feedback do some restructuring internally and fire a few incompetent people for the good of society. My gut feeling is that some of the middle/upper management need to be let go… But that’s some homework that google need to figure out on it own.
Stuart
Google changes their algorithm periodically, and I do occasionally notice some improvements in the quality of search results.
But sometimes Google is all over the place.
Google’s automated warning isn’t the only reason I’m looking to change things up. I’ve been meaning to shift the theme for a while now.
But, instead of striving to simply duplicate ToolGuyd’s current look and feel on top of a different and mobile-friendly structure, it’s a good time to explore other possibilities.
And if there’s widespread opposition to the soon-to-be new look and feel, I can still then recreate this look and feel, except perhaps on smartphones.
I am already seeing some mobile search results with “mobile friendly” notations, and so I’m not going to waste time.
I’m not going to make changes simply because of Google, but Google’s warning has prompted me to speed up the process.
Nathan
I was going to ask how Google would force you to change – or why.
I’ve not used the site on android – but I do get the idea of menu and other items being close together. thanks for the heads up though.
Stuart
In the past 30 days, Google Search was the source of 58.31% of all “sessions,” or visits to ToolGuyd. Yahoo? 2.25%. Bing? 2.08%.
It’s not good to be penalized in Google search results for anything. Not being formally mobile-friendly is something I wanted to fix for a while. This is the nudge I need to do so quickly.
Changes were going to be on the way. Because of this, they’ll be on the way sooner.
Part of why I want to hit the ground running is because it’ll be easier to fix certain things earlier. For example, I’ve seen some sites display horribly on my tablet, serving up phone-sized columns, and would test to ensure that doesn’t happen here. I would also rely on the help of everyday readers to draw my attention to any other hidden issues.
Nathan
Google: the power to destroy any of millions of companies at a whim.
Don’t be evil…
I think Google is generally responsible but wow the amount of power they hold is staggering.
Anyway I just wanted to say I really like toolguyd as it is, and don’t have any problems on my Android phone. I can also relate to your fondness/attachment to this design as I created in PHP a website for a plant society I was part of, and it had an appropriately earthy theme and slick layout. Then they passed on the reins of webmaster to another guy and he totally gutted it and threw out not only my design but my content. Gutted is the word.
R
I read your site on a desktop with two large LCD screens. Please do not turn my desktop experience into a phone experience. Too many sites are doing this and it is *really* annoying. I usually end up moving on ….
Stuart
I mainly work on and view ToolGuyd on a 27″ monitor. The new theme will be mobile friendly, but not “mobile-first.”
Toolfreak
You can have two different versions of your sites, one that shows up on desktop/laptop computers, and another that shows up on phones/tablets.
It can be a little tricky to implement and get working correctly depending how custom you want the layouts to be, but once you do, you just blog as usual.
Once you have a mobile-optimized site, even if it’s just one site for all visitors on all platforms, you can expect the mobile traffic to be an even larger percentage.
Tyler
Good luck with the changes. Overhauls can be a process, especially if you are under time constraints. Turning it loose on GearGuyd is a good move. One can tell that you’ve spent a lot of time tweaking the current site to make it easy to navigate and easy to read. Typically that means the site is generally mobile-friendly to start. Unfortunately computer algorithms have a hard time comprehending that and rely on triggers that more complex (layout-wise) sites use. Keep up the good work and know we appreciate your great user experience, even if algorithms don’t recognize it.
All that said, I’m excited to see what you come up with over time.
Mike
One thing I just noticed, no idea if it’s a recent change, is that I can no longer snap zoom to a column on my phone. For example, when viewing an article I used to be able to double tap the actual article text and the page would zoom and pan so that particular column fit the entire width of the screen. It still works on my tablet, but the same versions of the browsers don’t do it on this site any longer on the phone. The phone browsers still work on other sites.
Stuart
That’s weird. I played around with something last night but reversed the change. My Android phone still allows text column snapping.
Blythe M
I usually read on my lunch break at work, which means iphone 5 with. Chrome browser. Only problem I ever have is the header bar (brown/black thing with ‘best tools’ ‘hand tools’ ‘power tools’) hovers over the text box and doesn’t let me see the first line I type. It’s doing it right now. Everything else works great
Stuart
Oops, sorry about that. There are some other mobile-unfriendly parts of the top menu that I’ve been meaning to sit down and fix for a while, such as the “hover” behavior. You cannot really hover with a touchscreen, and so the submenus don’t close unless you press a link.
MT_Noob
Good luck with the changes. I got the same sort of google admin email about a site I manage so I know where you are coming from abd I understand you don’t want to be penalized on your ranking.
I love the content on this site, so for all I care it could be purple font on an orange background, as long as the content is the same i will keep coming back. (I do draw the line at blinking font, thank god that is deprecated.)
I am sure whatever you come up with will be great. Good luck.
Gary T.
I like the new look it is easy on the eyes and easy to read.
Stuart
Thanks! Not done yet though!
I *might* switch back tonight until I can work more on things tomorrow, but I’m not too unhappy with how things are looking.
There’s plenty of microadjustments that need to be made, pretty much everywhere. The front page also looks a little odd, and fonts need to be readjusted.
Some styling, such as the “post comment” button are huge and need to be resized for desktop users.
Mike
Last week the National Weather Service made their new Google compliant sites live for all their local forecast sites. I almost posted here to ask you to take a look as an example of why the Google standards make things worse. On phones, nearly 25% of the screen is wasted horizontally. Tablets end up closer to 33%. This in turn makes the viewports stack vertically to the point that it literally takes up 9 screens to convey the same information that one used to. And most of those viewports don’t even fit the data on the screen any longer, you must manually scroll them when they would easily fit without the wasted space. Even desktop browsers experience the same huge whitespaces and take up multiple pages unnecessarily. I was going to show it as an example of what not to do. That previously well designed site became another beige cookie-cutter site that conforms to exactly what Google wants everything to be.
So you can imagine my disappointment when I pulled up this site this evening and found the same. Obviously, it is your site, but consider me unimpressed with the change. My laptop doesn’t have the largest screen in the world, but nor is it the smallest, and it does not even show the first article on the home page when scrolled to the top.
I see that you have changed back as I was writing this, so hopefully what I saw was just an experiment?
Stuart
I appreciate the feedback! I’m still working on things, and there’s a lot of work left to be done. I’d rather not go back and forth, and will likely keep working on the site “live.”
It’s so much easier for me to test things out live, rather than on an isolated computer.
Right now, there is way too much whitespace for my liking as well. I collapsed a couple of margins, but it’ll take time to size things right.
What I might do is switch back when I’m done for the night. That doesn’t mean this is a limited time experiment, but that I want to minimize the time during which the site looks unpolished.
I’d appreciate the same honesty once I’m a little further along with the optimization.
Keep in mind that the previous layout was also the result of years of tweaks here and there. One of my goals was to offer a quick wham-bam look at headlines. I’m trying to do the same again, but it’s probably not going to be immediate.
Joe
Needs eye candy on the top box, IMO.
Stuart
You mean to push the logo back to the right and fill the space with an ad or image of some kind? What I might try to do is push one of the menus up there to save space.
And then, for the main column, there might be a featured post slider, but only if it won’t take up too much space.
Joe
Looks better now. Yesterday it was all a one color box. Thanks.
Benjamen
I like the larger font and column, but is it just me or is the font kind of jaggy — there’s probably a technical term. I go to other sites and the letters look crisp and clean on my monitor, when I come back here the font looks courser. If I look really close it looks like there is grey shadowing especially in the closed letters like “o”
Stuart
Could be a ClearType issue. One reader had that problem when I switched to a new font a few months ago.
This font isn’t staying for long – it’ll be switched to a different open source font as soon as I can so it – hopefully within the hour.
Are you seeing this site-wide, or only navigation areas where there’s a colored background?
Benjamen
It’s definitely in the comments and main body, but it’s worst on the black on white parts. The Blockqote above is clear, but I think that’s a different font. The post comment when you’re not hovering over it is terrible (white on black I can see the individual pixels) but that doesn’t look like the same font either.
Clear type could be an issue since I’m running Linux. I still have sub-pixel rendering control optimized., but clear type optimized fonts much not be as compatible.
I just checked the site on my phone and it’s crystal clear. You’re probably right about it being a Clear Type issue. I just looked in my configuration and font I haven’t setup anti-aliasing since I re-installed a few months ago. I’ll set it up and reload chrome and let you know.
Benjamen
I think PEBCAK. I didn’t have anti-aliasing setup correctly.
Stuart
Could a simple browser reload have remedied the situation?
I’d hate to think others are having the same kind of issue.
Tyler
Hey Stuart,
I’m on a 1280×1024 monitor. When I hover over the “Best Tools” menu the drop down menu passes below the fold, even with the Browser window fully maximized. It’s not the end of the world for touch devices or those of us that use the mouse wheel to scroll the page. It could potentially cause frustration for those that need to rely on the scroll bar or don’t know any different. Cutting down on the padding for menu items in the larger viewport might help, that or transitioning to a multi-column drop down.
If you are already addressing this, ignore the comment!
Stuart
Thanks! Don’t worry, it bugs me too. That’s one of several things that still needs to be perfected.
*Fixed*, at least for now. The manu nav does need more work, but it should look a lot better right now. (Don’t forget to refresh the page.) I need to polish and test it more, but at least it doesn’t look as goofy.
Tyler
That’s better! You are on the right track. I would definitely consider changing the color of the sub-nav items’ text colors so you can distinguish between main and sub-nav items when you hit the “mobile” navigation viewport. I know some like to add a left margin but it reduces the available real-estate for the nav items text so I like to see other style changes instead.
Keep up the good work!
Stuart
Thank you again! I’m not done yet, and it’ll take me some time before I get to everything on my checklist, but I think I addressed most major usability issues.
One other thing I did was move the “home, about, contact, etc.” menu to the bottom, although that might not be a permanent decision.
The mobile menu needs a couple of things done, but none that really require immediate attention. There are still a number of broken features that I need to repair first.
CanadianStig
I read this site on my iPad and iPhone and never have issues in reading articles or reviews .
Charles
RC Ward
I use my phone a lot but I would rather be on a 27 inch screen then a 5 inch any day. So desktop is my favorite way to check out my favorite sites but you have to keep up with the times I guess. Long live the desk top!