Traditionally, December has always been a fantastic time for Web designers. Not only because of the upcoming holidays bringing along calm days and less stress, but also because of the many fantastic Advent calendar journals being published throughout the month. And this year is not going to be an exception.
On the 1st of December, good ol’ 24ways3 and WebAdvent have opened their doors to Web designers and developers to discuss HTML & CSS4, performance5, UX6, freelancing7, system administration8, and provide visual inspiration9. There is also a MDN Calendar10 and a WebKrauts Kalendar11 (available in German only).
In addition, if you’re looking for a book to keep you good company during the holidays, make sure to get our upcoming printed Smashing Mobile Book12 with 20% discount while it lasts. The book is being printed this very minute, so you shouldn’t have to wait too long!
Happy holidays everyone! We wish you a truly smashing December!
— The Smashing Editorial Team
Table of Contents
- Getting Inner Border Radius In CSS Right13
- Best Practices On Form-Based Authentication14
- Photoshop Secrets Revealed, No Strings Attached15
- Heyoffline.js: Simple Tool, Big Impact16
- Sunrise: Your Daily Schedule Digest17
- Better Welcome Emails And Trial Conversions18
- Stay Up To Date Even When You’re Short On Time19
- Plenty Of Zip Codes For Your Form Auto-Completion20
- The Exquisite Forest21
1. Getting Inner Border Radius In CSS Right
Perhaps you’ve been there: You have a block element inside a padded container and both of them have different backgrounds and both have
border-radius, but the rounded corners on the edges of the inner element don’t look… right. It feels like the “rounded” area is off, so you have to reduce the inner
border-radius to make things right again.
Joshua Hibbert stumbled upon a short post about this issue on CSS-tricks23 and put together a little tool24 that helps you calculate the “proper” inner radius easily. As Joshua admits, the tool is only a guide; you may encounter situations where an adjustment is required to get the best result. Nevertheless, there is no excuse to not make those border radii right from now on! (vf)
2. Best Practices On Form-Based Authentication
You have a yet another issue and Google can’t really help you find the solution that you are looking for—and the replies in your social circles are slow as well. What do you do? Well, if your question is related to Web design, the chances are high that somebody has already asked this very question and perhaps got an answer. In fact, Stack Overflow threads are great for just this. However, we can do a bit more with them.
Michiel de Mare suggested that Stack Overflow should not only be a resource for specific technical questions, but also a definite resource for general guidelines on how to solve common problems. As a result, his thread “Form-Based Authentication For Websites26” is an extensive guideline with best practices and expert advice including topics such as email validation, password storage, logging in, CAPTCHAs, forgotten password functionality, etc. If you have a question on the topic, it’s been covered very well in the thread by the active members of the community. Why don’t you open a similar thread next time you encounter a problem or just participate in an existing thread? (ml)
3. Photoshop Secrets Revealed, No Strings Attached
Photoshop secrets27 is a Tumblr blog by Photoshop Jedi turned Edward Sanchez and a great place to hang out, if you’re keen on figuring out useful details about Photoshop — such as how to set a shortcut for style and color panels or how to set default global light to 90º. Edward collects useful tips, links to actions, practical Photoshop plugins, goodies and other resources that could be useful to designers working with Photoshop daily.
For example, you can find out how to export or import all your Photoshop CS6 settings, how to merge two vector shapes quickly, how to copy and paste shape colors and styles or how to change Layer Blending Modes with your keyboard. The blog is updated regularly, and if you have a Photoshop tip to share, Edward and readers of the blog will be surely pretty happy to hear from you. (ea)
4. Heyoffline.js: Simple Tool, Big Impact
How annoying is it — especially when using a mobile browser on the go — when you have filled out a form, hit the “Submit” button and realized that your connection dropped. Often everything you have entered is gone and you have to start over from scratch.
5. Sunrise: Your Daily Schedule Digest
Your day today: Woke up. Checked your email. Had a good look at your private schedule. Off to work. There, your first thing to do is look at what’s on the books for today. Google Calendar. Open Facebook. Any birthdays, anniversaries, pet owners meetings. You looked at the clock and realized you just spent an inordinate amount of time finding out what your time had to be spent on today. Signed up with Sunrise30.
Your day tomorrow: Wake up. Check email. Receive the first of many nicely-designed daily emails from Sunrise, with all your Google Calendar schedule, Facebook birthdays and events, LinkedIn schedule and EventBrite plans nicely summarized. Maybe you’ll even have a cup of coffee to celebrate the amount of time you saved. (jc)
6. Better Welcome Emails And Trial Conversions
How often do you find yourself signing up for a service just to receive a welcome email, sign in once and never visit the site again? Perhaps you are missing advanced features, or perhaps you just didn’t have time to invest in learning the tool. What if it was introduced to you gradually, in a couple of simple steps? As a business owner, you might want to consider using userfox32, a service that helps you build more productive onboarding emails that strengthen the relationship with your users and improve retention.
With userfox you can introduce your product through a sequence of emails. You can welcome new users on the first day, tell them to check out a certain feature on the fourth, ask how they’re getting along after a week or introduce them to other users after two weeks. You decide on the intervals, the subjects and the content in order to explain your service gradually.
7. Stay Up To Date Even When You’re Short On Time
Do you want to stay up to date on the latest news but only have a few minutes to spare? Then these two sites are for you. TL;DR34 — short for Too Long; Didn’t Read — is different from other news sites. The 5-member team behind it provides you with all the hot topics from World News and Politics to Tech and Design in tiny, digestible bits and with a beautiful sleek and clear interface. Great to keep you updated while on your morning commute.
In case the short synopsis doesn’t satisfy all of your information needs, a link transfers you to the original article, from well-known news sites such as The New York Times. If you are longing for something more design-centric, Sidebar36 is the place to get your daily dose of news. The service features five new and noteworthy design links every day — useful articles and inspiring sites. You can also subscribe to it and receive the links directly in your inbox. (cm)
8. Plenty Of Zip Codes For Your Form Auto-Completion
Zippopotamus37 is an initiative to crowd-source and aggregate zip code information and make it available to the public. Postal codes not only provide information about a region, they also change a lot, which means keeping track is tough. Zippopotamus wants to help by offering an API which could simplify auto-complete forms and auto-location or city, state or country information look-up.
The site provides a free API (released under Open Database License) with JSON Response format. It supports over 60 countries already. The site is an ongoing project of Samir Ahmed39 and Jeff Crowell40, two Computer Engineering students from Boston University who invite visitors to help to improve the site or add countries and postal codes to the project. So what’s your postal address again? (ea)
9. The Exquisite Forest
Imagine a forest in which you can make the trees grow by collaborating with ideas, drawings and animations. Ar first, it sounds like a fairy tale, but this place really exists — in the virtual world, of course!
By clicking through the various trees displayed at Exquisite Forest42, you will have the chance to observe collaborations from designers around the world and see how they grow as ideas are added. Add your idea to this project as well — it’s funny to watch the trees grow. Maybe it’s also a good inspiration to plant a real tree in your neighborhood. (tts)
The authors who have contributed in this newsletter issue are: Melanie Lang (ml), Esther Arends (ea), Cosima Mielke (cm), Jan Constantin (jc), Talita Telma Stöckle (tts), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://24ways.org/
- 3 http://www.24ways.org
- 4 http://advent2012.digitpaint.nl/
- 5 http://calendar.perfplanet.com/2012/
- 6 http://uxmas.com
- 7 http://freelancember.com/
- 8 http://sysadvent.blogspot.co.uk/
- 9 http://itsashapechristmas.co.uk/
- 10 http://thewebrocks.com/mdncalendar2012/
- 11 http://webkrauts.de/serien/adventskalender/2012
- 12 http://the-mobile-book.com
- 13 #a1
- 14 #a2
- 15 #a3
- 16 #a4
- 17 #a5
- 18 #a6
- 19 #a7
- 20 #a8
- 21 #a9
- 22 http://joshnh.com/2012/01/27/getting-inner-border-radius-just-right/
- 23 http://css-tricks.com/public-service-announcement-careful-with-your-nested-border-radii/
- 24 http://joshnh.com/tools/get-your-nested-border-radii-right.html
- 25 http://stackoverflow.com/questions/549/the-definitive-guide-to-forms-based-website-authentication
- 26 http://stackoverflow.com/questions/549/the-definitive-guide-to-forms-based-website-authentication
- 27 http://photoshopsecrets.tumblr.com/
- 28 http://photoshopsecrets.tumblr.com/
- 29 https://github.com/oskarkrawczyk/heyoffline.js
- 30 https://www.sunrise.im
- 31 https://www.sunrise.im
- 32 http://www.userfox.com
- 33 http://www.userfox.com/
- 34 http://toolong-didntread.com/
- 35 http://toolong-didntread.com/
- 36 http://sidebar.io
- 37 http://www.zippopotam.us
- 38 http://www.zippopotam.us/
- 39 http://www.samir-ahmed.com/
- 40 https://github.com/crowell
- 41 http://www.exquisiteforest.com/
- 42 http://www.exquisiteforest.com/