First of all, if anyone says to you "just 'throw together' a mobile-friendly version of your site", don't be fooled! It takes longer than you think! If you have a deadline, try and give yourself as much time as possible.
Sorry, I don't mean to scare you. I'm just trying to give you a heads up. It's actually quite easy, but time consuming.
I'm writing this with the assumption that whomever is reading it already generally knows how to go about making their site handheld-compatible. If not, note that you need to make a separate CSS file that manipulates your HTML to display according to handheld specs. You call your mobile CSS file with a media query, which ascertains the screen width of the browser and then uses the appropriate CSS file. Google it, and I'm sure you'll find lots of stuff. :)
Media Query
I tried to use this media query in my HTML <head> tag for calling my mobile CSS file:
<link rel="stylesheet" type="text/css" href="css/mobile_style.css" media="handheld, only screen and (max-device-width:480px)"/>
But for whatever reason, it just wasn't working.
I found this website to help me out, and I ended up using the author's suggestion for a media query:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<link media="only screen and (max-device-width: 480px)" href="/css/mobile-style-home.css" rel="stylesheet" />
It worked.
Start from the Bottom Up
I basically just made a duplicate of my desktop CSS, named it something new, then altered it to make it my mobile version. I found it was easiest to start from the bottom and work my way up, as in starting from the background and working my way "up" to the stuff in the foreground. I commented code out if necessary because sometimes making changes to one thing affects another and you don't get the full result of the change you just made. As you get the results you want, un-comment your stuff back in little by little.
Use % Instead of em/px/pt
When you're designing for a handheld device, you need to keep in mind that the user will likely rotate their device when looking at your site. That means you need to design your site to react to whatever the width of the screen happens to be. We call that responsive web design, because your site "responds" to a change of screen width.
One good way to do this is to use % instead of em, px, or pt when setting up widths, paddings, and margins. For example, if you set the width of your main page container to 100%, it will always be 100% of the width of the browser window, no matter what the size of the browser window. So when the user switches from portrait to landscape, the width will go from being 100% of the width in portrait rotation, to 100% of the width in landscape rotation.
Don't Use <br/> All Over the Place
Okay, this one might be obvious, but I should point it out in any case. In my defense, when I built my site last year, it was one of the last assignments of my graduating year, I was exhausted from not having really slept for the last two years, and I think I concentrated a bit too much on the design, rather than the coding. So, I put a bunch of <br/>'s in some places where, if I had just taken the time to create a new <div> and add a margin or some padding, my life would have been easier creating the mobile version of my site. But, hind sight is 20/20 and you usually don't learn from laziness until it's too late. haha.
So, moral of the story: don't use <br>'s all over the place.
On the same note as above, it's a good idea to keep the mobile version of your site in mind when you're initially designing and building your site. Save yourself some hassle and design it and code it properly and appropriately so that when you go to make the handheld version it will be easier.
Lightbox May Not Be Your Friend
Don't get me wrong. I love me some Lightbox. I like that the user can cycle through a series of images or portfolio pieces without returning back to a main screen or anything. I actually used Fancybox on my site because Lightbox was giving me issues when I originally made my site. It was conflicting with other Javascript I was using. Fancybox fixed that. However, that said, have you ever viewed a site that uses Lightbox or an equivalent on your smart phone? It's tiny and unintuitive. On the desktop, when you mouse over the image, arrows show up indicating previous and next options. There's no such thing as mousing over on a handheld device. And where it showcases your image in a nice large frame on a desktop, the frame just doesn't get big enough on a handheld device and it doesn't do your image justice.
My solution for now was to just create a new page for the portfolio pieces. So, for example, if you choose a thumbnail on the portfolio page under the Flash section, it takes you to the "Flash Page" where large images of my work are displayed. I used anchor tags too, so that if you click on my Story Time Clock thumbnail, for example, it will take you to the Story Time Clock section of my Flash page. In that section you have the option of launching the actual Flash Story Time Clock page if you want. This was as close as I could get to showing a sequence of images of a portfolio piece without making the user return to the main Portfolio Page after viewing each piece, and still make it mobile-friendly.
Using an Emulator
The Opera Emulator I was using was proving to be a bit glitchy. I think with any emulator/simulator, it's a good idea to always test your work on the real thing. I tested mine on my iPhone. I'm not rich enough to own multiple devices, so for now I'll rely on my friends' feedback as they test my site on their devices. If you test my site on your device, please let me know if you find any glitches. I would greatly appreciate it.
Responsive Images
So, around midnight on Sunday night, I realized that although my idea of making a separate page for each section of my portfolio was pretty good, how was I going to make my images change depending on the rotation of the handheld device? I was overjoyed to discover that you can make your images responsive as well as your <div>'s! Not only that, but it's the easiest thing to do EVER!
I found this site online that explains it more in-depth than I do here and gives you other options too.
So, all you have to do is create a class for your images.
Example: .imageContainer {}
Wrap each of your images in a <div> with this class.
Example:
<div class="imageContainer"> <img src="../images/myexample.jpg" alt="My Example"> </div>
NOTE: Make sure that your <img src> code does NOT include the width and height, or else the responsive part won't work.
Give your imageContainer class a width in percent, so that it will be responsive when the user rotates the device.
Example:
.imageContainer {
width: 98%;
}
This will make sure your imageContainer is always 98% of the parent <div>.
Back in your mobile CSS, make sure the rule for your images has this code:
img {
max-width: 100%;
}
This means that the maximum width of your image will always be 100% of its parent. And since its parent is the imageContainer, which we just made responsive by telling it to have a width of 98% of its parent, the width of your image will change when the width of your imageContainer changes. You don't need to define the height
because the default is to keep the aspect ratio intact as the image changes.
How freaking cool is that?!! It's so simple! Yet so awesome!
One thing to note, though, is that if you have some funky CSS mouse overs happening on the images that you're using this max-width code on, it will break your funky CSS rollovers. I know, because it broke mine. haha. I accidentally added the max-width code to one of my thumbnails, which uses the z-index to bring one image on top of the other on mouse over. With the max-width code added, I had thumbnails all over the freaking place! haha!
My next goal is to create a tablet-happy version of my site. Right now, my site gets cut off at the bottom, as my friend and former class mate Laura Vanderkraan pointed out for me. (Check out her site and hire her! She's graduating from Humber College soon!) So, I'll let you know what I learn from that another time.
