If you have a smart phone or iPad or easy access to these devices, you might want to skip ahead in the post. However, if you are like me and still sporting a “dumb phone”, then this first section might be eye opening.
I consider myself pretty tech savvy, but for numerous reasons (the battery lasts a week on a single charge, it can be dropped from tall buildings and survive, and it can survive a drop into the kitchen sink) this is the phone I have had for 5 years:
Military Spec Dumb Phone
So how do I cope in this increasingly smart phone dominated world? For the most part, very well thank you! But there are a few things that I have recently used to help me navigate the smartphone world without needing to spend the money to upgrade (yet!).
Evaluating Your Website on a Mobile Device WITHOUT Owning or Using a Mobile Device
One of the most important steps for website design these days is making sure your site looks good on a mobile device. This is pretty hard for me to evaluate at the moment, but there are several helpful websites I have found to see what a website will look like on various mobile devices. I highly recommend ipadpeek. Below is a screen shot of what to expect to see when you go to the ipadpeek website:
ipadpeek Website
The default device is an iPad. There are also 2 iPhone options that you can select, the iPhone 3/4 or iPhone 5:
ipadpeek Device Options
Using your mouse, you can change to an iPhone view (the last two icons circled in red on the right), or you may rotate the device to be vertical (the first icon). Making sure your site looks good in the horizontal direction is probably your best bet, though, so I don’t know if the rotation feature is helpful.
To navigate to your website, just click in the URL box circled below:
ipadpeek URL Box
Once your cursor is in this area, you can type your URL using your keyboard or copy your URL from another tab and paste it into this area. Note you cannot type using the iPad touch screen buttons and your mouse. As an example, this is how Quilting Jetgirl currently looks on the iPad:
ipadpeek Quilting Jetgirl
OK, that looks pretty good. Now check out how it looks on an iPhone 4 when I scroll down a bit:
iPhone 4 Quilting Jetgirl
Interesting, the Menu looks different. And when I click on the menu, it looks even more odd:
iPhone 4 Quilting Jetgirl Menu
OK, Note to Self: I need to work on my menu color options so they look good on an iPhone! I learned something new today!
Tips for Website Design for Mobile Devices
Now we all have some idea what our websites look like on mobile devices. It can be rather eye opening just getting to look at our sites that way. Heck, I just learned a lot about my website putting this post together! What tools can we use to reduce the amount of website re-work necessary or surprises we find when we look at our website on a mobile device?
Image Size
I have been participating in the 2014 New Quilt Bloggers Blog Hop sponsored by Beth @ plum and june. There has been MUCH discussion about image size in our offline emails with one another. And the running advice on image size is:
{ADVICE} Use landscape formatted pictures that are 600 to 700 pixels wide.
OK, I thought, I should make my images larger. I can do that. So I did. But without a mobile device, I did not fully appreciate this advice. Let me illustrate. Here is a screen shot of a detailed quilting image in an old post that was on the smaller side (300 pixels wide):
iPhone 5 Small Image
And here is a detailed quilting image from a recent post that is 700 pixels wide:
iPhone 5 Large Image
Now I get it! The image fills the screen better and will actually give mobile device users the ability to see the detail. The smaller image might look fine on a PC or even the iPad, but iPhone or other smartphone users could not really see the images in my posts.
Here is another good piece of advice when thinking about images in your posts:
{ADVICE} Remember that the screen is tiny. Smartphones will condense all those columns down into the tiny window, and this can make them very hard to read without zooming.
What does this have to do with images? Well, if you are like me and occasionally, okay okay, fairly regularly have your images BESIDE your text, your website might look like this on a mobile device:
iPhone 5 About Quilting Jetgirl
While that image and text nestle happily side by side in my web browser on my PC, that looks really awkward and is hard to read on a smartphone. Ouch. Note to Self: Fix my About Me page.
Which leads me to my last bit of advice for images. This advice is good website design etiquette regardless of the platform you are using (PC, tablet, smartphone…):
{ADVICE} Images must download quickly.
What does that mean? Well, I do not recommend uploading a full resolution image to your website. Or if you do, use the tools within your media organizer to re-size your image after it is uploaded. Again, the advice is for an image to have a maximum of 600-700 pixels on one edge. This keeps file size much smaller and download speeds high.
Links and Navigation
{ADVICE} A short URL is better.
It is a lot more time consuming to type (and correctly type) a long URL into a mobile device web browser. The shorter, the better. This advice is mostly out of our hands when it comes to a unique blog post, but it might be helpful if you are considering purchasing a domain name.
{ADVICE} Long link text is easier to tap.
This almost seems like opposing advice, but if you embed links within your site, the larger the link text, the better chance a mobile user will be able to use the link.
Concluding Remarks
Website design has been around long enough that the majority of bloggers and website developers are semi-conscience of some basic design principles:
- Declutter
- Only strategically use color
- Invest in your photography skills
- Use easy to read fonts
- No pop-up windows
- Don’t use ALL CAPS
- Spell check
- Only underline links
- Don’t steal content from other websites
- Test your design
Oops, well, I was not doing a good job of testing my design across all platforms in use today. Tablets and smartphones are here to stay, and learning how to adjust website design philosophy as technology changes is a valuable skill.
Below are a few additional links to WordPress and Blogger specific tools / discussions about mobile device design.
This is super helpful for me…because I also use a ‘dumb phone’!! I’m going to try this site out and see how the mobile stuff looks!
My blog looks similar to yours on my ‘smart’ phone… the header is chopped off and the menu bar is different. I think the smaller menu is a feature of the theme so it doesn’t bother me (and all my links pop up in it) but my header bothers me because I wish it too would scale down! I only have a free WP so I can’t edit all that stuff 🙁 What a nifty site though! It sure will be easier to use that to check out blog changes than having to find my phone and keep reloading a page on that!
How come you are on Instagram when you don’t have smart phone? Great post. I hope to get back to it and try it out.
Great question, Vera. I have an iPad and I can use Instagram on it. However, it won’t stay connected to my wifi at home, so I am very rarely on it. It is super tedious – I have to email myself pictures, save them to the iPad, and then upload them. I wish there were a better way to interact on Instagram… but that’s how I’m currently handling it.
This is a good list of advice! I never really thought about what my blogs looks like on a mobile device. I kind of hate reading blogs on my phones, so just let blogger handle it with whatever is the default settings, haha. However, I already do quite a few of the things you mentioned, so at least my mobile readers aren’t entirely put out or annoyed with my reading my blog on their devices. Also you TLDR should be at the top of the post 😉
What great info. I will have to get on this
More helpful advice, thank you!