A few months ago, Hack Library School posted about e-portfolios and their benefits. Ever since, I’ve been working on creating my very own e-portfolio and thought that I would share some of the things that I’ve learned. I’m working on a 4 part series that describes the different things I’ve been thinking about while designing and creating my e-portfolio including content, design, publishing, and mobile.
Having a mobile version of your site might not make sense, especially if you’re using a product that creates a mobile version for you. WordPress is an excellent example of a site that creates a mobile version. About.me creates a very nice looking and usable mobile version, but flavors.me does not.
If you are using a service to make a mobile version, you might not be able to have enough control over the code to create a mobile version. If this is the case, you can’t do much about it.
If you created your own site or if you have access to the code of your e-portfolio, you can create a mobile version of your site!
Directing towards a mobile site
There are a couple of ways to direct the user towards a mobile site. My favorite two use JavaScript in the <head> to analyze the user’s browser and then use that to direct towards the correct site.
- The first version recognizes the size of the browser. If the browser is less than a certain size, it will direct the user towards a different site (the mobile site). This article on CSS Tricks describes the code and how to use it. The problem with this code is that some of the newer phones have displays that are pretty big. This code doesn’t really work correctly on those phones. This code doesn’t really work on phones that are turned landscape–which is a problem because the Barcode Scanner app forces phones to be turned landscape.
- The code I use is from the site detectmobilebrowsers.com. This code will detect if a user is using a mobile browser and direct the user to a mobile site. I love this code because it doesn’t have the same issues as the above solution. It also includes several different scripts, so you can use whatever script you’re most familiar with. All you need to do is download the correct script and link to it from the <head> portion of your code. Make sure to update the URL in the script before you use it. Otherwise it’ll just direct your user to the Detect Mobile Browsers site!
A few thoughts on how to make your site mobile friendly
There are a couple of ways to make your site mobile friendly. The easiest way is simply to create a new CSS, but sometimes the layout of a full site doesn’t mesh well with the mobile environment. If this is the case, just use the full version as your starting point and trim down to the mobile version.
The mobile version of my e-portfolio adds a page for contact information and directs the user to visit the full version to view some of my work examples. There’s a new CSS that makes the content mobile friendly, too. To accommodate the new styles, I had to redesign some of the layout, but that wasn’t too hard.
There are also a lot of tools that you can use that will do all the heavy lifting for you. If you decide to go this route, make sure to research the tool you’re using. Some of these services do cost money, or at the very least require that you register with them. Check out this Mashable article for a list of services you can use.
I’m not going to get too much into this topic because there are a lot of good articles out there that can explain this a lot more than I can–and I have a lot more stuff I want to cover in this post! To read some more on this topic, check out this article from Smashing Magazine. Jon Raasch does an excellent job of explaining mobile style sheets and things you should think about while designing for mobile.
But… Why should I design a mobile friendly version?
This question is one I struggled with when designing my e-portfolio site. I knew I desperately wanted to try creating a mobile version, but I couldn’t really justify spending the time exploring mobile solutions. But then I started reading about mobile sites in the library.
In a Library Journal’s Digital Shift article from this past August, Matt Enis said:
And, people are rapidly adopting mobile technologies. Forty-six percent of U.S. adults now have a smartphone, up from 35 percent in 2011, and 41 percent now have another type of cell phone. Fifty-six percent of adults own laptops, up from 30 percent in 2006, 44 percent own MP3 players, up from 11 percent in 2005. Almost 20 percent own tablet computers, and ownership of those doubled this past holiday season.
QR code in a library, from http://blogaboutmurphy.blogspot.com/2010/10/qr-codes-and-library.html
With the growing amount of mobile users, libraries need to and are working on creating mobile solutions for their users. Libraries can use mobile OPACs or they can use QR codes for digital tie ins to physical collections.
Mobile definitely has a future in libraries and, in my opinion, your e-portfolio should reflect that. This will show that you not only have the skills, but the understanding and knowledge of the role of mobile sites in the library field.
Finally, if you have a mobile friendly version of your site, you can hand out business cards with a QR code or a web address. When a potential boss or client or contact or whatever gets your card, they can immediately visit your site and immediately use it, which is always a plus!
Library, Baby! 