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