Mobify Developer Blog Mobify

Get great mobile design and development tips in your inbox, right when we publish them.

CSS Sprites vs. Data URIs: Which is Faster on Mobile?

This article is the final piece of a three part series investigating the performance of data URIs on mobile. You can check out my previous posts 'On Mobile, Data URIs are 6x Slower than Source Linking' and 'Data URI Performance: Don’t Blame it on Base64' for more information on the subject.

About a month ago, I did some research to understand why I was seeing poor performance using data URIs in a web component I was building. After posting my results, the most persistent question from the wider web performance community was:

"OK, but how do data URIs perform compared to CSS spriting as a technique to reduce the number of HTTP requests on a page?"

The question makes a lot of sense — using data URIs in CSS as an alternative to sprites is the most typical way data URIs get used in web design today, although it is not their only use: for example, data URIs can be used for other resources such as JavaScript.

To provide an answer to this question, I’ve conducted further research on data URIs. In this article I’ll provide more background on why the performance of data URIs is an important issue, some additional details about the experiment and, of course, the results of whether data URIs or CSS sprites perform better on mobile.

Read the full article →

Image Use in Responsive Design: 3 Essential Techniques You Can Learn Today

This is a guest post by James Duval of Greensplash.

The proliferation of devices that can be used to connect to the Internet has not only drastically changed the way that most people interact with the web, but has created a whole new set of challenges for designers.

Web design in the age of tablets, smartphones, games consoles, PCs and laptops (where soon even your fridge and your bathroom scales will be connected) involves far more than simply resizing content so that it can display on different screens. Screens with same physical dimensions often differ substantially in pixel densities, meaning that relying on static measurements is no longer an adequate benchmark for design.

Rather, as designers we need to create content and sites that have the same usability across devices and are truly viewable across screens. To do this we have to get to grips with how content changes from one format to the next, and how we use images are of fundamental importance to how we do that.

Read the full article →

8 Pieces of Web Development Advice You Should Follow

Best Web Development Advice We've Ever Heard

What is the best piece of web development advice you've ever heard?

That was the question we asked you and everyone else in our community two weeks ago. As promised, in this follow up we're featuring the top (read: most valuable and useful) answers as voted by the readers and our team.

As a bonus, we're also incorporating a few comments from our own developers, including Mobify's CTO, John Boxall.

So, without further ado, here are the best pieces of web dev advice as voted by the community!

Read the full article →

Data URI Performance: Don't Blame it on Base64

This article is a follow-up to my recent post: On Mobile, Data URIs are 6x Slower than Source Linking.

In a previous post, I introduced new research which showed that using the data URI scheme inline is significantly slower to materialize an image on mobile than using an image tag directly (and if the image is known to be in the browser cache). I suggested that mobile web developers focus on using data URIs only for smaller resources and look at alternatives such as CSS sprites instead.

As a result of discussions with Ilya Grigorik from the Google Make the web Faster team and other developers from the web community such as Andy Davies, Tim Kadlec and Alex Sexton, I decided to run a follow-up test to give web developers a more precise insight into the source of the performance bottleneck of using data URIs.

In this article, I’ll investigate one possible candidate for the bottleneck: decoding the Base64 encoded data. This decoding process is used with binary images to transform the data into a format that is safe to include inline in HTML or CSS.

Spoiler: the bottleneck does not lie in Base64 encoding but may reside in resource scheduling of data URIs in general!

Read the full article →

What is the Best Piece of Web Development Advice You've Ever Heard? (Win Prizes for Answers)

What is the Best Piece of Web Development Advice You've Ever Heard? (Win Prizes for Answers)

As professionals, we spend years perfecting our craft.

We learn new skills, acquire good taste, and work uncountable days and nights to get better. After all, learning is tough. It takes time. And it's never over.

But looking back at everything we've learned over the years, we can always pick that one piece of advice — maybe from a mentor, or a peer, or our favourite blog — that made us stop and think. That changed the way we do things.

As you've probably already guessed, today's post isn't about us (as in Mobify) sharing something we've learned. Today, we'd love to learn from you.

We'd like you to share with us — and the thousands of people in our community — a key piece of knowledge that made a difference in your learning process.

Read the full article →