You can’t just wrap old websites in bootstrap and call it a day

Just because you wrapped an existing website in bootstrap doesn’t necessarily mean it’s ready for use on mobile devices. This is especially true if the website was originally designed for desktop browsers. Yes, bootstrap can significantly improve the user interface and make it flexible across multiple screen sizes. But it’s also up to you to roll up your sleeves and make sure the code behind the scenes is also worthy of being mobile-ready.

So, here are a three challenges to consider that will help keep your smartphone using visitors happy.

Challenge 1 – The internet connection on mobile devices is not as reliable as your home or office wired network. That’s a fact. Download speeds can and will vary significantly. The larger the website in MBs, the more links it has to download, the more non-optimized images then the longer it will take to render and become ready for use, especially on a mobile device. And mobile users are a very impatient bunch when it comes to sluggishness.

Size does matter with web sites. Smaller sized files download faster. The fewer number of files that make up a website also means faster downloads. Optimize, optimize and optimize some more. Minify files. Combine multiple files into one. Optimize images for web display.

Challenge 2 – Site navigation needs to be rethought and resized with mobile users in mind. Modern mobile devices use finger-based navigation, as opposed to high-precision mouse pointers. Teeny, tiny buttons or links that look cool on an ultra-high resolution MacBook retina screen positively suck when you are trying multiple times to click on them with your fingertip. On some websites using desktop navigational elements on your phone becomes like a macabre video game as you repeatedly play hit-or-miss with your fingertips.

Mobile websites should be finger lickin’ good. Okay, maybe you don’t really have to lick your fingers, but at least right size your navigational elements while keeping people’s fingers in mind. And fingers come in all shapes, sizes and levels of dexterity. Bootstrap can help with this.

Furthermore, your design and testing should work equally well in both portrait and landscape modes (phone right side up or phone on its side), and you should be able to switch back and forth seamless between the two modes in the same browser session.

Challenge 3 – Mobile devices are significantly more sensitive to browser memory leaks and bloated web pages. The mobile operating system will simply kill of any app that it deems to be using too much memory. And most of us are simply not good stewards at keeping our mobile browsers tuned up and happy. Browser caches grow huge and don’t get cleaned out regularly; we keep too many tabs open and probably have more information in our browser history than the library of congress. To further add to our woes, many of us let our phones run for weeks without a restart which can allow memory leakage to grow over time.

Tweak as many aspects of web page performance that your time will allow. Optimize old code by re-writing and striving to add new efficiencies. I know it may sound crazy, but if your site is particularly large and complex then consider creating focused, mobile-only sites that have scaled down content, rather than trying the one-size fits all approach. Smaller sites not only load faster but they are easier to navigate, take up less memory and typically perform better.

How to use social media if you are in a disaster area

If you are directly affected by a disaster, rather than a curious bystander, there a number of important things to know that will help you get vital and potentially life saving information as well as to help responders get a better picture of what’s going on. A disaster is any event that significantly affects the lives, property and infrastructure over a large geographic region such as hurricanes, floods, tornadoes, earthquakes and tsunamis.

Why blog about this? During the week of September 11, 2013 I got a firsthand, on-the-ground look at the impact of social media as a large scale flooding disaster literally unfolded before my eyes. As a geek who is a volunteer backcountry forest ranger and a former paramedic with search and rescue experience, I was well prepared to gather information for making potentially life changing decisions with my family and friends. However, I was surprised at how little information some of my friends and neighbors were able to glean in today’s world of the real-time information fire hose.

Follow authoritative sources as soon as possible. The very first thing you should do, if you haven’t followed these Twitter accounts beforehand, is search for the following websites in your area as soon as you become aware of a disaster:

  • Search for your local emergency management office, for example: “boulder office emergency management”, and here’s the an actual site . Look for Twitter feeds, facebook pages, and many authorities even allow you to sign up for emergency messages. You should sign up for all three!
  • Also search for your city police, country sheriff on Twitter using search terms like “boulder county sheriff twitter.” Here’s an example.
  • Follow your local news stations such as this 9news feed.
  • Local newspapers sometimes set up streaming social media feeds like this one.

Here’s a few actual (scary) tweets to give you an idea of the type of information to expect:

@boulderpolice : El Dorado Springs – S. #Boulder Creek is at 1600 CFS. Please go to higher ground ASAP. #BoulderFlood

@MikeNelson247 FLASH FLOOD EMERGENCY – Boulder County! Life threatening situation! Get @StormShieldApp now! #7News #cowx twitpic.com/dd3iy3 #Boulder

You may also automatically receive a Wireless Emergency Alert (WEA) in the form of a text message from your local authorities. Having heard quite a few of these messages for real, your phone will squawk the most bizarre alert tones you’ve ever imagined several times in order to get your attention. These are a very recent addition to the local, State and Federal emergency broadcast tools. Yes, you can even receive these if you are traveling and temporarily residing in an affected area.

A small time window for life and death decisions. The critical window of time starting immediately before and as the disaster event is occurring is when most of the life and death decisions are made with sparse and often contradictory information. If you are in the disaster area then getting early and continuous updates of information becomes critical. Even authorities won’t have a complete picture of what’s going on yet but they almost always issue bulletin’s, tweets and facebook posts if a disaster is imminent. It is during this period that family decision making becomes immediate, personal and potentially life changing. More authoritative information is better. Second hand rumors, innuendo, and twitter spam messages are just garbage that can be fatally distracting.

There will be an initial information lag. If you are in a disaster area, you want information. You want it now and you want it straight with no B.S. But, the truth is that authoritative information will have a lag time especially at ground zero and during the initial phases of the disaster. Authorities need precious time to gather reports, share bits of information, and brainstorm under intense pressure to try and make sense of what’s happening. Official news agencies also depend on the authorities, so their information lags as well. As long as you have an internet connection hang in there and keep monitoring.

What if the power goes out? If the power goes out, limit your smartphone and tablet usage to regular intervals, such as every 15 to 30 minutes, in order to conserve your batteries. If your car or truck is in a safe place and not affected by the disaster you can also use your car charger to recharge your phone. If you have a traditional land-line phone those can often stay alive even if the power is out.  Call someone outside of your area to someone who has power and can do information gathering for you as well as relay messages to family and friends. VoIP phones usually come with a battery backup. Conserve that battery by turning it off when you don’t need it.

Let family and friends know you are okay. Send regular updates to your family and friends via facebook and email. This makes sure they get the messages, rather than them having to sort through potentially hundreds of other tweets.

What can I tweet? There are things you can tweet that will help local authorities and other people in your area to understand the situation on the ground. Some authorities use twitter analysis tools to filter out the noise and try to get to the most important information. Here are my suggestions:

  • If you are in an immediately life threatening situation try to call 911 first. This should be a no-brainer.
  • If 911 is busy or unavailable then tweet to your local authorities your address, the nature of the emergency and the appropriate hashtag for your disaster.
  • Find out the hashtag for the disaster. You can start by doing twitter searches on the name of your area (e.g. city, county, State), or the name of the hurricane, etc. If you don’t know the hashtag, because maybe it’s very early in the stages of the disaster that one hasn’t solidified yet, then add city and state to your tweet.
  • Tweet about things that affect lives, property or infrastructure such as roads and bridges. Good examples of helpful tweets include downed power lines, creeks going over their bank, gas leaks, flooded roads, and damaged bridges.
  • Some twitter applications can allow you to share your GPS information when you tweet. If you feel comfortable doing that then check your twitter application settings and turn on location sharing.

Here’s a couple real-life tweets from local people during the Colorado flooding:

SCANNER: ponderosa trailer park off broadway in boulder getting reverse 911 to evacuate NOW #boulderflood

Iris & Bdwy severe flooding, impassable 1233am #boulderflood #cowx

What type of tweeting is not helpful? General chatter and tweets that have no location information along with a description of the problem are not helpful and make it harder for everyone to find useful information. If you want to talk among friends then use facebook or set up a Google Hangout. Here are a few examples of non-helpful tweets:

“my basement is flooding”

“Does anyone know what’s going on?”

“heavy rain here”

“the sirens are going off downtown”

What else can I do to prepare? If you live in or recently moved to a disaster prone area such as tornado alley or an area that gets hit by frequent flooding one of the best things you can do is get a weather alert app for your phone, such as this one from weather.com, or get a weather radio alert device especially if you turn off your phone at night. These days during the daytime most of us are tapped into many information sources that would alert us to problems fairly quickly. Potentially dangerous events can still happen at night and oftentimes they do.

Changing your Twitter password – Bad design or security hole?

When you reset your Twitter password it does not automatically cascade across all of your allowed applications. In other words, ANY Twitter app will continue to function just fine until you manually revoke permissions. Yep…manually. The apps even continue to work after you, say, reboot your phone. However, once you’ve revoked permissions then most apps will prompt you for a new password. More on that at the end of this post.

Why should you care? Because if your Twitter password or your smartphone is ever stolen and you don’t revoke permissions, then the bad guys can continue to use Twitter apps that you approved.

Twitter doesn’t really tell you much about how password changes work. On the password changed acknowledgement page there’s a deceptively mild mannered blurb of text that simply asks if you want to review the applications that can access your account. This is what the page looks like:

Call me crazy, but it seems natural to me that if you change your Global password, that any application using that password should be auto-majically changed as well. The technical answer is contained deep within the Twitter Developer FAQ:

When using OAuth, application connectivity and permissions do not change when a user resets their password on twitter.com. The relationship between Twitter, a user, and a third-party application do not involve a username and password combination. When a Twitter user changes their password, we’ll now ask the user whether they would also like to revoke any of their application authorizations, but any revocations are manually executed by the end user.

My response to this is your average user has no clue about the pros and cons of using OAuth and they most likely don’t really care.

My immediate suggestion to Twitter is that they should provide a “Learn More” link on the password has been changed acknowledgement page that provides informative bullet points on how changing your password affects or doesn’t affect other Twitter applications. They should also include a warning in bold letters that tells you that applications can and will continue to use the old password — until you revoke their access.

Now, full disclosure is that I did get my password stolen and I was, fortunately, able to quickly reset it before any major damage happened. I was lucky. However, it wasn’t until a day later that I had done enough research to know about revoking access on all of my applications. Like I said above: I figured the password change would automatically affect all applications. However, I simply got curious when I noticed my Android Twitter app kept working fine and never asked me for a new password. It was possible the criminals could have still used any of these other applications with my old password. Yikes!

Conclusion. My experience after revoking permissions wasn’t exactly seamless and your mileage may vary (YMMV) depending on how your third party app was built. My Android Twitter application simply appeared to send a tweet with no indication anything was wrong. I only knew it wasn’t sending tweets because I checked using Twitter’s web app. Only after I did a full restart on the phone did the app finally ask for a password. Hmmm.  TweetDeck at least let me know that my tweets failed to send, and within a minute it displayed a dialog box asking for the new password (TweetDeck screenshot below). Also, it’s important to note that after entering the new password Twitter mysteriously un-revoked my access and I could send tweets again.

The good news is that revoking access does immediately shut off an apps ability to send tweets. The so-so news is that once the correct new password was entered, then Twitter mysteriously un-revokes status on the app. This bothered me. I would think if you manually revoke access to an app, then as a security best practice you would also have to manually un-revoke access as well.

So, is this poor design, a security hole or maybe even both?

Resources:

Twitter Developer FAQ – How do password resets affect authorization?

Twitter Application Permissions Model

[Edited 8/26/12] Twitter Help – My account has been compromised

Random Hacks of Kindness #2 – Hacking for Humanity

This weekend I attended the Random Hacks of Kindess (RHoK) Conference in New York City. I even hacked a little and did a short presentation. It’s a conference for hackers who want to contribute free and open source software to help with humanitarian crisis response efforts around the world. The conference was held simultaneously at 21 global locations. The majority of the apps have some sort of mapping component. In attendance were hackers, project managers, fire chiefs and others from as far away as Sudan.

A variety of projects were worked on at the conference including  a mobile Incident Command app for responding fire agencies, hospital status monitoring app, and a Vulnerability Analysis and Mapping tool for the United Nations World Food Program. For a full list of problem definitions go here.

My project is a Twitter Search widget built for use with the open source ArcGIS Viewer for Flex. It monitors and maps Tweets for a geographic region, returning all Tweets within a specified radius. The ArcGIS Viewer for Flex is a mapping and visualization tool and it lets you integrate and display real-time data from multiple sources. In other words, you can use this tool to map Tweets alongside things such as earthquake data (GeoRSS), weather data (REST) and anything else with a geographic attribute, all in real time. Decision makers for emergency response agencies can use this visual fusion of real time information to help paint an operational picture, identify problems and see trends.

Many people opt-in for sharing their location information when they Tweet. If they have opted-in, the widget retrieves this information through Twitter’s Search API. You can see a live version here.  I originally built the widget for RHoK #0, right before the Haiti earthquake. This widget was used in the Haiti earthquake and the Tennessee flood. It has also been adopted by a variety of emergency response agencies that are using it today.

If you want to contribute to one of these humanitarian projects, check out the RHoK website for more information: http://www.rhok.org/

Resources:

11 Twitter OAuth Tips and Tricks

If you are building a Twitter app then at some point you are going to be faced with integrating OAuth. This article summarizes my top eleven time saving tips-n-tricks. If it helps you out or if you have other tips and tricks please share your comments and ideas.

Okay so what’s OAuth? Bottom line, it’s an open protocol that gives your app special access on a user’s behalf without having to deal with storing their user name and password.  So, rather than usernames and passwords, you are going to be handling tokens. You may already be thinking whoa! Aren’t I just trading one security problem with another? Sure, there are security issues with OAuth and if you search on the internet you’ll find plenty of rants about them. The bottom line is that tokens, like usernames and passwords, can also be intercepted and potentially used to access someone’s account. I address that issue below. But, if you want to build a Twitter app you are going to have to figure out the best way to implement OAuth, end of story.

Read on and let me know what you think:

  1. Before trying to build an Oauth library from scratch, check out ones that have already been built. It will save you a ton of time. For starters, check out this page: http://dev.twitter.com/pages/oauth_libraries
  2. Read Twitter’s article on “Authenticating requests with OAuth.”  It’s not very long and I thought it provided a lot of very helpful information.
  3. Register your app at http://dev.twitter.com. If you don’t register, then OAuth transactions will not work.
  4. When you register your app with Twitter, on the settings page make sure the Callback URL points to an actual, functioning, domain name whether you will use it or not. It should look something like this: http://mydomainname.com/oauth.php. You’ll quickly find out you can’t specify localhost, or if you do it doesn’t work. More on that in a minute.
  5. If you are building a web-based Twitter app you will need to run all your requests through a proxy. In your proxy, you can override Twitter’s Callback URL parameter by setting your signature’s oauth_callback parameter (see reference section below for more info). This is especially useful for prototyping and testing when you want to use something like http://localhost/oauth/confirm.php. If don’t override the oauth_callback parameter, then you can’t use localhost for testing.
  6. Never ever store your Twitter consumer key or consumer secret on the client. Client apps can be de-compiled and then your secret won’t be so secret anymore.  Store these on your proxy.
  7. Always encrypt oauth_token and oauth_token_secret when storing them on a client app.
  8. Use HTTPS for all oauth transactions that require a user name and password. Otherwise, this information can easily be intercepted, especially over public wi-fi.
  9. Twitter avatar images also require the use of a proxy. Twitter has implemented fully restrictive cross-domain polices so that web browsers can’t access these images directly.  If you are getting cross-domain errors then check out this post for hints. 
  10. Twitter’s OAuth access tokens don’t expire, although for security reasons it’s a good idea to refresh them on a regular basis. Just remember, refreshing them does involve forcing the user to re-login with Twitter.
  11. Twitter has a very handy online tool, called the Twurl Console, for testing out API calls via HTTP and seeing the headers and results without having to write any code. Once you have registered your application, you can find the tool here: http://dev.twitter.com/console You can also use something like Firebug or Fiddler, but they don’t have all the twitter API commands built into a pulldown list!

Just a few references:

To see a working OAuth sample app along with Flex source code and PHP proxy go here.

Oauth 1 Website: http://oauth.net/

Latest OAuth spec RFC5849: http://tools.ietf.org/html/rfc5849

Reference to the OAuth call_back parameter: See section 2.1 of RFC5849 above. To see the call_back implemention in the code sample above, look in the file EpiOAuth.php.