Droid update to KitKat removes Swype Keyboard

Motorola licensed Swype for their Droids for some years. Is gone with this
new iteration. Google Keyboard in the Play Store works pretty well using
gesture typing . A little different, so some getting used to. Oh. And you
have to turn on Gesture typing in it's settings.

https://forums.motorola.com/posts/11d7bddfcb


Google Keyboard works okay, comes with usual spooky privacy concerns about recording/uploading everything you type.

Simple Solution For Mobile-Friendly Websites

You probably don't need a statistic to tell you that mobile browsing is increasing

You probably don't need someone to tell you that you don't that it's harder to read a website on a smaller screen.

You probably don't need someone to tell you that you should make your website mobile friendly.

And you can probably do a Bing search to find out how to do it, perhaps in a better way than I did.

But getting something done right now would probably be better, right?

Here's what worked for me: CSS Media Queries

1. First, I made a copy of the full style sheet for IE less than version 9, because those browsers don't understand media queries. I was then able to pull the IE specific code out of the regular style sheet.

<!--[if lt IE 9]>
<link rel="stylesheet" media="all" type="text/css"   href="/css/morrison-ie.css"/>
<![endif]-->

2. Then I pulled only the most basic styling code out of the stylesheet to start the mobile css.
I changed some images to display based on percent, and some sections not to display:

.logoimg {width:20%;margin:1%;}
.bannerimg {width:74%;margin:1%;}
.titleimg {width:100%}
.contactbox {display:none}

3. I separated mobile from full with style links - iPad resolution is 768x1024.

<pre style="white-space: pre-wrap; word-wrap: break-word;">
<link href="/css/mi-mobile.css" media="only screen and (max-width : 768px)" rel="stylesheet" />
<link href="/css/morrison.css" media="only screen and (min-width : 769px)" rel="stylesheet" />
<link href="/css/print.css" media="print" rel="stylesheet" />

4. I added some viewport tags based on testing the stylesheet in various browsers, to make sure the pages were viewed in the correct size.

<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="viewport" content="width=device-width"/>

5. Added the "apple-touch" icon, which Android uses too, for shortcuts.

<link href="/images/mlogo57.png" rel="apple-touch-icon"/>

All in all those changes were much easier than composing this post in Blogger's interface.

Any Questions?