Smashing Newsletter: Issue #38

• By Smashing Newsletter Team
• July 19th, 2011
• Smashing Newsletters
• 5 Comments

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 newsletter as well, of course.

Table of Contents

01. Photo Swipe: Cross-Platform Image Gallery For Mobile
02. HTML5 Video Voting
03. Cutting-Edge Web Typography Experiments
04. Fractal: Valid Code In HTML/CSS Emails
05. Baseline Grids For A Faster Design Process
06. Word-of-Mouth Design Patterns
07. Great Reads Don’t Have To Be Long
08. The Science Of SEO Infographic
09. So, You Think You Can Build A Website?

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.

Photo Swipe 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 Voting 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 Lonely proves just that. Christopher Clark, creator of the website, celebrates the power and beauty of Web typography through various visual experiments.

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 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 Grid, 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.

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.

Virality Design Patterns 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 study (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 Byliner 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.

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 Periodic Table of SEO Ranking Factors 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).

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).