Now Easier to Read & Mobile/Tablet Friendly!

11 Sep 2012Steve Schwarz

Welcome to the improved AgilityNerd! Not me, the blog.

I’ve spent the past week or so redesigning and coding the visual aspects of the site with two thoughts in mind: improving readability and better support for mobile phones and smaller screens. Here is more detail on my thinking for making these changes.

Readability

You may have noticed the use of larger fonts and increased white space on many modern websites. These are twoweb design blogs I read that demonstrate this easier to read design. In fact there is a name for this style 100E2R: 100% font size easy to read.

I won’t bore you with the details of all the changes but they should be obvious if you are reading this on the website. A larger serif font, a non-black font on white background, increased line spacing, and most importantly I increased white space throughout the site. I want the text of the articles to be easy to read.

Mobile Support

Thanks to open source technology this site adapts it’s size to the size of your browser. It uses a “responsive design”. If you were to resize your desktop browser window you’ll see the site layout changes as you make the browser narrower and wider. This allows this site to look much better on mobile phones and tablets than the old design and it does so without the need to create a separate mobile version of the website.

The only downside of this change is folks using old browsers may have an ugly looking screen. I checked my website statistics and less than 10% of all visitors might be effected. If anyone is looking to upgrade your browser I really like Google Chrome, it is standards compliant, automatically updates so it gets bug fixes and new features, and is arguably the fastest browser for complex websites.

Lastly, I now only show the first couple paragraphs of each article on the index pages (like the main page). This helps all readers by speeding up the download of these pages and gives less text to scroll through especially on the small screen. So now you’ll see a link named “Read more …” to click to see the full article and any comments.

Bonus and Clean Up

As a “bonus” I added a featured articles scrolling display on each page. It’s a more visually interesting way to display those special articles.

I still have some clean up. As you go back to older articles you’ll see some of the titles are too large; and some videos and images won’t size correctly for small screens. I’ll fix the more popular articles and ignore the older ones. All new articles and the main index page should look good on all screens.

I really like how it looks with the new design and hope you’ll find it easier to read and use!

Related Articles:

Tags: