Smashing Newsletter: Issue #64

This newsletter issue was sent out to 109,480 newsletter subscribers on Tuesday, July 24th 2012. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

Since our last newsletter, we’ve published several2 articles3 that created a storm of controversy. Internet Explorer has always had the power to inflame the opinions of users and developers alike. Ten years after the release of IE6, the community is still up in arms. Should we design websites with IE6 in mind? Can we really afford to alienate users by neglecting older browsers?

Editorial4
Image credit: opensourceway5

At Smashing Magazine, we constantly strive to facilitate a healthy discourse which helps everyone to share their opinions and knowledge in a respectful environment. It is a forum in which we endeavor to be more than a platform for spoon-fed information—for the betterment of the Web. We would like to sincerely thank everyone for their passion and dedication. Every contribution matters!

In the spirit of communication, we’re giving away 2 tickets to the Webdagene6 conference in Oslo, Norway. Should you wish to participate, tell us which speaker you would like to meet live in person, using #smwbddagn! You could also use #smuxlive if you’d like to win 1 of 5 Usabilla Live7 licenses—a useful service that will help you to collect feedback on your site.

Yours sincerely,
The Smashing Editorial Team

Table of Contents

01. A Magnifying Glass With CSS3 And jQuery8
02. Open Source Student Management Systems For Universities9
03. Estimated Reading Time (PHP Script)10
04. Max.CSS: Mind Developers Of Tomorrow11
05. Setapp: Created With Love By Tools Freaks12
06. Responsive ISO Redesign Project For Free Download13
07. Convert Word Documents To Clean HTML14
08. Colorful Vacation Illustrations By Pascal Blanchet15

1. A Magnifying Glass With CSS3 And jQuery

Whether we are working on a product page, a service, or a portfolio, sometimes we want to show more detail from an image while still keeping the image at a specific position in our design. This kind of size restriction is the perfect opportunity to use a magnifying glass (or a similar functionality). The technique Magnifying Glass With jQuery and CSS316 achieves an aesthetically pleasing visual effect.

A Magnifying Glass With CSS3 And jQuery17

The CSS3 box-shadow and border-radius properties are used to create the magnifying glass itself, while jQuery is used to detect the cursor coordinates and mouse movements and present the larger image. And when your cursor moves off the image, the magnifying glass elegantly fades away. The included tutorial makes it very easy to learn and understand how to achieve this effect. The technique includes both a small and a large image in the markup, so optimizing the technique to load a larger image on demand might be a good idea. (cc)

2. Open Source Student Management Systems For Universities

During my studies I was enrolled in three different universities. Each of them was very different, but they had one thing in common: they had a truly terrible student management software. It was either an unnecessarily complex interface (which made it hard to use), or it was full of bugs, or it just looked highly unusable. And it was true for open-source systems just as it was for commercial products. Now there is a new (and very promising) option on the horizon: Project Fedena18, a free, open source school management software that can put an end to all of this.

Open Source Student Management Systems For Universities19

Fedena is written in Ruby on Rails and has more features than a plain content management system. You can use it to efficiently manage students, teachers, employees, courses and all the systems and processes related to any academic institution. The project is being actively developed to specifically fit the needs of students, professors and institutions. Furthermore, it has a clean and well-arranged interface that makes it easy to use (even for the unversed user).

Fedena offers a great approach—it’s not quite ready, but definitely on a good way, and hopefully will become popular (because a university should be about your subject or interest, not figuring out complicating online systems!). If you are looking for an alternative, SchoolTool20 and Chamilo21 might be other options worth considering. (ml)

3. Estimated Reading Time (PHP Script)

Time is a scarce asset these days. The more important it is for us Web designers to ensure that our visitors spend their time on our website meaningfully and with use instead of disappointment. E.g. if you don’t have a lot of time, and look for a quick reminder or refresher, reading a long technical article might be a bit of overhead. But what can we do to improve the experience of our website visitors?

Estimated Reading Time (PHP Script)22

Well, we can show our visitors how much time they will actually need to comfortably read an article or a page. Brian Cray’s Estimated Reading Time With PHP23 script will help set user expectations upfront. This piece of information may also be useful to influence the article abandonment ratio on the website. You could even go further and adjust the script for various settings on your website—be it coding snippets (and their complexity), images, videos, comments, language and the website’s audience. If an article requires more than a certain threshold to read (e.g. 10 minutes), you might want to make the link to the PDF version (or print version) a bit more visible.

Besides, it might be worth providing your estimation of how advanced an article actually is, what audience it’s directed at and include a descriptive, concise summary in the very beginning of the article, too. (vf)

4. Max.CSS: Mind Developers Of Tomorrow

When you started out years ago with HTML and CSS, you probably hadn’t read that many books. You didn’t start out with deprecated HTML styling tags or table layouts (which had outdated the learning materials that school teachers tried to teach you). Perhaps you found it way more helpful to take the style sheets and HTML code from other websites, and observe, analyze, and replace them—until you understood what’s going on. But these days it’s not so easy to learn by using these techniques.

Max.CSS: Mind Developers Of Tomorrow24

Nowadays, most CSS files are compressed, which is great for performance reasons. But to compress means to destroy all the teaching potential of our code (including comments), and the best practices for structure and organization. Web designer and developer Daniel Eden had an idea which drew a lot of attention recently. He suggested to include an uncompressed style.max.css beside your style.min.css, or a comment at the top of your CSS file pointing to an un-minified style sheet version. Check out his call up for Max.CSS25 and read more about Max CSS in this blog post26. (ml)

5. Setapp: Created With Love By Tools Freaks

Setapp27 has the great potential to save you time and nerves. The “trial and error” method of searching for adequate and capable hardware and software. The service makes this procedure much more fun, because it combines the discovery of new tools with the opportunity to make new connections to interesting tech people (or to other professionals).

Setapp: Created With Love By Tools Freaks28

Based on your field of expertise, you can share and discover well-established as well as obscure applications for work and productivity. You can follow others and learn about their list of expertise. And for those of you who would like to have some automatism, setapp can connect with your LinkedIn, Twitter or Facebook to read your expertise and suggest tools which you might want to have. Enhance your productivity! (ea)

6. Responsive ISO Redesign Project For Free Download

In Web design, theory and practice can be quite different. Does responsive design always work in practice? If you had to work on a responsive redesign of a large site, how would you build it? Say hello to the new ISO29 is a straight to the point insight into a challenging Web design project—the redesign of ISO, the International Organization of Standardization. The post provides access to reference designs and the option to download the entire project. This post is another example of one of the best aspects about our community: the fact that we love to share what we are learning by doing.

Responsive ISO Redesign Project For Free Download30

Read how Andy Clarke31 and David Roessli32 have worked on the responsive redesign of a website by breaking down a large project into weekly sprints, working in a browser and by working literally side-by-side with their client. Among other things, the post provides Andy’s reference designs and the whole project as a ZIP (8 Mb). (ea)

7. Convert Word Documents To Clean HTML

You’ve just received pages of content that your client wants you to insert into their website. Normally this would mean hours of meticulous, time consuming tagging (not to mention replacing all the i and b with em and strong). Word2cleanhtml33 might be just the time saver you’ve been looking for.

Convert Word Documents To Clean HTML34

Olly Cope has created a jewel of a website that allows you to transform a Word document into HTML content. It transforms all the Word formatting into HTML element, adds paragraph tags and generally saves you a lot of coding time. The only drawback is that the document is stripped of all stylings, as they’re not HTML compatible. But the upside is: it’s free. (jc)

8. Colorful Vacation Illustrations By Pascal Blanchet

If you have to take a plane trip once in a while, you’ll probably agree that your experience is more pleasant if you have an on-board magazine to go through, especially if it’s filled with beautiful images of families going on vacation, young people riding their bikes and children playing around… or maybe not?

Colorful Vacation Illustrations By Pascal Blanchet35

The designer Pascal Blanchet explored these themes in his work for a Canadian airline digest and presents his distinctive illustrations in his Newspapers Artwork Flickr Stream36. Perhaps by studying the collection you’ll not only find an inspiring summer-side project, but also an activity for your upcoming family vacation! (tts)

The authors in this newsletter are: Cameron Chapman (cc), Melanie Lang (ml), Esther Arends (ea), Jan Constantin (jc), 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).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://www.smashingmagazine.com/2012/07/09/old-browsers-are-holding-back-the-web/
  3. 3 http://www.smashingmagazine.com/2012/07/12/its-time-to-stop-blaming-internet-explorer/
  4. 4
  5. 5 http://www.flickr.com/photos/opensourceway/7496802920/
  6. 6 http://webdagene.no/english/
  7. 7 http://usabilla.com/products#usabilla_live
  8. 8 #a1
  9. 9 #a2
  10. 10 #a3
  11. 11 #a4
  12. 12 #a5
  13. 13 #a6
  14. 14 #a7
  15. 15 #a8
  16. 16 http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
  17. 17 http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
  18. 18 http://projectfedena.org/
  19. 19 http://projectfedena.org/
  20. 20 http://www.schooltool.org/
  21. 21 http://campus.chamilo.org/
  22. 22 http://briancray.com/posts/estimated-reading-time-web-design/
  23. 23 http://briancray.com/posts/estimated-reading-time-web-design/
  24. 24 http://daneden.me/max-css/
  25. 25 http://daneden.me/max-css/
  26. 26 http://daneden.me/2012/07/max-css-in-depth/
  27. 27 http://setapp.me/
  28. 28 http://setapp.me
  29. 29 http://www.stuffandnonsense.co.uk/blog/about/say_hello_to_the_new_iso/
  30. 30 http://www.stuffandnonsense.co.uk/blog/about/say_hello_to_the_new_iso/
  31. 31 http://www.stuffandnonsense.co.uk/about#andyclarke
  32. 32 http://twitter.com/roessli
  33. 33 http://word2cleanhtml.com/
  34. 34 http://word2cleanhtml.com/
  35. 35 http://www.flickr.com/photos/pascalblanchet/with/5461768705/#photo_5461768705
  36. 36 http://www.flickr.com/photos/pascalblanchet/with/5461768705/#photo_5461768705

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!

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    My name is Brian Cray, not Brian Clay as listed in Estimated Reading Time. Cheers :)

  2. 3

    SM, would you do a better job of ensuring that links in the email newsletters actually link to the content they are referencing!?

    I don’t have an interest in clicking every link but with the few links I do click, if that is any indication of the total percentage of links that are incorrectly hyperlinked, then this does not seem to be an uncommon occurrence…

    For instance, in this issue, in section 9 I found the article “Typographic Design Patterns and Best Practices” interesting enough and wanted to read it but instead it took me to an article titled “CSS3 vs. CSS: A Speed Benchmark” here on SM.

    • 4

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      July 24, 2012 8:08 pm

      Point taken. Thanks for the constructive criticism. We’ll do it better next time!

  3. 5

    The best (among 64) so far :D

  4. 6

    Hi! And happy 6th anniversary!! I was wondering when you were going to announce the winner of the Webdagene tickets…I searched twitter for #smwbddagn with no results…

Leave a Comment

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!

↑ Back to top