вторник, 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

вторник, 10 июля 2012 г.

Smashing Newsletter #63: Science - Email - Portfolio - Stationery Inspiration

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

The Smashing Email Newsletter

Issue #63 | Tuesday, July 10th 2012 | 108,721 subscribers | Previous issues

Dear Friends,

Do you remember back in the day when you were asked that question at a party, "So, what do you do for a living?" After you cautiously mumbled something like "webmaster" or "webadmin", you probably felt embarrassed and were disappointed by the wilting expression of your discussion partner. After all, everybody knew a kid in the neighborhood who was a "webmaster". Of course, things have changed for Web designers over the years, but you still get that disappointed look every now and then, don't you?

Editorial

We, as Web craftsmen, shape virtual space for everybody to use, and work hard to make our creations as good as they can be. We have an exciting, difficult job — a craft full of responsibilities. A craft that requires a high level of professionalism and dedication to be able to build accessible, beautiful and user-friendly online experiences. Next time you get that disappointed look, explain why being a Web designer is fantastic, rewarding work. Because that's what you love to do all day long. And then one day, someone will come up to you, look you squarely in the eyes and say the magic words that you will never forget: "I want to be a Web designer when I grow up."

As always, our aim is to help you to stay up to date with the current trends and techniques to keep you improving your Web skills. In this newsletter issue, we're giving away tickets to the HOW Interactive Design conferences — one ticket for each event. Send us a tweet using the hashtag #smhow to which location you would rather go, and why you like to be a Web designer!

Yours sincerely,
The Smashing Team

Table of Contents

01. Science Is Cool
02. Rolling Up Your Inbox
03. Secure Shell In Your Browser
04. The Fabulous Tale Of The Web
05. Stationery Design Inspiration
06. Excel-Like Tables For The Web
07. What's The Last Great Thing You Saw?
08. Is Your Portfolio Up To Date?
09. Smashing Highlights (From Archives)
10. New On Smashing Job Board
11. Recent Articles on Smashing Magazine


1. Science Is Cool

Thanks to "The Big Bang Theory" as well as other other geek-chique shows, those among us who have always been nerds are finally cool and come out of the nerd-closet, shouting: "I love science!". If you enjoy reading Scientific American or National Geographic, or like watching science shows, It's Okay To Be Smart should have you rubbing your hands in anticipation.

Science Is Cool

Joe Hanson's blog differs from most by injecting wonder and creativity back into the general understanding of science. You can find short clips, informative articles and even Q&As—just in case you aren't an expert in every scientific discipline. Joe's website is a wellspring of information, trivia and even mirth! (jc)


2. Rolling Up Your Inbox

You turn on your computer, open your inbox, and are flooded with email newsletters, subscriptions, spam, and sometimes hidden away, one or two personal emails. Unroll.me is offering a simple solution to the e-garbage dilemma.

Rolling Up Your Inbox

The team has come up with an idea of a "rollup" interface that allows you to end unwanted subscriptions, and rolling up the rest into a single, organized and prioritized overview mail. You can select the emails that are overloading your inbox and let the tool automatically unsubscribe you all at once. And if you change your mind, there's also an option to re-subscribe.

The intuitive rollup lists the subscriptions according to category and allows you to quickly choose what to keep (and what to kick to the curb). At the moment the tool supports only Gmail, but the creators are working to support other email providers, too. (jc)


3. Secure Shell In Your Browser

If you spend most of your time developing Web applications (or managing servers), chances are high that the terminal is your good friend. However, if you just want to check something on the server, compile your code after a quick lookup on the Web, then switching back and forth between terminal and browser might be a bit... unnecessary (especially if you are using Vim). Secure Shell Chrome Extension might be just what you are looking for.

Secure Shell In Your Browser

The extension is a terminal emulator and secure SSH client, similar to PuTTY on Windows and ssh command-line applications on Mac OS X and Linux systems. It uses Native-Client to connect directly to SSH servers without external proxies. The extension is developed by the Google Chrome team and is still in the development phase (so bug reports are highly welcomed). Right now you can play the good ol' Zork right in your terminal, within your browser! (sw)


4. The Fabulous Tale Of The Web

Evolution Of Web might appear to you like the multi-colored tentacles of a magical cuttlefish gliding alongside planet orbit lines in deep space. In fact, you're looking at the fascinating development of Web browsers and technologies in the span of time from 1991 until 2012. By scrolling on the names of the technologies, you can get a comprehensive overview of the support for numerous features that evolved over time in the Web landscape.

The Fabulous Tale Of The Web

The color bands represent the interaction between Web technologies and browsers, which brings to life the many powerful Web apps that we use daily. The dense scenery between 2008 and 2012 demonstrates clearly (and with great visual impact) how intense the interplay and mingle of technologies has recently become. While this impressing visualization is taking effect on you, don't forget that this universe is still in its infant stage. (ea)


Advertisement


5. Stationery Design Inspiration

Whether they are die cut or laser cut designs, letterpress notes, cards using embossing or engraving techniques, silkscreen cards, or just good ol' pencil-work, there is something special about stationery design... isn't there? The pleasure of seeing and feeling the design can be breathtaking, and with modern technology, special printing processes and uncountable paper qualities, creativity has no limits for designing exceptional paper sets.

Stationery Design Inspiration

The blogs Lovely Stationery and Oh So Beautiful Paper celebrate the diversity of stationery design techniques and feature state-of-the art examples. Lovely Stationery focuses on corporate identity design and business cards, while Oh So Beautiful Paper focus on notes, cards and invitations. What about producing a couple of beautiful stationery designs for your portfolio during the next weekend? (tts)


6. Excel-Like Tables For The Web

Excel is a great option if you need to create a spreadsheet or a table. But if you want an editable spreadsheet or table on your website (e.g. for your clients' dashboard), you might need a different option—especially if you want it embedded on a website. With Handsontable jQuery library, you get an editable table with Excel-like features.

Excel-Like Tables For The Web

Handsontable provides quite a few useful features that Excel is well-known for. The library allows you to use auto-expanding and auto-complete as well as add new rows and columns. It also includes a legend, scrolling (so as your table grows, it won't take up your entire page and become unwieldy), context menus, conditional formatting and other features. You can even set it to track changes made to the table! And, all the data you enter in Handsontable can be copied and pasted to Excel, Google Spreadsheet, or LibreOffice. The library has extensive documentation and a couple of advanced demos that are worth checking out as well. Developed by Marcin Warpechowski and licensed under the MIT license. (cc)


7. What's The Last Great Thing You Saw?

With the huge amount of information streaming towards us online, sometimes it's difficult to find truly original, exciting, interesting things (and not necessarily online, but also offline). What if someone kept track of these things that creative designers, developers, writers and artists worldwide find or stumble upon? That's exactly why The Last Great Thing is one step ahead.

What's The Last Great Thing You Saw?

Each day, for 20 days, the authors of the website had asked smart and creative minds on the Web what was the last great thing they saw. Whatever it was, it had to be accessible on the Web (and not behind some paywall). It had to be great, special, unusual, provocative, moving, or just memorable. The submitted items ranged from videos, songs, an ovation, a forgotten sci-fi novel and a recommended play. A fantastic idea which could be extended to a "one great thing a day" kind of project. (ml)


8. Is Your Portfolio Up To Date?

When you're reading the menu in a restaurant, or staring at a flyer in the town center, you might think of how beautifully designed they were—how unique and distinctive the designer's style is. You wonder where you could find more examples of the designer's work, and if he or she might be a great fit for your next design project. How disappointing is it, when after searching on Google, you find out that the designer's portfolio is outdated or unavailable?

Is Your Portfolio Up To Date?

A comprehensive portfolio can be just what a potential client is looking for before sending that design inquiry your way. A beautiful example of such a portfolio is Owen Davey's website. The designer tends to use vibrant, strong color schemes and incorporate animals into his illustrations. Yet if you look at the different projects by Owen, you'll find out that they have his unique design signature written all over them. If you're an artist and still don't have your work online, this will surely motivate you to either start your own or update what you have! (tts)


9. Smashing Highlights (From Archives)

  • Picking A Mobile Support Strategy For Your Website
    Many website owners have begun to develop a strategy for providing information and services to their mobile visitors. However, mobile strategies can vary massively from website to website, depending on what the company wants to offer visitors.

  • Time-Saving and Educational Resources for Web Designers
    We are glad to present a comprehensive overview of educational resources and little time-savers that can significantly improve designer's workflow. We thank the website owners for creating and maintaining all these useful resources. Your efforts are deeply appreciated.

  • Unknown Photoshop Tricks and Time-Savers
    Collected here are some lesser known but extremely useful shortcuts. Many of these are not documented in the "Keyboard Shortcuts" menu, and some of them don't even have equivalent menu options.


10. New On Smashing Job Board

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

  • Graphic Designer and Web Developer at Clearvision CM (Southampton, UK)
    Clearvision is a rapidly growing software company with an impressive global customer base. We are seeking an individual to manage and implement a significant upgrade to our existing website (www.clearvision-cm.com) in line with the latest design standards and best practices.

  • Front-end developer at Orangelab (Sweden and Worldwide)
    Do you love pixels? Are you good at writing front-end code? Do you just love to find and try out new Javascript toolkits? We should talk! Working at Orangelab is fun and stimulating. We are driven by passion and our client's challenges.

  • Lead UX/UI Designer at Forio Online Simulations (San Francisco, CA)
    Forio is looking for a lead user experience / user interface designer. We are looking for someone who is passionate about designing and developing innovative web applications, who has a high degree of technical competence and is excited about web and data design.


11. Recent Articles on Smashing Magazine


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

The authors are: Jan Constantin (jc), Swetlana Senkevitch (sw), Esther Arends (ea), Talita Telma Stöckle (tts), Cameron Chapman (cc), Melanie Lang (ml), 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

вторник, 3 июля 2012 г.

The Brand New Smashing CSS Bundle

The email is not displayed properly? View the online version. Sorry, but why am I receiving this?

Dear Friends,

With CSS3, some of the older coding techniques have become obsolete today, while others have established themselves as acknowledged standards. Web designers continually experiment with new approaches and tricks, and so we present to you the latest developments and updates.

The Smashing CSS Bundle

Our latest additions to the Smashing eBook series provide a comprehensive all-rounder for everything you have to know about CSS today. Get started with an introduction to CSS essentials, dive deeper into the recent CSS3 techniques, and get ready to learn more about responsive design techniques. The eBooks are available in PDF, EPUB and Kindle formats (DRM-free, of course). Grab your Smashing CSS Bundle for only $14.90!

The Smashing CSS Bundle
Get the bundle!

  • CSS Essentials
    (eBook, PDF: 191 pages, Amazon | iTunes | Google Play)
  • This eBook explores some practical implementations of CSS, looking at CSS float theory, z-index property, !important declaration, specificity, advanced CSS selectors, pseudo-elements, techniques for decoupling HTML from CSS, CSS layouts with equal height columns and CSS sprites. Handling your CSS well is the key to improving both performance and maintainability of your Web pages across different browsers. With this eBook, you'll get off to a good start.

  • Mastering CSS3
    (eBook, PDF: 236 pages, Amazon | iTunes | Google Play)
  • You should not miss out on the newest approaches to CSS! Find out what is possible with CSS3 pseudo-classes, CSS3 Flexible Box Layout, animations and 3D transforms. Can you really replace Photoshop with visual CSS3 techniques? Does CSS3 actually improve the speed of development and maintenance? What about common considerations for older browsers? You can be sure to gain insights from case-studies presented in this eBook.

  • Responsive Design
    (eBook, PDF: 160 pages, Amazon | iTunes | Google Play)
  • Responsive design is not only a new technique — it's an entirely new mindset. This eBook explains the foundation of responsive Web design and techniques for approaching it. Learn about content prototyping, device-agnostic design approach, gracefully degrading media queries and navigation patterns to achieve flawless responsiveness. Choose the right approach to a responsive project and avoid some common mistakes — it's worth it!

Of course, you can also get all 3 eBooks as a bundle for only $14.90!

Get the bundle!

Thank You!

We would like to sincerely thank everyone who has supported our publication efforts by resorting to our printed Smashing Books and eBooks. Your trust is most appreciated, and we will do our best to make sure that you won't be disappointed!

Yours truly,
The Smashing Team


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