CSS – Rob Tiffany

January 16, 2017October 16, 2022

Mobile WebViews Close the Performance Gap with Native Apps

New WebViews with the same performance as #mobile browsers mean #web skills are finally viable for building fast, cross-platform hybrid #apps.

Back in 2012, Mark Zuckerberg admitted Facebook’s mobile strategy relied too much on HTML5 rather than native apps. While it was a great way to target multiple platforms from a single codebase, Facebook’s hybrid app suffered from poor performance. They used a WebView which is a web browser encapsulated in a software component that can be added to a native app. This allows HTML, JavaScript and CSS to run inside a native app container with access to platform APIs that browser-based apps don’t get, like the camera or push notifications. The problem was these WebViews didn’t share all the features or performance of the full web browsers.

Today, iOS 8+ includes a WKWebView API with access to the Nitro JavaScript JIT compiler and rendering performance equivalent to the Apple Safari browser. The Chromium WebView introduced in Android 4.4 KitKat takes advantage of the Google Chrome V8 JavaScript engine for dramatic gains. On Windows 10, the WebView based on the Edge browser is the ticket. All these WebView controls offer enhanced HTML5 and CSS3 feature support and significantly better performance to close the gap with native apps. If your corporate designers and developers have web skills, consider using Apache Cordova/PhoneGap or Kaonsoft to rapidly target multiple mobile platforms with a single codebase.

Reduce development expenses by building apps for all mobile platforms with a single codebase by a smaller development team using widely-available web skills that gets your apps to market more quickly and pervasively. Does your company have a hybrid web app strategy to reach more customers faster?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Click here to purchase a copy of my book today and start transforming your business!

December 24, 2016October 16, 2022

Give Smartphone Users Mobile Web Apps or Else!

Replace heavyweight, desktop focused, bandwidth eating, #Web 1.0 sites with lightweight #Mobile Web apps using responsive web design.

Just like their native counterparts, many Web 1.0 apps were built with a particular screen resolution in mind where bigger was better on an endlessly scrolling screen. As time progressed throughout the late 90s, poor performing dial-up modems running at 28.8 kb/s gave way to 56 kb/s modems, followed by 128 kb/s ISDN and then true broadband with the introduction of digital subscriber line (DSL) and cable modem technologies. Web designers kept pace with this trend by loading up web pages with heavy graphics leading to slower load times and average page sizes of 2 MB.

Web apps must be designed for mobile first. This means they must load quickly, be cached for performance and use smaller JavaScript libraries and minimal graphics. Amazon says a 100ms increase in load time equates to 1% reduction in sales. Remember, nine out of ten mobile shoppers use the mobile web while in-store and 51% of that research has led to a purchase. Follow responsive web design (RWD) principles via CSS media queries to adapt to the screen size of any device. Hide navigation menus to keep layouts simple and don’t make users pinch, zoom or pan. Google reports over 70% of consumers access websites from their mobile devices while only 20% of companies have optimized their sites for mobile. Clearly, you can increase your company’s engagement with customers and employees alike via the mobile web that’s already in their hands.

Boost user productivity and revenue by delivering a fast web site that adapts itself to the device users are carrying allowing employees to complete tasks and customers to make purchasing decisions. Is your company doing everything it can to reach mobile users?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Click here to purchase a copy of my book today and start transforming your business!

January 31, 2012October 16, 2022

HTML5 and CSS3 on Windows Phone: A Simple Boilerplate

Internet Explorer 9 running on Windows Phone 7.5 has seriously raised the HTML5 mobile web profile of Microsoft’s latest phone operating system.

Up until recently, it’s been all about the apps written in Silverlight. With hardware-accelerated video, text rendering, canvas drawing, and the high-speed “Chakra” JavaScript engine, IE9 compiled for ARM processors means business. But diving into HTML5 without considering the differences in characteristics of mobile web browsers is a mistake. Therefore, I’m going to show you some HTML5 and CSS3 that you can use as a starting point for your mobile web apps.

Below, you can see the simplified DOCTYPE, html, charset, and stylesheet tags that are the hallmark of HTML5. In order to be accomodate small screens on Windows Phones, I’ve added the viewport, mobile optimized, and handheld friendly tags to keep the browser from trying to render a desktop web site.

<!DOCTYPE html>

<head>

<title>Mobile Web Title</title>

</head>

<body>

<h3>Mobile Web</h3>

</body>

</html>

You probably also noticed that I placed the script tags just before the closing body tag instead of inside the head tags. This ensures that the mobile page fully renders in the browser before the JavaScript parsing begins.

Along with this simple HTML goes an equally simple stylesheet that provides a basic, Windows Phone Metro look and feel:

@media screen and (max-width:480px) {

body {

font-family: “Segoe WP”,Tahoma,Geneva,Verdana;

background-color: #000000;

color: #ffffff;

padding: 18px;

}

h1, h2, h3, h4, h5, h6 {

font-family:“Segoe WP Semibold”;

margin-bottom:7px;

}

h1 {

font-size: 48pt;

}

h2 {

font-size: 40pt;

}

h3 {

font-size:32pt;

}

h4 {

font-size:24pt;

}

h5 {

font-size:20pt;

}

h6 {

font-size:18pt;

}

p {

font-size: 14pt;

}

input, select, button {

color: #ffffff;

background-color: #000000;

border: 2px solid white;

vertical-align: baseline;

font-size: 17pt;

min-width: 40px;

min-height: 40px;

}

label {

vertical-align:baseline;

font-size:17pt;

}

input.hasfocus {

background-color:white;

color:black

}

fieldset, legend {

font-family:“Segoe UI Semibold”;

font-size:12pt;

}

fieldset {

padding:12pt;

border: 1px solid white;

}

I’ve included a simple media query in the CSS to only apply the style to devices with a maximum width of 480 pixels. Additionally, this will definitely give you the Segoe fonts, black background, and white borders that you’re accustomed to in Windows Phone Silverlight apps. You’ll also notice that I set minimum heights and widths for some of the UI elements to give mobile users a larger hit target.

Good luck with your next HTML5 + CSS3 mobile web site!

Sharing my knowledge and helping others never stops, so connect with me on my blog at https://robtiffany.com , follow me on Twitter at https://twitter.com/RobTiffany and on LinkedIn at https://www.linkedin.com/in/robtiffany