Ignoring Web Standards? There's an app for that.

by Justin 12. May 2010 02:48

The mobile web is broken. The modern approach to mobile web development is dead wrong, and flies against everything we've learned over the last 15 years.

I follow developments related to Google's Android OS pretty closely and I recently saw that The New York Times released an app for Android. The iPhone has had a New York Times app for a long time now. Android fans rejoiced, but I winced because I've seen this before—circa 1997.

Remember the heyday of Internet Explorer versus Netscape Navigator? Remember that both browsers were so incompatible with each other that two websites would have to be created for each browser? "Click here for MSIE, Click here for Netscape Navigator," or if someone was lazy they would just write "This site is optimized for..." whatever.

This was bad. We were glad these days were over. We finally really got that mess cleaned up, and with the release of IE 8.0 it appeared incompatibility problems were soon to be behind us.

And then the mobile web exploded. 

Suddenly, if you didn't have a version of your website in Apple's App Store or in Google's Market then you were behind the times. Engadget, BBC, Dictionary.com, NPR, USA Today, Yelp, etc all jumped on board. Colleagues asked if we were going to create our own iPhone app. Seriously? Are we so obsessed with following the latest trends that we forgot how to create a good website? Rather than creating an app that works on only one platform (i.e. Apple, Google, RIM, Palm, etc.), why not create a good mobile site that uses web standards? After all HTML works on all of those devices. Why are we forcing ourselves to reinvent the web standards wheel for mobile? We've learned nothing! 

Well, there's a reason these folks want to create an app for accessing their content—because their site sucks on the iPhone or on the Droid or on mobile devices in general. Usually their site sucks because of some or all of these reasons.

  1. Site contains an overwhelming amount of content/navigation that does not display well on a small screen.
  2. Site loads slow because of huge JavaScript APIs that perform unnecessary navigation animations, lots of big graphics, or lots of JavaScript and CSS. In other words, site is not optimized for desktops, much less mobile devices.
  3. Site contains pointless Adobe Flash animations, or flash based navigation, which can easily be done with web standards.
  4. Site relies on the onmouseover type of JavaScript events for navigation, which are awkward/hard to simulate on a touch screen.
Why not design a site that avoids these pitfalls? One that works on the desktop and on the mobile device? After all, compatibility problems were solved when we standardized HTML. An iPhone app, or an Android app, or any platform-specific app is not standard in any way, shape, or form. Let's take a step back and look and what even the big guys do wrong.
 
We want our desktop websites to be so needlessly fancy that we have to create a completely separate mobile website. Usually www.company.com would create a m.company.com mobile website.) Unfortunately almost all of these mobile websites suck. They lack the functionality of the normal site, they are hard to use, hard to navigate, and ugly as sin. A few examples are m.facebook.comm.allrecipes.com, and m.netflix.com. These sites were designed with speed and simplicity in mind, but their usability still sucks when compared to the real sites. How many times have you been on a mobile site desperately search for that "Full Site" link?
 
Fortunately for us browsers on the iPhone OS and Android use a fully standards compliant web browser and faster 3G networks are now ubiquitous. So we have to ask ourselves, why the hell are we still trying to build tiny, crippled versions of the real website? Why not just build a real website that is efficient and lends itself well to small screens as well as big screens? This is the path that I decided to take.
 
Why waste our time building mobile apps that are platform specific and only reach a small portion of the populous? Even Apple on it's best day only has about 15% of the worldwide mobile marketshare. Why kill ourselves making crappy, crippled mobile sites? It doesn't make sense, but that is the status quo so many blindly follow. No, let's build one website, that focuses on web standards, with simple navigation that doesn't overwhelm mobile users, and compress and optimize the site by cutting out fluff that slows mobile devices to a crawl. Infinite birds, one stone.

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Create a Mobile Friendly Website with ASP.NET Themes

by Justin 8. November 2008 10:15

Download the Demo (ASP.NET 2.0)

If you're reading this you realize the value of optimizing websites for mobile devices. I created an ASP.NET website that chooses a different theme depending on whether or not the device accessing the page is a mobile device. If a mobile device is recognized the theme displays a red background, otherwise a different theme is chosen which displays a blue background. Feel free to check out my online demo for custom theming mobile devices, and download a zipped version of the demo to see exactly how it works. Be sure to view the demo in both a mobile and non-mobile browser to get the full effect. If you don't have a mobile device try using the online Opera Mini simulator.

Supported Mobile Devices:

  • Apple iPhone
  • Apple iPod
  • Google Android
  • Opera Mini
  • PlayStation Portable
  • Handspring Blazer
  • Motorola Internet Browser
  • Pocket IE
  • RIM Browser
  • Nokia
  • Compact NetFront

How it Works

I've added some custom browser definitions to the App_Browsers folder. This extends the default ASP.NET browser definitions, which are not very good for recognizing mobile devices. There are two .browser files, courtesy of Owen Bradly's website, that contains the definitions. (I'll note that I added a definition for recognizing the Google Android as it was not in Owen's files.) Each time the Default.aspx page is request I check to see if a supported Mobile device is requested the page. If so then I change the theme to the mobile theme. The code to do this is very simple.

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_PreInit(object sender, EventArgs e)
    {
        if (Request.Browser.IsMobileDevice)
            Theme = "Mobile";
    }
}

If you're using Master pages you can always set this in the master page's code behind instead of each individual page's code behind.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,

asp.net

The Youtube Generation vs Moribund TV Technology

by Justin 27. September 2008 14:27

It boggles my mind that television networks still don't get it. Executives have chosen to bring back shows like 90210 in hope it will woo the younger viewers who aren't watching TV anymore. The truth is, we want to watch television, but we want to watch it when we want to watch it. We have been spoiled by the internet.

Television networks are still "time-slot-centric." They chose to strategically place shows on different days to compete with other networks, and to run these at certain times. If television executives really want to land younger viewers they are going to have to become "viewer-centric." That is, they must redefine television technology. With today's technology any episode from any television channel should be available at any time. Not just modern shows, but shows that go as far back as TV goes should be readily available for viewing.

It is this on-demand capability that make youtube so.. friendly. How many times have you turned on the boob tube, flipped through the channels and thought, "there's not a single thing worth watching on TV." How many times have you wanted to watch two different TV shows, but you had to miss one because two competing stations put them in the same time slot on the same day? So what do you do? You jump on the computer, navigate to youtube, and within moments you can find the show. On the other hand, with youtube there's a sense of adventure because I often discover a video of something new and fascinating. TV as it is now just can not compete with this!

My generation wants to go to the History Channel, browse through an endless list of shows, and have the ability to download (or stream) any show that I want to see. I'm talking about true on-demand television, I'm talking about completely shifting the paradigm of TV as we currently know it. I'm tired of being forced to watch boring Ice Road Trucker marathons!

In this type of conversation it's inevitable that someone will mention TiVo, but while TiVo is a step in the right direction it is NOT the solution. Its problem is that you have to schedule when the shows are to be recorded.  There's a certain amount of effort and research to find the shows you might want to see in the future. Then you have to schedule TiVo to record the show, and then find time later to watch the show.

That's too much work! I don't want to do any research at all! I want to be able to turn on the TV whenever I feel like it and choose what I want to watch, right now. I want nearly unlimited options. That's the problem with modern TV, it's old technology that is dragging its feet. It simply can not compete with the internet. The same thing that happened to the recording industry about a decade ago is now happening with the television industry. They need to wake up and smell the technology!

I propose paying for subscriptions to television channels. For instance, if I want to watch just the History Channel, Comedy Central, and the Travel Channel I can subscribe to those for a fee. Preferrably I could choose unlimited downloading of all shows, without commericials, for one fee; and then pay less for a streaming version of the channel with commercials. Why isn't this being done? The problem with TV is that it isn't as tailored to the viewer as much as the internet is. You have to watch whatever it is the channel wants you to watch, and if you miss a show you have to find the next time it reruns and catch it then. People today do NOT want to schedule their lives around TV shows!

Is it any wonder that ratings have dropped for season premiers on all the major networks? It's not that the shows are bad, it's just the technology is lame. More than likely more people are watching the shows, but they're probably downloading it online instead. TV is going to have to evolve, rather quickly, to be as flexible (or almost as flexible) as the internet or continue its inevitable death.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

The Rules of Web Development

by Justin 26. July 2008 16:04

As far as I'm concerned, there are only two rules when it comes to developing for the web.

  1. Do NOT use the <blink> tag
  2. Do NOT use Comic Sans
  3. Do NOT use the <center> tag
Everything else is open to debate.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Firefox World Record and IMSLP Returns!

by Justin 3. July 2008 01:23

First, champions of public domain rejoice! IMSLP (International Music Score Library Project) is back online! It was shut down last year when Universal Edition threatened to sue the site for copyright infridgement. Of course, if you don't know, IMSLP only contains scores that are in the public domain. That means free and legal. So most of the works you'll see there are PDF scans of very old sheet music. However, that doesn't sit well with companies that make good money off of long dead composers. So they used lawyers to intimidate the college student behind IMSLP, who does not have the means to legally protect himself. Thankfully, many people got behind the kid and offered support, including some prominent university legal experts. Regardless, it's back online!

Second, Firefox indeed set the Guiness World Record for Most Downloads in a 24-hour time frame. According to Spread Firefox: "We set a Guinness World Record for the most software downloads in 24 hours. With your help we reached 8,002,530 downloads."

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Uber Geeky

by Justin 26. June 2008 00:20

I'm a professional computer programmer with a degree in Computer Science. Needless to say, I've seen some pretty geeky things done by some pretty geeky people, but nothing tops what a co-worker showed me the other day.

If you telnet to towel.blinkenlights.nl then you'll see an entire scene-by-scene recreation of the first (er, fourth) Star Wars movie done in ASCII!

  1. In Windows go to Start > Run..., or hold down the windows key and press R. 
  2. Type "telnet towel.blinkenlights.nl", without the quotes.
  3. Marvel.



Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Firefox 3.0 To Be Released 6/17/2008

by Justin 14. June 2008 12:09
Version 3.0 of Firefox will officially be released to the public on June 17th, 2008. You will be able to download it from http://www.spreadfirefox.com/en-US/worldrecord. You can view the release notes at http://www.mozilla.com/en-US/firefox/3.0/releasenotes/.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Using the HTML label element with ASP.NET

by Justin 1. May 2008 00:28

You've probably noticed that a <asp:Label /> element actually renders a <span> tag, not the <label for="name"> tag that's been around since HTML 4. Luckily, it's pretty easy to include the label element in your ASP.NET forms.

ASP.NET 2.0, 3.0, 3.5 and Later

To make the <asp:Label /> control render as a <label> instead of a <span> include the AssociatedControlID attribute like so.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Untitled Page</title>
</head>
<body>
	<form id="form1" runat="server">
		<asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox1" Text="Label"></asp:Label>
		<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
	</form>
</body>
</html>

 

ASP.NET 1.0, 1.1

Unfortunately, older versions of ASP.NET don't support the AssociatedControlID attribute. Instead, you'll have to create a regular HTML <label> element and manually write out the ID of the associated control in the "for" attribute. 

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="test.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
	<title>WebForm1</title>
	<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
	<meta name="CODE_LANGUAGE" Content="C#">
	<meta name="vs_defaultClientScript" content="JavaScript">
	<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
	<form id="Form1" method="post" runat="server">
		<label for="<%=TextBox1.ClientID %>">Label</label>
		<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
	</form>
</body>
</HTML>

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Decompile a .NET DLL into a Visual Studio project

by Justin 26. April 2008 09:34

As a professional developer you will eventually have to view or edit some code that you do not have the original source to. The original source could've been lost, accidently deleted, or never given to you when it should've been. When you are in one of these situations try the following.

  1. Download Reflector, which allows you to open an assembly (i.e. DLL file) and view its contents. However, by default you can not modify or export the contents of the DLL. You will need Add-Ins to do that.
  2. Extract Reflector into a directory on your computer. I chose C:\Program Files\Reflector\ as my directory.
  3. Download the File Disassembler Add-In, which allows you to export the contents of the assembly into a Visual Studio project.
  4. Extract Reflector.FileDisassembler.dll from the zip and into to the same directory as your Reflector application.
  5. Open the Reflector application.
  6. Chose whichever version of .NET that you're currently using.
  7. Go to View > Add-Ins and click the Add... button.
  8. Double click Reflector.FileDisassembler.dll to selected it, then click Close.
  9. On Reflector's menu bar under Tools there's now an option called File Disassembler.
  10. Use File > Open to open the name of the assembly that you want to decompile. It will load in the left pane after the Microsoft assemblies.
  11. Click on the assembly's name once to select it.
  12. Go to Tools > File Disassembler to open up the file disassembler's pane. Tip: Close any other pane's that may be obstructing your view.
  13. Make sure you're okay with the Output Directory and you have your language of choice selected in Reflector. (i.e. C#, Visual Basic, etc.)
  14. Click the Generate button in the File Disassembler pane.
  15. Navigate to the directory that the DLL was decompiled to and enjoy!

Currently rated 2.8 by 5 people

  • Currently 2.8/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,

How to Run WebKit On Windows

by Justin 25. April 2008 02:05

So I've been noticing a buzz in the web dev community lately about a web browser called "WebKit. " It made some news recently when it tied with Opera as being one of the first browsers to pass the Acid 3 test.

Don't get too excited, it's just an open source version of Safari. Well, it's the rendering engine that Safari is built off of, which is apparently based on the same engine that's used by Konqueror. (Now there's a browser we haven't heard of in a while.) It seems that in order to "install" WebKit you basically have to run a script that uses an existing Safari install as its user interface. The install seems to be temporary.

Running Web Kit

  1. If you don't already have it installed, then download Safari and install it.
  2. After it's installed check out the Acid 3 test, and you'll see that Safari fails it (as of 4/24/2008).
  3. Download the latest build of WebKit.
  4. Extract the zip to your desktop.
  5. Double click the run-nightly-webkit.cmd script. The old MS-DOS console will open and will spit out a series of file updates.
  6. Safari will automatically launch, and even though it says it's Safari it's actually WebKit. Navigate to the Acid 3 test and you'll see that it passes it. Note that your original Safari install is unaffected.
 

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen

About the author

Justin HoltonHi, my  name is Justin. I cut my teeth learning HTML back when Netscape Navigator was still the most popular web browser. Later that inspired me to major in Computer Science at college. Today I'm a professional web developer with experience in everything from social networking application design to Search Engine Optimization (SEO). I believe the Internet is the most important achievement of man since the printing press, and I'm grateful that I was born in time to see it go from obscurity to a ubiquity.

Page List