TechSoup.org The place for nonprofits, charities, and libraries

Does Your Website Work Across Devices?

Does Your Website Work Across Devices?

  • Responsive web design is where, instead of building separate web sites for mobile and desktop screens, the same web site is designed so that it can be view on all devices – desktops, tablets, mobile phone, e-readers and even gaming consoles. 

    This web site reviews the various tools you can use to determine if your web site has a responsive design. My favorite of the tools he recommends is responsinator.com. Type in your web site and see how it looks on a variety of devices. Do the same with your blog.

    Now, if I could just know easy ways to create a responsive web design.... I'm no web designer...

  • My general advice to my clients is not to create a separate mobile site unless there is a compelling reason to do so. I build and maintain WordPress sites and there are a lot of themes that adapt well between stationary and mobile screens.  It is even easy to search themes by that specific feature. I have checked out many of the mobile-ready WordPress themes on both my smallish Android phone and my Nook Tablet and they look good. I also find that most of the time, I end up clicking on the "full site" link on mobile sites because the mobile version just doesn't provide the info I am looking for. 

    -Eva

  • Hi, Jayne.

    This recent post on NetSquared might shed some light on things, as it covers some of the basics of responsive design in conjunction with WordPress. It also links to a another good post about the basics of responsive design in general. These are both by Bari Samad, digital communications consultant at TechSoup.

    Incidentally, we also recently asked our Facebook friends what sort of mobile strategy, if any, they have for their websites. Here's what they said.

    Does your org have a mobile strategy for its website? Is it considering responsive design?

    Michael DeLong | Online Community Manager

  • Jayne,

    If you want a starting point you could checkout Foundation at http://foundation.zurb.com/

    I strongly recommend learning the basics of SASS http://sass-lang.com/ and jquery http://jquery.com/ as starting advanced skills that you will need to use to do this.

    You will also need to start thinking about Adaptive Images as well, as you not only have small iphone3 dislays but the "retina" displays that expect high quality images http://adaptive-images.com/ is a solution with several technical issues, but shows the mechanics of what you need to do.

    Good luck

  • Yeah, again - I just don't have time to learn to be a web designer/programmer. I've always maintained my own web site, and been able to keep it accessible for people that don't have the latest, greatest computers and browsers, or that use assistive technology. But I think all the mobile tech is more than I can address by myself... and there are SO many people accessing web sites almost exclusively by smart phones rather than devices with large screens - I know I'm frustrating folks by not having a web site they can review with such easily.

    Something for nonprofits to consider....

  • Found this recently:

    MobLab Tip o' the Day from Greenpeace - @MobilisationLab on Twitter:

    This post from Mashable gives you some of the quick and easy tools at your disposal for getting that mobile look for your site: 

    • If you don't want to start from scratch, there are templates you can choose from goMobi
    • If your focus is your landing page, Landr is one tool to check out 
    • If you're after simple, easy but also customizable, there's DudaMobile

    Read the full post at Mashable: 7 Tools for Creating an Optimized Mobile Website 

    Has anyone tried any of these tools for your nonprofit, library, school, government agency, etc.? How did you like it?

  • Yea I have problems with that often. Most of the

    time when I'm on my iPhone, I have to click on mobile sites

    because the regular website isn't compatible on a mobile phone.

    One way you can make your web page well suited for the

    iPhone is by degrading your actual web page. Anything beyond XHTML basic

    will be great. It's important not to make anything too tiny and

    also to use JavaScript carefully and hide them to make it easier to navigate.

    -Rehanuma

  • There are some great tutorials on YouTube if you got a few hours and follow them then you should have no problem getting a responsive website up and running

  • Another great responsive/screen viewer I've found was http://lab.maltewassermann.com/viewport-resizer/ It's set up so you just have to drag the box to your website's tab and it will allow you to see the sizes on a variety of devices. 

    In terms of building responsive and fluid websites, it is actually a lot easier than you think. You just need to get the basics down, but if that isn't your case there are plenty of other great ways to build a site to be viewable across all browsers and screen sizes. Some of the quick fixes would be to build off of a framework such as Wordpress, Foundation, or Twitter Bootstrap. As for the basics of understanding how a screen responds and learning responsive, I've recently stumbled across this blog post that explains it pretty well.

    http://thirdsectortoday.com/2014/03/05/demystifying-responsive-web-design/

    Cheers, hope this helps!

    -Ty Stelmach

  • We recently made our website responsive using html 5 and as it is not used much yet, we are unable to track the errors in a proper way. Here is our website: https://www.esds.co.in/

    Can someone suggest me some tool that can help me in finding the issues related to html?

  • First things first, the site looks great, executed very well!

    The only major problems I saw while scaling is the widths or max-widths of some of your items (mainly the nac) drop down too low to display the nav as one list, instead it shows it as 2 rows.

    ie (this is how I see the nav on most computer screen sizes): This can be fixed through the total width of the navigation.

    cloud  data center  solutions  resource

    about us

    The other main problem I saw was the blurb you have in the header image that says "Get your business apps instantly..." seems to have been made on top of the image in Illustrator or Photoshop, so not only are you losing readability, you also lost a good chance as some free content oriented SEO. I would recommend putting that in through code instead, so when Google crawls your site, it can pick it up as index-able information.

    A great site to use to check is: https://www.responsinator.com/

    That's just my 2cents, good luck on your endeavors!

    -Ty Stelmach