One way to tell a website that hasn’t been updated in a long time, or is defunct, is by whether or not it has a “responsive design”. Responsive designed sites are made to display nicely on any size screen – smartphones, tablets, laptops, etc. The essentially “redraw the layout” or respond to the available screen size. You can easily see this in action by loading up a site on your computer, then “shrinking” the screen (width wise). As it shrinks, the content should re-position itself (if it’s responsive) to fit on the current window size. There are many frameworks out there to facilitate responsive design. For the test site below, I used bootstrap:

https://quickthreads.com/

The site pulls in article summaries from several news sites daily for quick reading on any device. Below are screenshots of full screen and mobile views:

Full Size View

Mobile View

I put together a relatively simple “Progressive Web App” called SimplyWeather.  It uses a weather feed to create a simple forecast for your current location.  A Progressive Web App is supposed to act like a natively installed app, but written using web technologies.  If you load the above link on your phone, it should ask you to install to your home screen, at which point you can run it from there (it’ll look like a local app).

Overall, building a PWA is a bit of a PITA, with some very finicky and temperamental requirements.  I found the “service worker” and “manifest” particularly feisty.  Also, I’m not sure how to send updates consistently – the app seems to cache most everything, and not refresh styles or html even when you try to force that.

So, I think PWA’s still have a way to go, in terms of online documentation and examples.  Then it still remains to be seen if people prefer to just stay inside the app stores as they have been.

I recently spent some time researching “Progessive Web Apps”, or PWAs.  They are a relatively new way to make mobile apps which utilize the web browser, rather than requiring full installation via an app store.  Google seems to be driving this particulare movement.  Here are some links I used in my research:

Your First Progressive Web App – how to build a simple, functional app, with a demo included.

Debugging Service Workers – after you get into things, this link comes in handy

Web App Install Banners – this is how you get someone to install your “app” once it’s coded and ready.

Sampling of PWA tools

I’ll update this post as I find more resources, and publish a few PWA’s myself.  I think this is the future for many apps – easier to update and distribute and lower storage requirements on the device.

I was able to get a fairly simple web app set up here: Listomizer.  You can enter in a list of items, then have the app make a random choice, alphabetize them, or randomly sort them.  When you load this, your phone should ask you if you want to add a button to your home screen.  Then it looks like an app when you open it.

Mobile web traffic is exploding – if you are not aware of it, your website is probably already getting 5-10% of its traffic from mobile devices (smartphones, tablets, etc.). How should you respond to this sea-change in the way your customers access your site?

I’ll be co-presenting on this topic with Tom Allebach (sitecats.com) at the Penn Suburban Chamber’s annual “Small Business University” event, February 1, 2013.

View SBU Flyer

Learn about the major web strategies for accomodating mobile visitors – including apps, “responsive design” and others. While preparing for this presentation, I was inspired to convert my website to a responsive design. It now renders reasonably well on all types of devices, without requiring multiple templates.

If you cannot attend this event, contact me and I’ll gladly discuss mobile strategies with you in relation to your business.

I just launched a revamped website, using a responsive-design template. What is that, you ask? Well, it means that the site should display well on any device – from a 20″ desktop monitor, to a smartphone screen. I believe many sites will go to this type of design going forward.

To see it in action, you can just take your browser and shrink it – squeeze it vertically, and see how the content shifts. Or load it in your tablet or smartphone. There are still some glitches to work out with the content / styling, but overall, I like the responsive capabilities.