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.
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?
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.
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)
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.
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)
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)
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)
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)
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)
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).
The Smashing Newsletter Team 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!
Every second Thursday we send out our lovely email newsletter with useful tips and techniques, recent articles and upcoming events. Thousands of readers have signed up already. Why don't you sign up, too, and get a free Smashing eBook as well?
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and
rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!
Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.
It's done. The Smashing Book #4, our brand new book with smart front-end techniques and design approaches. Written by respected designers and developers, neatly packed in a gorgeous hardcover.
Do you feel like your workflow is slowing you down? We might have just what you need. Our front-end, UX and RWD workshops in London, Zürich and Berlin. Read more...
Exciting things are happening and you should consider joining the talented staff at HIMSS as our Sr. Manager, Web Design & Online Standards as we are transforming…
Northeastern University Web Designer/Developer Requisition Number: STFR001261 Division/College: Marketing and Communications FT/PT: Full…