As I’ve previously described, I am planning to design and build my own theme for Responsive Geometry from the ground up. Now that Responsive Geometry exists, the next step in the process is defining project requirements that will help guide the design and development process. There are six major questions I’m asking myself:
Visual Identity: What kind of look and feel do I want for the theme?
There is so much I need to explore to answer this question completely and much of that exploration is going to happen in the design phase of the project.
To start though, I answered a question that I’ve often seen used with clients. What are some adjectives that you would use to describe the look and feel of your future website? My adjectives include:
- bright
- clean
- intricate
- colorful
- welcoming
- sleek
Search engine optimization: What design elements do I need to incorporate in order to make having great SEO achievable?
Google has recently announced that they are changing their search algorithms in a few weeks to award mobile friendly website formats in search results. There are a few design implications to consider as a result of these new Google-established parameters. To be clear, since the dawn of responsive websites, it has always been a good idea to consider the following requirements:
- Content should reflow to fit the width of the device.
- Elements such as images or videos should change width as necessary so that they never flow beyond the available screen real estate.
- Media queries should reformat content as screen width changes.
- Google recommends a 16px base font size.
- Typographic hierarchy should be defined relative to the base font size.
- Make sure that text has reasonable line heights.
- Use a restricted number of font faces in the layout.
- Make sure any “tap targets” are sized appropriately (minimum 48px wide and tall for your most important targets) on mobile. There should also be ample space (about 32px) of space between targets.
Aside from pure design considerations, there are a number of best practices that should be incorporated into the code and content structure as well, including the following.
- Use alt tags for all images.
- Make sure post titles use <h1> tags and that header structures are used hierarchically throughout the content.
- Use breadcrumbs that reflect category structures.
Content: What types of content formats will I need to account for?
Since Responsive Geometry is intended to be a blog that covers both design and code related topics, there are a number of specific content pieces that I want to make sure I account for in terms of design. I want to make sure design patterns are considered for the following content pieces:
- a standard blog post
- a tutorial
- a code snippet
- a screenshot
- an author biography
- a collection of related posts
- a category page
User experience: What are the user goals for visitors to the site?
More than anything else, I want site visitors to be able to find what they are looking for easily. I want navigation and content structure to be logical and to support a visitor’s individual goals when they are looking for something on the site.
I also want users to be able to interact with the content in a meaningful way if they so choose. I want to make sure commenting on a post or sharing it through social media is easy and accessible.
Accessibility: What do I need to do to provide the best experience for all visitors?
I want to make sure that I build a website that is as accessible as possible because inclusivity of all people who access the internet is really important to me. As such, I’m going to try my best to comply with The Accessibility Project‘s Web Accessibility Checklist.
Browser compatibility is also a huge accessibility consideration. As such I’ll aim for graceful degradation in terms of my code and I’ll test my final theme in Internet Explorer 9+, Chrome, Firefox, Safari, Opera, and mobile browsers on iPhone, iPad, and Android.
Integrations: Are there connections to other software that I need the site to have?
This is a question I ask of project managers and clients before embarking on any web build.
In the case of Responsive Geometry, the answer to this question is simple: I want the website to integrate with Mailchimp so that users can sign up for emails. Otherwise, I can’t think of any other integrations the site will need.
Conclusion
Systematically thinking through project requirements for my own projects is not something I’ve done before, though the exercise of writing this post has taught me that I should. Though many of the items I outlined here are reflective of the approach I typically take to building websites, I think it is going to be infinitely helpful to be able to refer to these requirements as I move to the information architecture phase of the project.
Do you usually determine requirements for your personal projects or do you tend to jump right in? I’d love to hear your thoughts on this topic in the comments!