Tips for a User- and Content-Friendly Website
I’ve tweaked this website a bit the last few weeks, not only to improve the look and feel of it, but to make navigation simpler and the mobile experience better. While it's not perfect just yet, I think everyone wants to improve on their sites however possible, so here’re a few tips to help.
I had a stand-alone home page for that past year or so. It consisted of three rotating images that linked to various sections of the website—typically two to stand-alone book product pages and one to ongoing updates.
On the desktop, this worked perfectly: users could scroll over the images, see a prompt for further action, and click through to what they’d like to see. If they didn’t want to go that route, the pages were also listed in the crossbar for easier navigation.
On mobile, however, a scroll-over isn’t possible, so part of the effect was hindered from the start. What more, though the images were prominent on the desktop, their reduced sizes on the mobile version were initially rather useless. To compensate, I had to create “long” versions, which looked better, but still lacked a scroll-over.
I realized the home page, on mobile particularly, was simply a barrier to my content. It looked nice and had an expressed purpose, but it was a stop-gap between the user and what I was attempting to offer. So, I removed it.
The original purpose of the stand-alone home page was to put a greater emphasis on my books, which had previously languished solely on their own pages (though they, of course, were continuously mentioned in the updates). This was lost by returning to a more general home page, which automatically builds around updates, but there’s some wiggle room to be had.
While there was no sidebar on the stand-alone home page, the new (old) one, by design, has one. Rather than leave it merely to different ways of navigating the site (as I had when the sidebar was generally dedicated to rolling through updates) and the chance ad, I instead decided to use it to my advantage.
I started by increasing the sidebar width from 200px to 350px (out of a total width of 1060px, meaning it now accounts for approximately a third of the page).
I then created thumbnails of the book covers I wanted to highlight (currently, Sanity’s Flaw and “A Conversation on a Thursday, with Beer”). I could have used large versions, but seeing as how this is the home page, I want it to load as quickly as possible. Smaller images require less load time and thus are a boost to SEO. I dropped these into the sidebar, with an AdSense box between, along with short blurbs and links to the stand-alone product pages—just like I had on the stand-alone home page.
One note: to keep the sidebar more organized, I removed the label cloud and a few other widgets.
The social media buttons I had incorporated into my header image and linked using ImageMaps didn’t work for mobile. They were simply too small—and the header had its own issues besides, but more on that below. Given my increased business presence on social media, I just couldn’t have this.
I have seven business-related accounts to highlight. With 350px to play with, I decided to use 40x40px squares in a row with a 1px space between each—a good size for the mobile version as well, as all of the buttons stay aligned on even the relatively small iPhone.
I tested placing this bar to the right of the header, and may still do that in the future. While not available by default, this option is easy enough to incorporate through some coding—problem is, doing so at present keeps the buttons from automatically pushing beneath the header image in the mobile version. If I can find a workaround, I’ll do it (and update this post).
I use Blogger for the back-end of this site, and its automatic mobile client can be a bit wonky, or keep certain things from appearing. Thankfully, that’s fully adjustable. For me, it wouldn’t make sense to highlight my books only on the desktop version of the site. The sidebar, or at least the important bits, had to show on mobile as well.
Making Blogger sidebar widgets show on mobile is a multi-step process, but still pretty simple:
When they were isolated to their own section of the site, I let the updates be as, well, cumbersome as they could be, figuring the more available information the better. With them on the home page, though, it’s a different story.
In order to keep the home page from looking too “cluttered,” I’ve started adding jump breaks to the updates. This better controls the length of the page, and, along with limiting the number of updates to three, again serves to keep the sidebar within view (instead of letting it disappear with a scroll).
I also removed the author attribution and the time stamp from every post. Given they’re all from me, I should’ve removed the attribution a long time ago, but as for the time stamp? Well, I typically don’t update more than once in a day, so what’s the point of that?
I loved my old header. It was sleek, attractive and quite useful, especially with the embedded ImageMap connecting it to my social media accounts. Unfortunately, as the header was the full width of the site (1060px), it appeared too small when resized on mobile. The ImageMap also had an issue, at times, displaying on mobile. I rightly couldn’t have that.
The easy decision was to outright drop the Image Map. While useful on the desktop, it was rendered generally useless on mobile. While the new image is now simply that, it works exactly as I need it to: it looks pretty. And I don’t think I’ll bother using an ImageMap again in the future.
What came next was a header redesign. I halved the art width so it would appear larger on mobile (shrinking from 1060px to 530px). I couldn’t simply resize the original, as it was designed specifically to reach across the page, so I reworked the elements into the new version at the top of this page. Which I also happen to quite enjoy.
Outside what you can see, I’ve also included a number of coding changes on the site designed to positively influence SEO. There’s a lot to cover on that bit, though, so I’ll write those up in a separate post.
The Stand-Alone Home Page is Useless on Mobile
I had a stand-alone home page for that past year or so. It consisted of three rotating images that linked to various sections of the website—typically two to stand-alone book product pages and one to ongoing updates.
On the desktop, this worked perfectly: users could scroll over the images, see a prompt for further action, and click through to what they’d like to see. If they didn’t want to go that route, the pages were also listed in the crossbar for easier navigation.
On mobile, however, a scroll-over isn’t possible, so part of the effect was hindered from the start. What more, though the images were prominent on the desktop, their reduced sizes on the mobile version were initially rather useless. To compensate, I had to create “long” versions, which looked better, but still lacked a scroll-over.I realized the home page, on mobile particularly, was simply a barrier to my content. It looked nice and had an expressed purpose, but it was a stop-gap between the user and what I was attempting to offer. So, I removed it.
Emphasize Products alongside Updates
The original purpose of the stand-alone home page was to put a greater emphasis on my books, which had previously languished solely on their own pages (though they, of course, were continuously mentioned in the updates). This was lost by returning to a more general home page, which automatically builds around updates, but there’s some wiggle room to be had.
While there was no sidebar on the stand-alone home page, the new (old) one, by design, has one. Rather than leave it merely to different ways of navigating the site (as I had when the sidebar was generally dedicated to rolling through updates) and the chance ad, I instead decided to use it to my advantage.
I started by increasing the sidebar width from 200px to 350px (out of a total width of 1060px, meaning it now accounts for approximately a third of the page).
I then created thumbnails of the book covers I wanted to highlight (currently, Sanity’s Flaw and “A Conversation on a Thursday, with Beer”). I could have used large versions, but seeing as how this is the home page, I want it to load as quickly as possible. Smaller images require less load time and thus are a boost to SEO. I dropped these into the sidebar, with an AdSense box between, along with short blurbs and links to the stand-alone product pages—just like I had on the stand-alone home page.
One note: to keep the sidebar more organized, I removed the label cloud and a few other widgets.
Larger Social Media Buttons
The social media buttons I had incorporated into my header image and linked using ImageMaps didn’t work for mobile. They were simply too small—and the header had its own issues besides, but more on that below. Given my increased business presence on social media, I just couldn’t have this.
I have seven business-related accounts to highlight. With 350px to play with, I decided to use 40x40px squares in a row with a 1px space between each—a good size for the mobile version as well, as all of the buttons stay aligned on even the relatively small iPhone.
I tested placing this bar to the right of the header, and may still do that in the future. While not available by default, this option is easy enough to incorporate through some coding—problem is, doing so at present keeps the buttons from automatically pushing beneath the header image in the mobile version. If I can find a workaround, I’ll do it (and update this post).
The Sidebar Doesn’t Automatically Appear on Mobile
I use Blogger for the back-end of this site, and its automatic mobile client can be a bit wonky, or keep certain things from appearing. Thankfully, that’s fully adjustable. For me, it wouldn’t make sense to highlight my books only on the desktop version of the site. The sidebar, or at least the important bits, had to show on mobile as well.Making Blogger sidebar widgets show on mobile is a multi-step process, but still pretty simple:
- Find the name of the widget by editing it in the Layout menu. In the new window, check the URL. The widget name will follow widgetId= near the very end (for instance, if it says widgetID=HTML2, the widget will be HTML2.
- Head over to the Template menu and select Edit HTML.
- Press Ctrl+F to open the Search bar and search for the widget’s name.
- You’ll see something along the lines of < b:widget id="HTML2" locked='false' title="" type="HTML" >… < /b:widget >.
- Between locked=’false’ and title=", insert mobile=’yes’.
- The final code should look like this: < b:widget id="HTML2" locked="false" mobile="yes" title="" type="HTML" >… < /b:widget >.
- Click Save Template and get out of there. You’re all set!
De-clutter the Updates
When they were isolated to their own section of the site, I let the updates be as, well, cumbersome as they could be, figuring the more available information the better. With them on the home page, though, it’s a different story.
In order to keep the home page from looking too “cluttered,” I’ve started adding jump breaks to the updates. This better controls the length of the page, and, along with limiting the number of updates to three, again serves to keep the sidebar within view (instead of letting it disappear with a scroll).
I also removed the author attribution and the time stamp from every post. Given they’re all from me, I should’ve removed the attribution a long time ago, but as for the time stamp? Well, I typically don’t update more than once in a day, so what’s the point of that?
New Header
I loved my old header. It was sleek, attractive and quite useful, especially with the embedded ImageMap connecting it to my social media accounts. Unfortunately, as the header was the full width of the site (1060px), it appeared too small when resized on mobile. The ImageMap also had an issue, at times, displaying on mobile. I rightly couldn’t have that.
What came next was a header redesign. I halved the art width so it would appear larger on mobile (shrinking from 1060px to 530px). I couldn’t simply resize the original, as it was designed specifically to reach across the page, so I reworked the elements into the new version at the top of this page. Which I also happen to quite enjoy.
Other SEO Changes
Outside what you can see, I’ve also included a number of coding changes on the site designed to positively influence SEO. There’s a lot to cover on that bit, though, so I’ll write those up in a separate post.
Comments
Post a Comment