Six Revisions Gets a Redesign

The new site design of Six Revisions was launched a few hours ago (officially named Six Revisions version 2). This is the most significant redesign of the site in years.

The main objective of this new design is to improve your reading and overall experience on the site.

Highlights

There’s still quite a lot of design, web performance, and functionality issues to resolve, but overall this redesign should greatly enhance your experience on Six Revisions.

I’ll briefly walk you through some design improvements in the new version.

Responsive design

Six Revisions readers accessing the site with their mobile device will be pleased to know that the site now provides them a much better reading experience.

A quick check on Google PageSpeed Insights shows no issues with mobile UX. (However, I still need to work on mobile and desktop page speed improvements across the site, as well as enhancements beyond PageSpeed Insights suggestions.)

Dealing with the embedded code samples (content wrapped in <pre> elements) with wide line lengths was one of the trickier design challenges.

I explored a couple of solutions: horizontal scrollbars on code samples that were wider than the native device width, or making long lines wrap to the next line.

I chose, last-minute, to go with the latter solution because horizontal scrolling (swiping left-and-right) on smartphones was too disruptive to the reading flow.

Improved readability

The old web design was aesthetically outdated.

It was clunky. It was broken in so many areas and in so many ways.

Most importantly, it got in the way of your reading experience on the site. The new design is optimized to present Six Revisions content in the best way possible so that the hard work of our authors is no longer being overshadowed by UX, usability, and readability problems created by the previous design.

The new UI is clean and simple, and is designed with the intent of complementing your reading experience, rather than being a focal point.

Improving readability, among other things, involved significant time and effort given to designing, evaluating, and testing the design’s typography.

The primary web font used in Six Revisions version 2 is Lato, an extremely legible and pleasant-to-read font designed by Lukasz Dziedzic.

It comes in 18 variants and has 3,000 glyphs, making it a flexible and robust font that can handle old, current, and future Six Revisions content.

Code samples are an essential component of a publication that caters to professional developers and web designers. The font used to present embedded code samples is one of my most favorite programming fonts, Source Code Pro.

It works well with the main body font, and it’s simply gorgeous. It’s exceptionally legible, and makes reading code a more delightful experience.

The site’s typography still needs to be perfected and fine-tuned, so this area is a work in progress.

Improved site navigability

One major issue with the old UI was it was tough to navigate to content that you might be interested in.

One feature aimed at improving site navigability is the fixed navigation bar on top of our web pages. This allows you to move throughout the site easily without having to scroll back up to the top of the page.

Scrolling back to the top of the page to navigate the site was particularly troublesome in the old design, since Six Revisions publishes long-form articles. In the future, this navigation bar will display contextual navigation items and information based on where you are on the site to help you discover other articles and tutorials you might be interested in.

I’m in the process of building more interfaces that will make our body of content easier to navigate.

For instance, I’m currently developing an interface that makes it manageable to view 50 to 100 Six Revisions articles on a single web page to reduce the amount of time and effort required to transition to another page.

A critical issue right now is that the site search feature is not displaying search results. This is a high-priority bug that I will work on in the next few hours (after I get some sleep).

Better UX for discussions

One of my main goals is to improve your ability to interact with other members of the Six Revisions community. One of the first steps I took towards this goal was to enable multi-level commenting so that we can all have better conversations in the comments.

My desire is for Six Revisions to become a venue where people from all over the world interested in development and design come together to talk about the subject we’re passionate about.

I’ll be introducing a feature that allows you (and other people on Six Revisions) to view your comment history on the site.

Another feature I’m thinking about implementing is social voting in the comments section so that the community gets to decide which comments other readers should pay attention to.

Also, I’ll be developing ways to encourage readers to contribute to the discussions by giving people who regularly share important information and engage in meaningful conversations special avatars, one-on-ones, and so forth.

For now, Gravatar support has been disabled due to web performance concerns.

I’m reviewing our options for better avatar support in the comments.

Roadmap

I want to talk about some things you can expect on this site from here on out. I have a million things I want to share with you regarding the future of Six Revisions, and I can’t fit them all into this post, so I’ll be discussing them in more detail in subsequent posts.

Vision

My mission is for Six Revisions to be a leading source of information on development and design, a place where you go to learn and stay updated on essential topics related to building sites and apps.

Main topics

These are the core topics that we’ll be covering in the form of tutorials, articles, guides, and other forms of content:

• Front-end development including HTML, CSS, JS, general web development, web performance optimization, and CMS development
• Website, mobile, app, and UI design
• UX, usability, and IA
• Modern design and dev standards and best practices, tools, technologies, and techniques

Other subjects that matter to developers and designers will also occasionally be covered. These include project and business management, content strategy, SEO, and general design and code theory.

Content improvements

The most critical area of concern is the site’s content. Six Revisions hasn’t been publishing articles regularly, and I need to address that right away.

These are some things I’d like to improve on:

Improve publication schedule

Right now, Six Revisions publishes between one and three articles per week. The first step is to work towards consistently publishing three articles per week (Monday, Wednesday, and Friday).

The next objective will be to publish 5 articles a week (M-F). After that, Six Revisions will start to post at least one article a day.

Improvements in the authoring experience

The writing process and incentives for our authors need to be improved.

The task of contributing articles to the publication must be streamlined and made easier in order for Six Revisions to be able to publish high-quality articles regularly.

If you’re interested in writing tutorials and articles to be published on Six Revisions, please email me at [email protected].

Content archive maintenance

We’ve published over a thousand articles. A lot of them are timeless. However, many are also outdated because that’s just the nature of development and design, things change so much and so frequently.

I’ll develop methods that will keep our content up-to-date as much as possible: Facts that are no longer true must be corrected, broken links and other issues will be addressed.

Community engagement and transparency

Without you, there would be no Six Revisions.

I will create more engagement opportunities, whether that’s in the form of introducing new discussion features on the site, or simply just having more regular conversations with you in the comments section, social media, and/or email.

Also, I’ll keep you updated with the things that happen behind the scenes.

For example, I’ll start posting quarterly reports to give you a status update on Six Revisions.

Design

Right now, there’s still a lot of UI-related issues with the Six Revisions version 2 design.

For example, you’ll see some “jankness” when you view the site on iOS devices, and possibly in other devices that I haven’t gotten the opportunity to test with yet (outside of emulators).

I will fix these throughout the week. If I may ask you a favor: Please leave a comment below (or email me) if you spot any issues with the design. Thank you so much.

Other things I’d like to do with the design of the site:

• Improve rendering performance: Stress-test and benchmark CSS performance, and improve paint times
• Enhance the site navigation experience: A few key site navigational aids were introduced in version 2, such as the menu bar and better pagination. I will create more interfaces to make Six Revisions content easier to navigate to.

Code

In terms of front-end development, these things still need to be done:

• Web performance optimization: CSS selectors and media queries need to be optimized, JS and CSS files need to be combined and be served compressed, the average web page file size of Six Revisions must be reduced, the web font has to be moved to our CDN to cut down on DNS lookups, etc. When I’ve tackled the “easy” web performance issues, I will go for more advanced WPO improvements, such as using inline CSS so that only style rules needed to render the page will be included in the request.
• HTTPS Everywhere
• Modularize the stylesheet to make continuous site development easier