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