Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #69

This newsletter issue was sent out to 120,888 newsletter subscribers on Tuesday, October 9th 2012. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


Innovating, experimenting and challenging the status quo of design and technology leads us to come up with something original. That’s how the omnipresent parallax effect came into being in Web design. In fact, from the artistic point of view, single page parallax websites allow designers to squeeze in subtle details, dynamics and surprising perspective changes—all uncommon for most (non-Flash) websites. The Paris 3D Saga2 website is a good example of the visual effects and transitions that parallax websites can have.


The parallax effect can be useful when used properly, e.g. when wanting to showcase a product in 3D view on mobile. But since every other site uses some sort of parallax trickery for its layout, using the effect isn’t really exciting anymore. Most of them are so heavy that they could be called “monolithic”; visible from space, as dense as singularities. When a page takes minutes to load, and hence needs a loading or a splash page to keep users entertained, then something is terribly, terribly wrong with the design. Well, unless you can deliver the next-gen 10G connection to your users—too bad it doesn’t exist.

It’s time to stop building monstrous heavy parallax one-pagers. How about building a quick, heavily-optimized responsive website instead? Your users would surely appreciate it.

Stay curious and keep experimenting!

Yours truly,
The Smashing Editorial Team

Table of Contents

  1. Tilt-Controlled Images With Lenticular.js4
  2. PHP The Right Way5
  3. UI Inspiration For Android Designers6
  4. Free eBook Platform For Indie Authors7
  5. The Easy Way To Crop Images Online8
  6. Free Interface Sketch Templates For Mobile9
  7. Split, Merge And Mix PDF Documents Online10
  8. Coverjunkie: Pictures Of The Past11

1. Tilt-Controlled Images With Lenticular.js

When designing for mobile, we often tend to forget about the capabilities that mobile devices often have — gyroscope and accelerometer are just a couple of them. But what can we do with them in our “regular” Web projects? Well, if you are designing an online shop with nifty product preview options, you might make use of tilting to display the 3D view of the item. Right… but now how would you build it?

Tilt-Controlled Images With Lenticular.js12

Tom Giannattasio’s Lenticular.js13 is a JavaScript library that provides exactly this kind of functionality. It allows you to add tilt-controlled images to your mobile devices and tablets and provides a good ol’ parallax effect fallback on images for desktop browsers. Essentially, you create a library of images from your product, define them in a Lenticular object and then manipulate them using the functions that the library provides. Lenticular.js is still a bit buggy, but extended support on devices is in the works. It’s available on GitHub as well. (vf)

2. PHP The Right Way

If you are developing for the Web, the chances are high that you have to deal with PHP on a regular basis. However, once you’ve stumbled upon a problem that you have to solve, finding a good solution among thousands and thousands of (partly outdated) PHP tutorials out there can be quite a nightmare — especially if you are relatively new to PHP. Where would you go to learn about the current best practices in PHP?

PHP The Right Way14

Perhaps PHP The Right Way15. The site is an easy-to-read, quick reference for the best practices in PHP, accepted coding standards, and links to authoritative tutorials around the Web. Josh Lockhart has worked together with a dozen of well-respected members of the PHP community to create a useful, up-to-date resource for everybody to use. You might also want to bookmark JavaScript16 or jQuery17 resources18 in case you work on JavaScript more often — and you might consider contributing to JS The Right Way19. (vf)

3. UI Inspiration For Android Designers

Being a relatively young and extremely versatile mobile platform, Android poses many design challenges. Popular UI patterns on Android are often the common consideration in mobile projects. Because the Android platform is so fragmented, having a reference for the various emerging design patterns can be very helpful.

UI Inspiration For Android Designers20

Of course, you can find common Android design patterns in the official Android Design Guidelines21, but if you are looking for something more specific, check out Android Niceties22. The website features a growing showcase of screenshots from beautiful Android apps and an insight into Android UI conventions. Android UX23 creates a library of the common Android design patterns as well. (vf)

4. Free eBook Platform For Indie Authors

It takes a lot of time and effort to write a book and it can be very troublesome to find a publisher for it. No less painful is the moment when the publisher takes a cut from the profit. A London-based startup discovered this very problem and created Payhip24, an online platform that allows you to quickly upload and sell your eBooks directly to your fans and followers. The service costs you absolutely nothing and your profit remains 100% yours. According to the creators, credit card details of the customers are never stored.

Free eBook Platform For Indie Authors25

So how does it work? In order to setup your eBook page, simply upload your eBook file and add a name, description, price and thumbnail image. Your earnings can start from the moment when you share the link to this page. The service also includes a preview feature which allows you to upload a short preview as a teaser. At the moment customers can pay only via PayPal. Plans exist to add a few pro features that users can pay for if they want to, but the selling of the eBooks will remain free of cost. (ea)

5. The Easy Way To Crop Images Online

Making a website look interesting and vibrant can hinge on nothing more than a well-chosen graphic that enhances the content. This makes image cropping such a delicate and sometimes time-consuming exercise. But what if you don’t have your desktop tools at hand? Developers from imagga have developed a tool to simplify the process.

The Easy Way To Crop Images Online26

The easy-to-use online auto-cropping tool Cropp.me27 suggests the right cropping based on the size you need. The tool even comes with predetermined sizes for common online image purposes. You just might save a lot of time. Gone are the times of desktop software to manually crop your images for the correct size! (jc)

6. Free Interface Sketch Templates For Mobile

Whether you are designing a website or an application, having printed templates for quick drawing, sketching or just experimentation is always handy. If you find yourself working on a mobile project, paper templates for the variety of mobile views can be great for quick prototyping of mobile user interfaces.

Free Interface Sketch Templates For Mobile28

Interface Sketch29 is a free collection of simple templates that are designed to help you sketch your ideas on paper. The PDF templates are available in A4 and US Letter format for Web browser, iPad, iPhone 4, iPhone 5, Nexus 7 tablet, Android phone, Windows 8 phone and Feature phone. Each template has a variety of different horizontal and vertical views. Now, that’s a set worth downloading for your next projects! (vf)

7. Split, Merge And Mix PDF Documents Online

We have all been there: you’ve received a large PDF file but you need just a couple of pages; or you’d like to merge the file with other documents to have everything in one place; or you have to send a large PDF file via email, and you just want to split it into smaller parts. The unfortunate thing is that you are on the go, and you don’t have your desktop tools with you. Or perhaps they don’t do exactly what you are after, anyhow. That’s where it would be fantastic to have an online tool taking care of your PDF nightmares quickly.

Split, Merge And Mix PDF Documents Online30

Sejda31 is just that: an advanced online PDF manipulation tool. At the moment you can encrypt, merge, rotate, mix and split PDF files by using pages or bookmarks. However, the developers are currently working on cropping, exporting, setting viewing preferences as well as splitting by size and text extract. The downside, of course, is that you have to upload the file to the server, so if it’s sensitive data, Sejda isn’t an option. However, for regular simple tasks, Sejda will definitely help out quickly and reliably. (vf)

8. Coverjunkie: Pictures Of The Past

National Geographic, Time, Rolling Stone — when we think of those magazines, what do we really remember? Well-researched, serious articles with subjects that are close to our heart? Sure! But what really grabs the busy person on their way to work and stops them dead at the newsstand is the cover. How many articles from these magazines have we forgotten? And yet, how many iconic images do we remember?

Coverjunkie: Pictures Of The Past32

Browsing through the classic cover section of Coverjunkie33 is like time traveling. Here you’ll find the images that influenced generations — from National Geographic’s blue-eyed, Afghan girl captured during the very intense Cold War era, to Muhammad Ali’s Esquire showcase. From the tragic to the frivolous, these pictures evoke memories and feelings. So whether you are searching for inspiration or melancholia, be sure to spend some time on this website and you’ll come out ahead in some elated way. (jc)

The authors in this newsletter are: Esther Arends (ea), Jan Constantin (jc), Melanie Lang (ml), Talita Telma Stöckle (tts), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), John von Bergen (proofreading).


  1. 1
  2. 2
  3. 3
  4. 4 #a1
  5. 5 #a2
  6. 6 #a3
  7. 7 #a4
  8. 8 #a5
  9. 9 #a6
  10. 10 #a7
  11. 11 #a8
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 1

    Sorry, that Paris 3D, while technically impressive… is an impressive catastrophe for the user. Maybe I’m jaded but this just seems like wasted time and funds to me. Try using the scroll button on your mouse… you’ll get carpel tunnel before you get down 5% of the page.


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top