The perfect mobile portfolio should be focused on showcasing your work and providing just enough information to help potential clients or employers want to get in touch.
A typical mobile user is on the go and stopping by your mobile website just to “check it out”, or to find a specific piece of information quickly, such as how to contact you. Below are five steps you can take to create effective mobile website design for your portfolio, that is sure to grab – and hold – your visitor’s attention.
1. Design for the right scale
Most mobile users have smartphones with a display area of around 320 pixels wide in portrait mode. Make your logo or name big, beautiful and visible so that it is memorable. A few other things to keep in mind when planning your mobile website design:
- High-contrast colors. Not only is it easier to read, high contrast text looks better on a backlit screen and helps your links and call-to-action elements stand out.
- 3D elements. Avoid super-flat designs that don’t have a lot of definition. Not only will they look cheap on a mobile screen, they are not as engaging.
- Clean typography. Evenly-weighted fonts are best. Avoid the super-thin or super-decorative. Read this post for more mobile typography tips.
2. Let your work speak for itself and display it proudly on your front page.
There are several ways to format your gallery, but large images will get the most attention. Avoid using thumbnail galleries that open images in lightboxes or new pages, as it can become tedious for your visitors to navigate. Opt for a simple slider that takes advantage of touch-screen gestures, but remember to include traditional controls for those without a touch-screen.
3. Simplify your navigation
Your mobile visitor is likely out-and-about and not interested in reading a four-page case study or viewing all 67 of your graphic design experiments. Narrow the content down to what can fit comfortably on just a few pages.
Most mobile users favor a traditional, horizontal nav bar with large text or button links rather than drop-down menus or navigation pages that require clicking a “menu” button.
Adding social networking links to the header or footer where they are always visible is another great way to give your visitors a quick means of connecting with you when they are ready to learn more.
4. Add a compact biography
Other than your work, prospective clients want to know a little about you. You don’t have a lot of screen real-estate on a mobile page, so try a “letterbox” portrait instead of using a standard thumbnail and try to describe yourself and your specialties in one to two short paragraphs.
Essential links for this page include your CV and link to your full website. Sub-pages should use the same interface as the rest of your mobile site, and format content in easy-to-read paragraphs or lists.
5. Make it easy to get in “touch”
On full websites, we are used to using forms and “mailto” links when offering a means of contact. These methods are less successful on mobile devices and can pose a lot of usability problems. Use Click-to actions instead.
Click-to-call, click-to-email and click-to-SMS are simple tags that are understood by most modern mobile devices and allow your visitors to use their native voice, email or SMS clients for contacting you. If you prefer to funnel communication through a social network, make sure to include a link on your contact page, or use the network’s mobile-friendly widget for sending a message or friend request.
Optional: include an RSS feed of your blog
Your blog is probably an important aspect of your main website, shows off your expertise and provides your domain with SEO value, but it has less of an impact on your mobile portfolio. However, you may still wish to include it, especially if your blog is popular. You can link to an RSS feed, style a mobile template for your blog page, or use an online service to create a mobile feed for you. The result just needs to be clutter-free, readable and able to scale images properly.
Putting it all together
Wix’ mobile website builder allows you to quickly put this all together without advanced coding knowledge or special scripts. If you are inspired to go all-in and showcase your mobile website design skills, here are a few resources to help you achieve a solid layout with all of the above features:
Pingback: Mobile Websites: Where it’s at |
Can you suggest any mobile website service providers?
Hi Laviera,
Please can you expand on your question and provide more details of what you are looking for?
thanks
Betsy