Using CSS3 Transitions, Transforms and Animation
Mobile Sites vs. Mobile Apps: Which is More Effective?: C&M*
Browsing habits are changing. With the advent of faster data connections and smoother browsing experiences thanks to smartphones, a lot more of us are accessing sites through mobile devices. For the very same reason, we’re also using more mobile apps to do the things we want – and this is a relatively new phenomenon. This leaves content providers in something of a quandary, since not all brands have the luxury of being able to (or necessarily wanting to) offer both. Case in point: last month Boots announced its intention to develop and launch a new mobile platform in preference to an app, or series of apps, to serve its health and beauty offerings online. What are the advantages and disadvantages of such a strategy? Breaking Down Mobile Browsing First of all, let’s go back a few steps and look at how desktop and mobile browser trends have evolved since 2008: Click for a bigger image. The following graph shows the market share of the most popular mobile browsers. Breaking Down Mobile Apps
Efficiently Rendering CSS
I admittedly don't think about this idea very often... how efficient is the CSS that we write, in terms of how quickly the browser can render it? This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices. Google is also always on a crusade to make the web faster. Let's cover some of the big ideas they present, and then discuss the practicalities of it all. Right to Left One of the important things to understand about how browsers read your CSS selectors, is that they read them from right to left. ID's are the most efficient, Universal are the least There are four kinds of key selectors: ID, class, tag, and universal. #main-navigation { } body.home #page-wrap { } .main-navigation { } ul li a.current { } ul li a { } * { } #content [title='home'] When we combine this right-to-left idea, and the key selector idea, we can see that this selector isn't very efficient: Never do this:
HTML5 vs Native: The Mobile App Debate
Introduction Mobile apps and HTML5 are two of the hottest technologies right now, and there's plenty of overlap. Web apps run in mobile browsers and can also be re-packaged as native apps on the various mobile platforms. With the wide range of platforms to support, combined with the sheer power of mobile browsers, developers are turning to HTML5 as a "write one, run many" solution. But is it really viable? Feature Richness Point: Native can do more We can divide mobile functionality into two dimensions: the experience of the app itself, and the way it hooks into the device's ecosystem, e.g. for Android, this would be features like widgets and notifications. In terms of app experience, native apps can do more. It's more than the in-app experience though. Counterpoint: Native features can be augmented, and the web is catching up anyway It's true that many in-app features are simply beyond reach for an HTML5 app. Making a hybrid - native plus web - app is hardly an ideal solution. Performance
Dive Into HTML5
What is the difference in user engagement between a browser-based mobile web experience (e.g. HTML5) and a native app built for Android or the iPhone
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks
In recent years, screen resolutions are getting both bigger (large monitors) and smaller (in the mobile sense), as such, a static or fixed web layout may no longer be deemed completely viable. Maybe its time to change. Liquid, fluid and elastic layouts, have as many supporters as fixed layouts, despite what ever your feelings are on these styles of layouts, having some knowledge on adapting a site to liquid or elastic would most definitely be a plus in your arsenal. In this article you will find a collection of starter and basic fluid/liquid and elastic layouts, CSS frameworks and some useful tools to help you with your next project. Tiny Fluid Grid Inspired by the 1kb Grid, the Tiny Fluid Grid is a super simple fluid layout generator. Gridinator – Fixed, Elastic and Fluid Layouts The concept for GRIDINATOR is to allow for easy creation of custom, grid-based layouts. CSS Layout Generator – Fixed and Fluid Layouts Variable Grid System PageColumn.com Layout Generators – Fixed and Liquid
Why should I build a mobile app targeting a specific platform vs develop a mobile HTML5 website
5 Tools For Integrating HTML5 Video in Your Website
This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. No matter where you sit in the HTML5/Flash debate, the fact is, more and more mobile or low-powered devices are being shipped either without or with very minimal support for Flash video. Web developers who design sites that utilize video need to be cognizant of this reality and design and build their sites accordingly. While it's great that video hosting services like Vimeo and YouTube support HTML5 and that solutions for larger sites are available from places like Encoding.com and Brightcove, that still leaves users who want to host their own video content — but don't necessarily use a platform like Brightcove — in a bit of a predicament. Here are a few of the solutions currently available that we particularly like: 1. LongTail Video recently released a beta release for the JW Player for HTML5. 2. 3. 4. 5. BONUS: Sublime Video (Coming Soon) Your Picks
Leading mobile developer: “No more free apps” – a sign of things to come?
I’ve written and tweeted about the phenomenal work that Simon Maddox has done over the years. His name will be familiar to many mobile developers given that Simon was amongst the first in the United Kingdom to get stuck into the mobile development scene. His CV, therefore, reads like a Who’s Who in mobile. He’s very much like a one-man A-Team, though. (If you can find him, and no one else can help, maybe you can hire The Maddox). Today’s post is a Q&A with Simon around the rather challenging discussion of paid-vs-free. Here’s what happened. Let’s get started. Simon, could you introduce yourself and give us a flavour of the kind of things you’ve been working on over the past few years? I’ve been a freelance mobile developer, focusing primarily on iOS, for the past year and a half. Now, talk to us about 0870 — it was a runaway success in the context of mega-downloads and lots of money saved — tell us about the app. The premise behind 0870 is fairly straightforward. Not much at all. Do it.
