responsive

  • July 12, 2013

    Testing your Responsive Site

    Over the last year or so I’ve been involved with a few major projects that required responsive design/development. One of the most important things to remember about a responsive design is that it’s not just good enough to make sure your design shrinks with a smaller browser on your computer. Presumably, you’re doing this because people will be accessing your website on mobile devices. Therefore, you have to do device testing! In this post I will outline what I think is proper testing practice.

    Device Testing

    I know this can be difficult since not everyone can get their hands on a wealth of devices. You may be lucky enough to be close to an Open Device Lab, but if not, you should try your best. Note: If you’re an “agency” or a “firm” that’s advertising being skilled in RWD, you need to pony up and buy the devices. RWD isn’t just a buzzword and it should be done right.

    • iPhone 4, 5
    • iPad 2 or new iPad
    • Android 4.0+ Phones: Galaxy Nexus, Galaxy Note II, S3 or S4, Droid Incredible (one of them), Droid DNA or Razor Maxx
    • Android pre-4.0 Phones:  Moto DroidX, Evo4G
    • Android Tablets: Nexus 7, 10, Samsung Galaxy Note 10, Galaxy Tab 8.9, Kindle Fire, Moto XOOM
    • At least one Blackberry (Q10, Z10)
    • At least one Windows Phone (Lumia or HTC 8x)
    • For fun: a Kindle or some other eReader

    Of-course, do this at your discretion and based on your own analytics. If 0% of your users are using Gingerbread, pre-4.0 phones might not be an issue for you. My list for Android device testing is based on some cursory stat-searching, including LifeHacker’s most common phones and stats directly from Google, which you can view on the Android Dashboards page (these update in real(ish) time).  Finally, when it comes to RWD, device testing isn’t the only aspect. You also need to consider speed.

    lifehacker-android

    @brad_frost did a guide a while back on how to cheaply get real devices to test on. You can also check out Swappa for second hand devices.

    Browser Testing

    This should be nothing new, but with the whole host of new devices, it might be worth while to check out these browsers now:

    • The device’s native browser (Safari, Browser, etc)
    • Chrome on Android and iOS
    • Mobile Opera
    • Dolphin
    • Mobile Firefox

    Also, make sure to test in IE 8,9, and 10! If you take a Mobile First! approach, keep in mind that IE8 does not support media queries.

    Speed Testing

    You cannot assume that everyone will have your great 70mbps connection (that’s a real max speed for me). People could be getting less than 1mbps at times, and that’s terrible if your site is huge. I would recommend testing on:

    • Broadband (wired or wifi connection)
    • 4G (on multiple carriers if possible)
    • 3G (on multiple carriers if possible)
    • 4G and 3G while traveling

     Wrapping Up

    I understand that this can be cumbersome and cause a lot of work, and admittedly I haven’t been as diligent as I should be either. There are, however, way you can do this sort of testing without breaking the bank. Aside from what Brad mentions, you can do things like an open or closed beta, inviting people with different devices and connections to test on their devices and report back. I will generally have my friends and co-workers test designs for me. Or hey, you could always start an open device lab ;-)

    What kind of testing for RWD do you do?

  • January 6, 2013

    Web Based Password Manager

    I would love a web based password manager that’s completely accessible on all of my devices. I know that there are a lot of tools out there already, and I know there are some inherent security risks with this approach, but here is what I’m thinking:

    • It simply stores Title, URL, Username, Password, and maybe a notes section
    • It’s web-based
    • It’s secure
    • It’s responsive so you can easily add information for any device you own*

    I’m wondering if there is something out there already, if it’s a good idea, and if people think it’s worthwhile. What do you think?’

    *This one is important. I have 3 computers, 2 tablets, and between 2-3 phones depending on what I need to test. I don’t want to buy or download an app every time.

  • November 20, 2012

    My Slides from PABUG 2012

    Here you go! My slides from my talk, “Using PHP to Create a Web-­Based Mobile Banner Application” from @PA_BUG are available for download (links to my Public Dropbox folder). There is also a link to our current mobile app.  Thanks to everyone who came out, and to PABUG for having me!

    If you have any questions or comments/please email me at joseph.casabona@scranton.edu.

  • July 5, 2012

    Articles from Pocket July 5th, 2012

    Here are some of my favorite articles from my Pocket account. I’ll probably do this sporadically based on how much I’m reading/how interesting the Internet is being.