Mobify Developer Blog Mobify

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

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 →

On Mobile, Data URIs are 6x Slower than Source Linking (New Research)


This article provides a general introduction to the subject, however, updated results have been released.

As a web developer, you're likely well aware that a key rule to high performance web design is to make fewer HTTP requests — especially on smartphones, where high latencies are the norm.

You may also know that data URIs have long been considered a web performance best practice for reducing these requests.

So you can imagine my surprise to discover, when measuring the performance of hundreds of thousands of mobile page views, that loading images using a data URI is on average 6x slower than using a binary source link such as an img tag with an src attribute!

In this article, I'll discuss the different use cases of both data URIs and binary images, review my experiment results, and suggest future best practices for both using data URIs and building high performance mobile websites.

Read the full article →