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 #38

This newsletter issue was sent out to 62,537 newsletter subscribers on July 19th 2011.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming newsletter issue. The newsletter is sent out on every second Tuesday, and contains unique tips and tricks for Web designers and developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1 as well, of course.

Table of Contents

  1. Photo Swipe: Cross-Platform Image Gallery For Mobile2
  2. HTML5 Video Voting3
  3. Cutting-Edge Web Typography Experiments4
  4. Fractal: Valid Code In HTML/CSS Emails5
  5. Baseline Grids For A Faster Design Process6
  6. Word-of-Mouth Design Patterns7
  7. Great Reads Don’t Have To Be Long8
  8. The Science Of SEO Infographic9
  9. So, You Think You Can Build A Website?10

1. Photo Swipe: Cross-Platform Image Gallery For Mobile

Photo galleries are an important part of many websites. Quite a few options for slideshows and galleries are aimed at desktop browser users, but what about mobile users? There is not a whole lot of professional, pre-built image galleries that work across multiple platforms and frameworks.

PhotoSwipe: Cross-Platform Image Gallery for Mobile 11

Photo Swipe12 answers the need for an attractive cross-platform and cross-framework image gallery. It’s built on HTML, CSS and JavaScript. It works on iOS, Android and BlackBerry devices, it works with jQuery, and it can be included in PhoneGap applications. You can adjust many settings to customize the way the application works. (cc)

2. HTML5 Video Voting

You’ve prepared a screencast, video presentation or promotional video, but you’re not quite sure how good it is. Perhaps you’d like to ask your users what parts of the video they like or dislike the most and why. Just imagine how difficult it would be to derive meaningful insight from notes that include ime stamps and references that you have to check manually in the video.

HTML5 Video Voting13

HTML5 Video Voting14 allows users to cast their votes in the timeline as the video is playing. All that users have to do is start the HTML5 video and use the space bar to submit their vote. The data then automatically populates the bar graph that is embedded in the video.

You will need a back-end system to receive and process the votes. Votes must be returned as a tally of all the votes for each column that you want to display (the developers used Ruby on Rails). A jQuery plug-in for quick embedding on your website is available as well. It was tested in Firefox 4+, Chrome 10+ and Safari 4+, but should work in IE9 as well. The source code can be forked on GitHub. (vf)

3. Cutting-Edge Web Typography Experiments

Modern Web technology allows for remarkable interactive and visual experiments with media that used to be static and monotonous. Those times are long gone, and the project Web Typography for the Lonely15 proves just that. Christopher Clark, creator of the website, celebrates the power and beauty of Web typography through various visual experiments.

Cutting-Edge Web Typography Experiments16

The website is essentially an ongoing collection of experiments and writings on Web typography and the possibilities of cutting-edge standards-based Web design. Christopher is pushing the boundaries of what is both possible and practical in Web standards in a way that is compelling and exciting to the visually minded creative. At the moment, five experiments are presented, among them creative works that play with SVG, HTML5 canvas, CSS and JavaScript. All examples are documented, and the source code can be downloaded and studied on GitHub, along with related techniques and resources. (vf)

4. Fractal: Valid Code In HTML/CSS Emails

CSS support in email clients is all over the map. Some have great support, some have almost no support, and most fall somewhere in between. Figuring out what to use and what to leave out is tricky at best, especially if you constantly have to refer back to charts and graphs that tell you what does and does not work in each client.

Fractal: Valid Code in HTML/CSS Emails

Fractal is a tool developed by Campaign Monitor that validates your HTML and CSS and lets you know which clients your email will and won’t work in. Fractal gets even more useful, though: in addition to flagging the parts of your code that are unlikely to work, it also gives you suggestions on how to fix the problems. You can even contribute your own fixes to make the app even better. (cc)

5. Baseline Grids For A Faster Design Process

Designing Faster With a Baseline Grid17, by Pierre Marly, is an insightful article that discusses how using a baseline grid can speed up your design process. The approach is useful for a couple of reasons: it simplifies the process of laying out objects by removing the element of chance, and it increases the organization in the design by aligning all graphic elements and typography.

Baseline Grids for a Faster Design Process18

Pierre has also released a Baseline Grid template and documented the layout process to align text, UI elements and other visual content along both horizontal and vertical axes. As the authors say, the main purpose of the resource is to provide designers with “a holistic strategy to envision and execute simple, clear and balanced design projects.” (cc)

6. Word-of-Mouth Design Patterns

Good design can be innovative, but it is also based on established practices. So let’s say you’re developing “Share this link” functionality for a mobile app. What do you have to keep in mind? What features and functionality should the page have? What should the user’s interaction look like? This is where design patterns come in handy. And this is what the Worklogistics team has started studying and compiling data on recently, with their main focus on patterns related to word of mouth, or “product virality,” as they call it.

Word of Mouth Design Patterns19

Virality Design Patterns20 is a growing resource on design patterns that designers have found, studied and analyzed for their projects. At the moment, you will find detailed overviews of the log-in sequence design pattern, the page-sharing flow, as well as examinations of the Crew Tracker Web app and Yelp. Furthermore, you can download a 25-page virality study21 (PDF), which contains useful insights and findings from the research. Accessing the study requires a quick registration; you’ll find the download link in the right sidebar. (vf)

7. Great Reads Don’t Have To Be Long

Great stories and articles don’t have to be longer than 35,000 words, and Byliner22 proves it. The idea is simple: collect good quick articles from the past to the present that are worth a read, and archive them according to topic, author and original publishing medium, for quick and easy accessibility. Check out the most popular reads and you’ll discover that a piece by F. Scott Fitzgerald from 1936 has made second place. Some articles are even exclusive to Byliner.

Great Reads don’t have to be long23

You can personalize your account and you’ll receive the most recent updates so that you don’t miss any new pieces by your favorite authors from any of the big newspapers or magazines. Are you an author yourself, or would you like to suggest an interesting read that fits one of the categories? Submit a link to get feedback on your work or to start a discussion on an article. (sp)

8. The Science Of SEO Infographic

Search engine optimization is both art and science. SEO experts need to continually hone their skills and try new techniques and new combinations of proven factors to get better results. Getting into the field as a beginner can be intimidating, but every Web designer and developer should have at least passing knowledge of SEO.

The Science of SEO Infographic24

The Periodic Table of SEO Ranking Factors25 is a handy reference that shows the most important factors in achieving good search engine rankings, presented in the familiar layout of the periodic table. Also included in the graphic is a brief explanation of each element and why it is important. Elements are assigned point values, too, to give you a sense of how important they are in the overall scheme of things. (cc)

9. So, You Think You Can Build A Website?

We all know how it works: you have a great idea, get all worked up about it, only to realize moments later that you would have to recruit just about every freelance programmer, designer and copywriter you know to get it done. That’s when disappointment strikes. But there is a solution (well, kind of).

So You Think You Can Build a Website?

Vitamin T has come up with a handy flowchart “So, You’ve Got an Awesome Idea for a Website?” to determine whether you’ve got the drive and talent to launch that rocket and make your idea fly. Simply start in the center and work your way through the question filters. It sounds a bit dry but is actually quite entertaining once you start recognizing yourself in some of the answer paths. You’ll end up with advice either on who could greatly enrich your project or to consider bartending. Let’s hope for the former: go try to be the next Web sensation! (sp)

The authors in this newsletter are: Vitaly Friedman (vf), Cameron Chapman (cc), Stephan Poppe (sp).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9 #a8
  10. 10 #a9
  11. 11
  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

↑ 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

    8. The Science of SEO Infographic << dead link :'(

  2. 2
  3. 3

    The Science of SEO Infographic link is dead

  4. 5

    Just to say that the image link within “8. The Science of SEO Infographic” 404’s but the text link’s fine :) Cool-as infographic – just signed up to the newsletter too. Been a SM fan for some time now.


  5. 6

    ” HTML5 ” has the potential to change the web for the BETTER..
    This is a link on which you get more interesting stuff related to HTML5.

  6. 7

    Markus Seyfferth

    June 11, 2015 3:10 pm

    Thanks guys, I fixed the 404 link right away!


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