Tuesday, June 7, 2011

Smashing Newsletter #35: Auto-Reload CSS, Free Patterns, Grid Design Tool

======================================================================
You received this email because you signed up for the this newsletter.
Does everything look mixed up? View the online version:
http://www.smashingmagazine.com/smashing-newsletter-issue-35/

Annoyed? Unsubscribe at any time:
http://smashingmagazine.us1.list-manage1.com/unsubscribe?u=16b832d9ad4b28edf261f34df&id=62f9f9e407&e=54cfdd29ef&c=14894e830e
======================================================================

Smashing Magazine Newsletter

Issue #35
Tuesday, June 7th 2011
Readers: 58,500


-------------------------------------------------------------------
Table of Contents
-------------------------------------------------------------------

1. Flexible Font Sizes With jQuery
2. Auto-Reload Style Sheets Whenever CSS Files Are Saved
3. Showcase of Beautiful Paper Designs
4. Subtle Patterns: Free Patterns for Your Projects
5. WeekendHacker: A Place for Short Collaborative Projects
6. Custom Grid Patterns
7. Turn Letters, Words and Phrases Into Beautiful Typographic Designs
8. Smashing Cartoon: Users Don't Read, They Scan
9. New on Smashing Magazine
10. Smashing Network Highlights


-------------------------------------------------------------------
Editorial: New Section on Smashing Magazine
-------------------------------------------------------------------

Every now and again we get requests for very specific articles on very specific topics. Since our audience is very large and diverse, until now we weren't able to present these articles in our magazine and so we were looking for ways to change that. And we found a solution. Today, we are glad to announce that we are about to launch Smashing Coding, an extended section on Smashing Magazine which will contain more technical, advanced articles on programming and coding — be it JavaScript, PHP, Ruby or programming in general.

Smashing Coding will be curated by our new editor Keir Whitaker. We will make sure to produce verified, high-quality articles in the brand new section. Please take a closer look at the section and let us know if you find any bugs or errors. Thanks, and we are looking forward to meeting you on the pages of our new little project!

http://coding.smashingmagazine.com/


-------------------------------------------------------------------
1. Flexible Font Sizes With jQuery
-------------------------------------------------------------------

With the huge variety in display sizes that designers have to deal with, creating a design that looks good whether the user is on a smartphone, tablet or giant desktop monitor can be challenging. Reflowing paragraph text is one way to deal with different screen sizes, but wouldn't it be nice to get even further and achieve scalable headlines that fill the width of a parent element?

That's where FitText comes in. It's a jQuery plug-in for responsive and fluid layouts that resizes display text to fit the parent element. It's a great solution for creating headlines that look good on everything from a small mobile device to a 30-inch desktop display. (cc)

http://fittextjs.com/


-------------------------------------------------------------------
2. Auto-Reload Style Sheets Whenever CSS Files Are Saved
-------------------------------------------------------------------

We've all been there: we write a bit of CSS code, save it, switch over to the browser, reload to see the changes, and then go back to the editor, following the same tiresome cycle over and over again. Wouldn't it be nice to have a tool that automatically detects changes in the CSS and shows them in any Web browser, without needing to manually refresh the page? It would, wouldn't it? Well, that's exactly what Vogue does.

This tool reloads the style sheet (not the HTML) of a page in all browsers, and it can even be configured to reload a page automatically in multiple browsers at the same time. The tool doesn't host your website but rather runs your website's own local server. To use it, you just need to install NodeJS and npm. The project is open source (MIT licensed) and can be forked on Github. (vf)

http://aboutcode.net/vogue/


-------------------------------------------------------------------
3. Showcase of Beautiful Paper Designs
-------------------------------------------------------------------

Want the perfect wedding invitation? Need ideas for a business card? Looking for inspiration for a stationery project? Launched in 2008, Oh So Beautiful Paper is a design, wedding and lifestyle blog that offers up daily beauty.

The blog showcases stationery design and serves as an inspirational resource for designers. If you're interested in typography, color, ornaments and paper, this is definitely a blog to follow. (as)

http://ohsobeautifulpaper.com/


--------------------------
Advertising
--------------------------

Enhance your Facebook page with GOSO's Facebook apps — for a limited time GOSO is letting Smashing Magazine readers try their apps for free. GOSO has thousands of satisfied customers, and they are known for developing custom solutions for top brands such as Ford, Harley Davidson, Bacardi and successful movie actor, Jon Heder of Napoleon Dynamite. Your Facebook page will thank you, your fans will love you.

http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?bannerid=2276__zoneid=44


-------------------------------------------------------------------
4. Subtle Patterns: Free Patterns for Your Projects
-------------------------------------------------------------------

Patterns can add a lot of richness to website designs when used the right way. That being said, incorporating a busy or bold pattern without letting it dominate the design is a lot harder. Subtle patterns are a much better choice in a lot of cases, and they're easier to get right.

Subtle Patterns has just such patterns — more than 25, in fact — all for free. There are organic patterns like fabric and stone, and geometric patterns like stripes and diamonds. You can also submit your own patterns under a Creative Commons license to share with the community. The patterns must tile properly, and you can submit only PNG and GIF file formats. (cc)

http://subtlepatterns.com/


-------------------------------------------------------------------
5. WeekendHacker: A Place for Short Collaborative Projects
-------------------------------------------------------------------

Are you working on a short project that would take a couple of days, a couple of hours or even less if you just had some help? Whether you have an idea for a short project or want to find someone to work with on bigger projects, WeekendHacker might be the solution for you.

WeekendHacker is a place where you can issue a cry for help for one of those tiny projects that cross your path. It's a mailing list which allows you to reach out for designers and developers who might want to help you with the parts of small projects that you are not strong in. Simply sign up, post your small project, and wait for other people to help you. All users get one email a day, curating cool little projects that people post. No spam; just cool little projects you can join. (ar)

http://www.weekendhacker.net/


-------------------------------------------------------------------
6. Custom Grid Patterns
-------------------------------------------------------------------

When a website layout requires order, consistency and structure, many designers turn to grids. Many grid systems are out there, but not everyone wants to use a template. Sometimes you need a custom solution.

Modular Grid Pattern enables you to create a grid template for Photoshop and other image editing applications. Enter the baseline, the module's width and height, the gutter width, and the number of modules (columns), and it gives you a custom pattern to import into Photoshop. A Photoshop extension is also available, and you can download a PNG or transparency map, too. (cc)

http://modulargrid.org/#app


--------------------------
Advertising
--------------------------

Calling all Web Gurus: test your knowledge of the web and be in with a chance to win a deluxe coffee machine.

http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?bannerid=2277__zoneid=44


---------------------------------------------------------------------
7. Turn Letters, Words and Phrases Into Beautiful Typographic Designs
---------------------------------------------------------------------

Words consist of mere letters that, when joined with design and creativity, gain visual and semantic weight. The Phraseology Project celebrates this process by experimenting with beautiful typography — and sometimes mixing illustration and type. The project lets you submit a letter, word or phrase, which is then turned into a beautiful design by the website's founder, Drew Melton, or another creative who is participating in the project.

Essentially, the Phraseology Project is meant to be an ongoing experiment in typography, a space in which to practice typography. In the words of Drew, "Most design sites or blogs are merely feeds of disconnected visual stimulation. I wanted to do something that you could actually influence and invest in." And that's exactly what he's done. The project helps Drew and his colleagues learn about the process of creating honest typographic artwork. It's a wonderful example of a side project that encourages experimentation and exploration of design. (il) (vf)

http://phraseologyproject.com/


-------------------------------------------------------------------
8. Smashing Cartoon: Users Don't Read, They Scan
-------------------------------------------------------------------

Smashing Cartoons is a regular section on Smashing Magazine. (Almost) every week we publish a new cartoon created by our illustrator Ricardo Gimenes. The cartoons are dedicated to design and Web development, but also have a comic twist about everything happening around the Web as well as give you some insights behind the curtains of Smashing Magazine. You might also want to check out other Smashing Cartoons.

http://www.smashingmagazine.com/the-smashing-cartoons/

-------------------------------------------------------------------
09. New on Smashing Magazine
-------------------------------------------------------------------

Building An Effective 'Coming Soon' Page For Your Product
http://www.smashingmagazine.com/2011/05/24/building-an-effective-coming-soon-page-for-your-product/

Getting Started With Defensive Web Design
http://www.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

Ten Oddities And Secrets About JavaScript
http://www.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/

Free WordPress 3.1 Theme: Splendio (With PSD Sources)
http://www.smashingmagazine.com/2011/05/30/free-wordpress-3-1-theme-splendio-with-psd-sources/

Desktop Wallpaper Calendar: June 2011
http://www.smashingmagazine.com/2011/05/31/desktop-wallpaper-calendar-june-2011/

Content Strategy: Optimizing Your Efforts For Success
http://www.smashingmagazine.com/2011/06/03/content-strategy-optimizing-your-efforts-for-success/

Introduction to DNS: Explaining The Dreaded DNS Delay
http://coding.smashingmagazine.com/2011/05/25/introduction-to-dns-explaining-the-dreaded-dns-delay/

How To Build A Media Site On WordPress (Part 1)
http://coding.smashingmagazine.com/2011/06/02/how-to-build-a-media-site-on-wordpress-part-1/

Planning And Implementing Website Navigation
http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/


-------------------------------------------------------------------
10. Smashing Network Highlights
-------------------------------------------------------------------

Design your Time, Luck and Enjoyment
http://xheight.co.uk/2011/06/04/design-your-time-luck-and-enjoyment/

10 useful .htaccess snippets to have in your toolbox
http://www.catswhocode.com/blog/10-useful-htaccess-snippets-to-have-in-your-toolbox

CSS3 and HTML5 Toolbox Starter
http://www.noupe.com/tools/css3-and-html5-toolbox-starter.html

How Social Media Is Changing Television As We Know It
http://www.uxbooth.com/blog/how-social-media-is-changing-television-as-we-know-it/

Creating HTML Emails: An Overview for Web Designers
http://sixrevisions.com/web_design/creating-html-emails/

Tracking Google +1 button Interaction in Google Analytics
http://yoast.com/plus-one-google-analytics/

Annotated <figure>'s in HTML5 and CSS
http://csswizardry.com/2011/06/annotated-figures-in-html5-and-css/

Creating a Body Border
http://css-tricks.com/body-border/

About Obsolete Features in HTML5
http://www.impressivewebs.com/obsolete-features-html5/

Creating a Marketing Strategy for Your UX Skills
http://designfestival.com/creating-marketing-strategy-for-ux-skills/

What is Design?
http://journal.drawar.com/d/what-is-design/

Methods For Developing Hybrid CSS Layouts
http://www.vanseodesign.com/css/hybrid-layout-code/


-------------------------------------------------------------------
About and Contact
-------------------------------------------------------------------

Please do not reply to this newsletter. Newsletters are processed automatically. Our software will not understand your concern. Please use the contact form instead.

The authors are: Iris Kopic (ik), Christina Sitte (cs), Stephan Poppe (sp), Thomas Burkert (tb), Cameron Chapman (cc), Robin Schulz (rs), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Andrew Lobo (proofreading).

Unsubscribe
http://smashingmagazine.us1.list-manage1.com/unsubscribe?u=16b832d9ad4b28edf261f34df&id=62f9f9e407&e=54cfdd29ef&c=14894e830e

Change address
http://smashingmagazine.us1.list-manage.com/profile?u=16b832d9ad4b28edf261f34df&id=62f9f9e407&e=54cfdd29ef

Online archive
http://www.smashingmagazine.com/the-smashing-newsletter/

Produced by Smashing Media GmbH - Werthmannstr. 15 - 79098 Freiburg - Germany - Amtsgericht Freiburg: HRB 704836.
http://www.smashingmagazine.com/about/

0 comments:

Post a Comment