Tuesday, July 24, 2012

Smashing Newsletter #64: CSS3/jQuery - Word2HTML - Responsive Design - Tools

The email is not displayed properly? View the online version.

The Smashing Email Newsletter

Issue #64 | Tuesday, July 24th 2012 | 109,481 subscribers | Previous issues

Dear Friends,

Since our last newsletter, we've published several articles 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?

Editorial
Image credit: opensourceway

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 Webdagene 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 Usability Live 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 jQuery
02. Open Source Student Management Systems For Universities
03. Estimated Reading Time (PHP Script)
04. Max.CSS: Mind Developers Of Tomorrow
05. Setapp: Created With Love By Tools Freaks
06. Responsive ISO Redesign Project For Free Download
07. Convert Word Documents To Clean HTML
08. Colorful Vacation Illustrations By Pascal Blanchet
09. Smashing Highlights (From Archives)
10. New On Smashing Job Board
11. Recent Articles on Smashing Magazine


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 CSS3 achieves an aesthetically pleasing visual effect.

A Magnifying Glass With CSS3 And jQuery

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 Fedena, a free, open source school management software that can put an end to all of this.

Open Source Student Management Systems For Universities

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, SchoolTool and Chamilo 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)

Well, we can show our visitors how much time they will actually need to comfortably read an article or a page. Brian Clay's Estimated Reading Time With PHP 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)


Advertisement

10 Premium and Fully Responsive Web Templates - only $17!
These responsive themes from FlashMint include responsive sliders, CSS3 effects, sortable portfolio, photo lightbox, PSD files and much more. Easy to customize and diverse including themes for sports, corporate, hair salons, interior design, spa salon and more. See the themes
The World's Largest UI Pack - 80% off!
Over 300 vector components, 5 awesome styles and a beautiful set of 200 vector icons. All in one neat bundle for you to enjoy. Get the full developer license for 81% off (limited time only!) See all the styles
"Coming Soon Pro" WordPress Plugin
Capture email leads and create buzz for your upcoming sites. Works with any WordPress theme you have installed on your site. Fully integrates with Awever, MailChimp and others. Featured packed!
See the demo video


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 Tomorrow

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.CSS and read more about Max CSS in this blog post. (ml)


5. Setapp: Created With Love By Tools Freaks

Setapp 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 Freaks

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 ISO 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 Download

Read how Andy Clarke and David Roessli 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)


Advertisement


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). Word2cleanhtml might be just the time saver you've been looking for.

Convert Word Documents To Clean HTML

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 Blanchet

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


Advertisement


9. Smashing Highlights (From Archives)

  • Useful Coding Tools and JavaScript Libraries For Web Developers
    Everyone who is a regular Smashing Magazine reader will know that we have a traditional habit of regularly researching the latest resources, tools and services out there on the Web, as productivity is a crucial asset of professional Web designers and developers. We could, and should, all integrate workflow optimization into our working practices.

  • The Ultimate Guide To Cloning In Photoshop
    Photoshop's wide array of cloning tools is the cause of many of the absolute best and worst works created with the application. In a skilled and experienced hand, these tools lead to phenomenal results. In the hands of a careless artist, Photoshop cloning can be disastrous to the credibility of the result. This article introduces the several cloning tools available in Photoshop and goes over the proper usage and best practices of each.

  • Typographic Design Patterns and Best Practices
    To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters. We've chosen popular newspapers, magazines and blogs as well as various typography-related websites. Conducted in 2009, this research still might be useful for your next project.


10. New On Smashing Job Board

    Here are the job openings published recently at our very own Smashing Job Board:

  • Senior Rails Developer at DoYouRemember? (Manhattan, New York)
    DoYouRemember? is looking for a full-time senior Rails developer to work at our funded social media start up. You'll be working on all aspects of the site while managing a small team. You'll be working out of our Upper East Side Manhattan office.

  • .Net Web Developer at Collette Vacations (Pawtucket, RI)
    Don't wait to jumpstart your career! Seize this opportunity to work for the company that Travel & Leisure has recently awarded one of the best Tour Operators on the planet. Collette Vacations sells over 150 guided tours to all 7 continents and has offices around the globe. Our family owned company has a proven track record of over 94 years of sales success and are continuing to grow. As a matter of fact 2010 was our best year ever!

  • Visual Designer at Box (Los Altos, CA)
    We believe that intuitive, fun products are about more than just features – a beautiful layout and slick interface is what makes it easy for users to do what they want to do and go where they want to go. Members of our design team exercise their creativity while solving fun UI design challenges – and creating some of the most kick-ass marketing campaigns around!


11. Recent Articles on Smashing Magazine


Join our community: follow us on Twitter and join us on Facebook

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

unsubscribe | update preferences | view it in your browser

No comments:

Post a Comment