In case you haven’t noticed, the Kapor Foundation website has a new sleek design. For the past few months, we have been working with Sean Aquino to integrate a mobile-first design strategy into our website using responsive design (website & images adjust based on the size of the user’s device). Given that more and more people are using their smartphones and tablets to access web content in lieu of traditional desktops, we felt it was time to make our website more easily viewable by our mobile visitors. I wanted to share a few of our learnings from this process. There is also a list of resources at the end of this blog post that may highlight these points in more depth.
1. Do your homework.
There are many different mobile website options – custom built mobile platforms, mobile apps, separate mobile website, etc. Some are more costly or cumbersome than others, so understand the pros and cons of each option. We went with responsive design because it allowed us to have only one website to work with. This is great for us, but it may not be the best option for your organization.
2. Know your audience.
How do your visitors use your site? What are they trying to do or learn when they visit? How many mobile visitors do you have? Things like user focus groups, user testing, and google analytics can help you answer these questions.
3. Simplify and streamline your site.
Once you have the answers to how visitors most often use your site, your website should aim to have the fewest steps possible to accomplish those tasks. Mobile users will be unlikely to click ten links to get to where they want to go on a website. This often means cutting down content on your site, sometimes sacrificing bells and whistles for what’s most useful to the user. It also means prioritizing content and having clean website navigation so that the most important content is easiest to access. Fewer and smaller images will also help your mobile site load faster.
4. Think about thumbs.
Most mobile users interact with websites and click links using their thumbs, so make sure your website is designed so that it’s easy to click links with thumbs.
5. Don’t forget about your desktop user.
In the process of deleting and editing content and simplifying a website, its easy to forget about the functions that are primarily done on a website by desktop users. For example, we know that nonprofits will probably never try to fill out a grant application or final report using a mobile device. So, we had to make sure that those tasks are still easy to access regardless of how a user visits our website.
Below are a few resources on mobile web design that may be useful for those of you who are considering this. There are lots of other resources out there, so look around! If you have questions, feel free to contact me, Tiffany Price.
Mobile Web Resources:
Our Web Consultant:
Sean Aquino – Design Uchi
Website with tons of examples of responsive design websites: mediaqueri.es
NotixTech Learning Videos
Mobile Web Design: Mobile web problems, the mobile user, the goal
Mobile Web Design: Design differences, mobile website options
Mobile Web Design: Design considerations
Mobile Web Design: Pros and Cons of Apps and Mobile Websites
(Note: We did not use nor do we endorse the consultant from these very informative videos.)