August, 2014 | Webmasters Gallery

Useful Adobe Fireworks Resources: Tutorials, Articles And Freebies (Part 2)

August 7th, 2014 admin No comments

A few weeks ago, I mentioned some of the best extensions¹ that are currently available for Fireworks. Today, I’ll cover some of the best tutorials and articles, as well as many freebies (styles, templates, resource libraries, and so son) that are available for Fireworks. All of them can (and will!) teach you how to use Fireworks in a better, more optimal way.

Again, in order to help you obtain a good overview of everything covered in this article, I’ve grouped the resources into the following sections:

Tutorials²: Everything you need to know about how to use Fireworks.
Articles³: The features of Fireworks and other UI design tools (compared).
Assets and freebies⁴: Fireworks PNG files, templates, style presets, libraries, etc.
Conclusion⁵: Is Fireworks still relevant in 2014 and what are its alternatives?

Tutorials

Brushed Metal Effect in Adobe Fireworks Tutorial

Using this “Brushed Metal Effect⁶” tutorial, you can create a nice-looking brushed metal effect in Fireworks. The tutorial is pretty basic but you can learn a thing or two from it. (If you’re curious, in real life brushed metal⁷ is metal with a unidirectional satin finish produced by a special polishing process; the brushing gives the metal a distinctive look, as it retains some but not all of its metallic lustre and is given a pattern of very fine lines parallel to the brushing direction.)

The final result can be saved as a vector file, or you can easily export a “flat” pattern or texture file of any size.

⁸

“Brushed Metal Effect in Adobe Fireworks” tutorial: I have tried the steps outlined in it, and the final results can be achieved pretty easily. (view large preview⁹ or download the editable Fw PNG file¹⁰)

How to achieve pixel perfection with Adobe Fireworks Tutorial

When it comes to user interface design, Adobe Fireworks is an excellent tool for laying out your ideas and also for creating cutting edge graphics for your app or website. Like in any other graphic software, there are different ways to create one effect. However, the result doesn’t always look the same for each method. In the article “How to achieve pixel perfection in your designs with Adobe Fireworks¹¹,” Ivo Mynttinen¹⁰²⁶⁰¹² will show you how to achieve real pixel perfection!

“How to achieve pixel perfection in your designs with Adobe Fireworks” (example from the tutorial).

(Note: Ivo Mynttinen wrote also a very useful and detailed article for Smashing Magazine, “Design Cutting Edge iOS Apps With Adobe Fireworks¹³“.)

Creating Brushed Metal in Adobe Fireworks Video Tutorial

Speaking of brushed metal effects, here’s a more complex (video) tutorial that will let you achieve more interesting results: “Creating Brushed Metal in Adobe Fireworks¹⁴.” It’s by designer and Fireworks master Rogie King¹⁵ and is certainly worth watching.

¹⁶

“Creating Brushed Metal in Adobe Fireworks,” by Rogie King. (watch video tutorial¹⁷)

This tutorial will show you actually some of the steps in the process of designing the Rainboxx logo¹⁸ (see the next item in the list).

Designing the Rainboxx Logo Video Tutorial

Watching designers work is always fun and can teach us a lot; so I can recommend you to watch the “Designing the Rainboxx Logo in Fireworks¹⁹” video tutorial by Rogie King. You can get an insight into Rogie’s workflow and also learn a few useful things about Fireworks and its tools.

²⁰

“Designing the Rainboxx Logo in Adobe Fireworks,” by Rogie King. (watch video tutorial²¹)

Pasting Attributes in Adobe Fireworks Video Tutorial

Here’s another quick video tutorial (only 7 minutes long) by Rogie King, “Pasting Attributes in Adobe Fireworks²².” It’s about the option to easily copy-paste attributes between different objects on the canvas in Fireworks. The option is easy to master (it’s as simple as Ctrl/Cmd+C and Ctrl/Cmd+Alt+Shift+V!) but very useful. Rogie will show you a few examples of its use and a few tips and tricks.

Pasting Attributes in Adobe Fireworks (tutorial) — “Pasting Attributes in Adobe Fireworks,” by Rogie King. (watch video tutorial²⁴)

(And, if you need even more control, there’s the Copy and Paste Selective Attributes command available in the Modify Commands²⁵ set by Aaron Beall.)

Brushed Metal iCloud Logo Tutorial

This is another tutorial which is about brushed metal effects (that’s the last one, promise!). In “Brushed Metal iCloud Logo with Fireworks²⁶,” you’ll learn how to work with vector shapes, filters and vector masks.

“Brushed Metal iCloud Logo” tutorial: putting it all together. (source²⁷)

(Note: There are many other excellent tutorials, published in the FireTuts²⁸ website, do check them out!)

Working with Masks in Fireworks Video Tutorial

Working with Masks in Fireworks²⁹ is a bit long video tutorial (close to half an hour!) by Jim Babbage³⁰, but from it you’ll learn everything you need to know about masking with Fireworks — how to create vector masks, how to easily edit already created masks, working with gradients in masks, etc.

Realistic 3D simulation with reflection in Fireworks Tutorial

Realistic 3D simulation with reflection in Fireworks³³ (by Lucian Dragomir³⁴) will teach you a thing or two and the end results look very elegant.

8 Essential Fireworks Tips For Web Design Tutorial

8 Essential Fireworks Tips For Web Design³⁶ is a tutorial (originally published in .net magazine UK³⁷ and written by Jonathan Snook³⁸), which takes a good look at the features that make Fireworks so useful for web designers (these include styles, pages and states, rich symbols, and more). Jonathan also shares a few other time-saving tips in this tutorial! If you are a Photoshop die-hard fan and wondered why you’d ever should try Fireworks, or if you have been using Fireworks for years and are looking to improve your workflow, then this tutorial is just for you.

8 Essential Fireworks Tips For Web Design (screenshot) — “8 Essential Fireworks Tips For Web Design” (screenshot from the tutorial).

Easy Odometer Icon Tutorial

The Easy Odometer Icon³⁹ tutorial (by Tiago Camargo) is an easy-to-follow tutorial in which you’ll learn how to deal with Fireworks vector objects, live filters and blending modes.

“Easy Odometer Icon” tutorial, published in the FWPolice⁴¹⁴⁰ website (final results).

(Note: The FWPolice⁴¹⁴⁰ website also offers many types Fireworks vector freebies⁴² and has many other tutorials⁴³ about Fireworks.)

Refining Your Design In Adobe Fireworks Tutorial

In the “Refining Your Design In Adobe Fireworks⁴⁴” tutorial, Benjamin De Cock⁴⁵ shares a few excellent tips and tricks when working with Fireworks, accompanied by many helpful illustrations and screenshots. We have published this tutorial in 2012, but it’s still highly useful to read even today!

Refining Your Design In Adobe Fireworks (examples) — “Refining Your Design In Adobe Fireworks” tutorial. (source⁴⁶)

Fireworks: The Things You Might Have Missed Tutorial

This is a very old tutorial by Trevor McCauley but you can still learn a few smart Fireworks tips and tricks from it: scaling of attributes of objects, using vector shapes for bitmap marquees, selective JPEG quality, hiding/showing selection edges, finding and replacing colors (or text) in FW PNG files, the difference between subselect and superselect, tweening symbols for duplication, and so much more. This is an old classic!

(Trevor is well-known in the Fireworks community; he has created many useful Fireworks extensions⁴⁹ and recently even open-sourced⁵⁰ them, releasing the source code on GitHub⁵¹.)

Index and Alpha Transparency in Fireworks Tutorial

In “Index and Alpha Transparency in Fireworks⁵²,” Dave Hogue⁹⁵⁵³ (currently UX design manager @ Google) is taking an in-depth look at index and alpha transparency and how to use them in Fireworks to your advantage.

(Note: It’s a not-so-well known fact that for many years, Fireworks was the only design application⁵⁴ that could export PNG8 files which included both index and alpha transparency! These PNG8 index+alpha files were displayed correctly across all browsers, including Internet Explorer 6, which couldn’t render properly PNG files with an alpha transparency channel.)

FireworksGuruForum Community

The forum members of the FireworksGuruForum⁵⁵ (created by Alan Musselman¹³²⁵⁶), while not so active as in the past, are still there to help you, should you have any questions regarding Fireworks. But what’s more important, there are many useful resources published there (freebies, tutorials, useful links, Fireworks PNG files and templates, styles, etc.).

Adobe Fireworks Tutorials by Craig Erskine

In this series of Adobe Fireworks (mini) tutorials⁵⁷, Craig Erskine⁸²⁵⁸ will teach you many basic and advanced techniques. These tutorials were written mostly for users who have a very strong understanding of Fireworks, but even if you are not a Fireworks expert, they’re still worth checking out!

Articles

The Endless Fireworks vs. Photoshop Battle Article

“The Endless Fireworks vs. Photoshop Battle⁵⁹” article was written over 3 years ago by Ivo Mynttinen¹⁰²⁶⁰¹² and is still relevant today, even if we know that in the end, Photoshop became the apparent winner in this battle — but not because it proved to be a better UI design tool than Fireworks, but because Adobe always wanted to market it as such.

The article is pretty long and goes into great detail about what are the strengths and weaknesses of both apps when used specifically for UI design — web, mobile, icon design, etc. Do check it out! (Btw, today Ivo still uses Fireworks but has moved a lot of his workflow to Sketch⁶¹; and he’s not the only one⁶².)

The Endless Fireworks vs. Photoshop Battle (screenshot) — The Endless Fireworks vs. Photoshop Battle article (screenshot).

The Power of Adobe Fireworks Article

“The Power of Adobe Fireworks⁶³” is an article which I wrote in 2010 (how time flies by!) and in which tried to show all the various types of work that Fireworks can be used for — UI and icon design, illustration, web design, even digital painting.

The Power of Adobe Fireworks (examples from the article). — “The Power of Adobe Fireworks”: a few examples from the article.

The list of designers and illustrators, whose work I have showcased in my article, included Matthew Inman (the cool guy behind The Oatmeal⁶⁴ comic strips), Rogie King⁶⁵(designer and illustrator, who’s always on page #1⁶⁶), Ryan Hicks⁶⁷(Senior UX Designer at Adobe), Craig Erskine⁶⁸(known to many with his successful “Fireworks PNG Weeks⁸¹⁶⁹” series), Jon Hicks⁷⁰(the inventor of the Firefox logo, among other things), and many others. (It does not include the work of great illustrators (and Fireworks masters) such as Isabel Aracama¹²⁶⁷¹, James Parker⁷² or Fabio Benedetti⁷³, with whose work I was acquainted with at a much later time… I should perhaps consider a Part 2 one day!)

50 Reasons not to use Photoshop for Web Design Article

The “50 Reasons not to use Photoshop for Web Design⁷⁴” (by André Reinegger) feels like a direct feature comparison between Photoshop and Fireworks. It’s a bit outdated today (and yes, so many years later Photoshop can finally create and edit rounded rectangles!) but many of the reasons outlined there are still valid. In its core, Photoshop was designed to be used for manipulation of raster images and for print tasks; it was not designed to create pixel-precise screen layouts, or to make quick changes to them.

Photoshop is used for this purpose however (UI and web design) because many designers are familiar with the program. However, other tools exist that were designed from the ground-up to be UI design tools and perform the task better; and among them is Fireworks (although Sketch and a few other new tools are starting to catch up and real fast).

Adobe Fireworks, a Super Hero that is Hard to Kill Article

Why not approach the subject of Fireworks vs. Photoshop with a bit of humor? André Reinegger is trying just that in “Adobe Fireworks, a Super Hero that is Hard to Kill⁷⁵.” Adobe has no tool in their portfolio today that can replace Fireworks in full, and it’s doubtful if Adobe will invent such a tool, now that they froze the development of Fireworks. But the good news is that Adobe still keeps Fireworks in their Creative Cloud list of apps and it runs fine on latest Windows OS and MacOS X. There are also hundreds of excellent free extensions which add valuable new features to Fireworks.

10 Reasons why I prefer Fireworks to Photoshop for Web Design Article

In “10 Reasons why I prefer Fireworks to Photoshop for Web Design⁷⁷,” Leigh Howells (designer at Headscape⁷⁸) shares why he has decided to make the transition from Photoshop to Fireworks. He was a Photoshop user for over sixteen years (ten of which have been in a production web design environment). When Fireworks CS4 was released, he decided to have another look at Fireworks. He played with it a bit, and was very impressed by some of its features. Soon after that he started producing much of his day-to-day work in Fireworks.

Some of the reasons he mentions are the ability to have multiple pages (with master page) in one Fireworks PNG document; symbols and styles; the powerful vector features of Fireworks; the 9-slice scaling tool, and a few others.

10 reasons why I prefer Fireworks (article). — “10 Reasons why I prefer Fireworks to Photoshop for Web Design” (screenshot from the article).

7 Reasons Why I Choose Fireworks Over Photoshop Article

So, you are still in doubt about Fireworks? Let Russell McGovern tell you his reasons for using Fireworks in “7 Reasons Why I Choose Fireworks Over Photoshop⁷⁹.” He takes his time to efficiently visualize the evident advantages of the program and explains his preferences and the key features of Fireworks that help him in his UI daily design tasks.

Fireworks PNG Files, Templates, Style Presets & Resource Libraries

Dragnet Wireframes Kit for Adobe Fireworks

Dragnet Website Wireframes Kit⁸⁰ for Adobe Fireworks (by Jonas Skoglund) is a common library with over 25 objects that make rapid prototyping of websites much easier in Fireworks.

Yes, Fireworks comes pre-loaded with a library of similar web elements that look really nice, but Jonas developed the kit because he wanted to create something a bit more rough, something that looked more like sketches, so the clients (or the user test participants) wouldn’t get distracted by the design when instead they should focus more on the function behind the web page or application.

Dragnet website wireframes kit for Adobe Fireworks — Dragnet Wireframes Kit for Adobe Fireworks (screenshot).

Fireworks PNG Weeks Series

Fireworks PNG Weeks⁸¹⁶⁹ is a collection of 52 high-quality Fireworks editable PNG files that you can download and de-construct in Fireworks at your ease. It was a project by Craig Erskine⁸²⁵⁸ and quite a cool one, because often, one can learn a lot when taking a close look at the work of others!

Dribbble Records Fireworks PNG

Dribbble Records⁸⁴ is a Fireworks PNG freebie which is based on a Dribbble shot⁸⁵ of mine. I liked the end result, so I decided to release the file as a freebie (for personal/non-commercial use). If you open the file in Fireworks, you can learn a bit about gradients, blending modes and live filters.

Dark UI Kit Templates

Dark UI Kit⁸⁹ (by Dustin Evans⁹⁰) is a great looking set of templates for Adobe Fireworks which is completely free. You can learn from it or just (re)use the templates in both personal and commercial projects.

The kit is in Fireworks PNG format and contains five pages, each one containing elements of different type: menus and tabs, alerts and validation dialogs, sliders, etc.

Simple User Interface Kit Templates

The Simple User Interface Kit⁹² (by Stefan Hiienurm”⁹³) is a set of clean UI templates which will help you to do (and learn) better design. It’s available in both Fireworks PNG and Photoshop PSD editable formats. (Note: The kit is not free, but costs only $12.00. In this article, I tried to collect mostly free items, available for Fireworks, but sometimes an exception or two is OK, if the quality is very good.)

Simple User Interface Kit (for Adobe Fireworks) — Simple User Interface Kit (available in Fireworks and Photoshop formats).

Hipster Photo Styles for Fireworks

As the name suggests, Instant Hipster Photo Styles for Adobe Fireworks⁹⁴ (created by Dave Hogue⁹⁵⁵³) is a set of non-destructive photo styles that can be easily used on any photo or image. They include 17 variations (sepia, polaroid, sunrise, black & white, tint, sketch, etc.) and were optimized for images from 300 x 300 to 750 x 750 pixels (which makes them perfect for use on the web and when sharing pictures by email); but they can also be applied to a photo of any size, of course.

With Instant Hipster photo styles, you can make your own Hipstamatic-style shots right within Fireworks and even send them instantly to Twitter or Flickr with the help of the TweetFire or FlickrFire extensions, which I have reviewed earlier in detail.

I tried to play a bit with these a while ago and found them both easy and fun to use. What’s better: you’re not limited to using the styles “as is” only! You can download a style set, tweak the styles to suit your taste better, and re-save them. Or, you can create your own style sets from scratch: pick up a few live filters, adjust their properties, experiment, and when ready, simply save as a new style. Easy!

Example of using photo styles in Fireworks — The process is very straightforward: select an image (1), apply a specific style (2), done! (**Note:** this example includes a photo by B’Joel⁹⁶ and shows a 1978 Lincoln Town Car).

Webportio Library of Fireworks Resources

Webportio⁹⁷ (created by Ji?í Plíštil⁹⁸) is a library of Fireworks resources, quite regularly updated. It contains a few hundred graphical elements in editable Fireworks PNG format (icons, buttons, forms, patterns, ribbons, etc.), and also various other resources, like grids, styles, website templates, etc. All of the resources are free and well categorized. They have been downloaded over 400’000 times since the Webportio site was launched.

Webportio resources for Adobe Fireworks. — Webportio resources (screenshot).

Fireworks Library by Aaron Beall

The Fireworks Library¹⁰⁰ by Aaron Beall¹⁰¹ is a small library of high-quality Fireworks editable PNG files, patterns, styles and symbols. You can freely use any of them in your projects, or learn by de-constructing them in Fireworks.

FireworksLab resources for Adobe Fireworks. — Aaron Beall’s library (examples).

FireworksLab Library of Resources

Finally, I should also mention FireworksLab. It was an excellent free design resources site for Adobe Fireworks files, created by Ivo Mynttinen¹⁰²⁶⁰¹². Ivo started FireworksLab because in 2010 there were not many resource sites with quality Fireworks files; in addition he wanted to support the growing Fireworks community. For the time that FireworksLab existed (less than two years), Ivo and a few contributors have designed and released 47 freebies which have been downloaded around 300’000 times!

The project was shut down at the end of 2012, but luckily for all of us, Ivo is still providing the Fireworks resources created in one large ZIP archive. If you want to use or learn from any of them, go to the FireworksLab announcement post¹⁰³, section “Can I still download the old FireworksLab resources?”, and get the archive!

Conclusion

In Part 1¹⁰⁴ and Part 2 of this Adobe Fireworks Resources (2014 Edition), I tried to collect all the best resources, available today for designers using Fireworks.

Did I miss to mention any important resources, extensions, styles, articles or tutorials? I probably most certainly did! My list is by no means complete, but truth is, one cannot list each and every valuable resource that is available for Fireworks today — there are way too many of them — thanks to the amazing Fireworks community! We’ve also published over 25 high-quality articles and tutorials in our Fireworks section¹⁰⁵ over the last two years, and I can recommend reading each one of them!

Where to go from here?

As I mentioned in my recent article, the future of Fireworks¹⁰⁶ is certainly not bright, but as of 2014, it’s still a solid piece of software that can help UI designers work in a very efficient way.

Do I believe Fireworks is still better than many other UI design tools available today? Yes¹⁰⁷. Personally, I use Fireworks CS5.1 and CS6 on Windows 8.1 Pro 64bit, and find both of them stable, useful, and quite indispensable in my workflow. I also use many free extensions which add valuable features to Fireworks, like the SVG import¹⁰⁸/export¹⁰⁹ commands; without its extensions, Fireworks wouldn’t be where it is today.

Is Fireworks still relevant?

Is Fireworks still relevant in the fast-pacing software world? Yes — to some extent, at least. Fireworks is like a smart Swiss-knife tool — it can be used in a variety of ways, and while none of its tools are unique, as a whole, it becomes a powerful and versatile¹¹⁰ application (try browsing Dribbble, searching for shots tagged “Fireworks¹¹¹“):

For example, Fireworks can be used to help you create modern, responsive websites, both during the UX and interaction design stages¹¹² and during the visual design stage¹¹³, as this detailed case studies (by Olawale Oladunni) proved.
Fireworks can be extended in a variety of ways and even if the core of the app is not getting any major updates from Adobe, extensions can continue add new functionality. In this regard, projects like Project Phoenix¹¹⁴ are very important, as well as the countless number of extensions, published by John Dunning¹¹⁵, Aaron Beall¹¹⁶, Matt Stow¹¹⁷, Trevor McCauley¹¹⁸, and many other extension developers.
Fireworks can be used for wireframing and prototyping¹¹⁹, web design, UI design, icon design, mobile apps design (for both Retina and non-Retina screens), and screen illustration. Since in its core Fireworks is a powerful vector design tool, scaling to any screen resolution is not an issue (plus, it supports SVG¹²⁰).
And while Fireworks excels with vectors, it can also edit bitmaps, too — no need to switch to another tool if you need to quickly make a few color correction to an imported graphic or if you need to crop it/mask it, etc. (This is one of the main differences between Fireworks and a few of its modern alternatives, such as Sketch¹²¹).
What about collaboration with Fireworks? Fireworks can perform equally well in individual designer’s workflows and when used by large design teams¹²². With the help of pattern symbol libraries¹²³ and style guide symbol libraries¹²⁴ the collaboration process can become even easier.
Does Fireworks have some problems? Yes! Its last version (CS6) was released in 2013 and while it works fine on latest Windows OS and Mac OS X, it has some issues — for example, partial incompatibility with Retina MacBook Pros (there is some “pixellization” in the interface), and inability to use more than 2 GB of RAM (Fireworks works well on 32bit and 64bit machines, but because it’s a 32bit application, there are limits as to how much memory it can handle). And it has a few bugs, of course (but which app doesn’t?).

Kawasaki Vulcan (an illustration by Isabel Aracama) — This is a 100% vector illustration, created with Fireworks (and with a lot of love) by illustrator Isabel Aracama¹²⁶⁷¹. Make sure also to check the larger original¹²⁷ or the complex vector outlines¹²⁸!

Alternatives to Fireworks?

You can continue to use Fireworks today, but as I mentioned earlier, it’s a good idea to start looking for alternatives. And there are a few UI design tools that might become sooner or later pretty good replacements to Fireworks.

Here are four of them:

Sketch¹²⁹ (by Bohemian Coding¹³⁰) is UI design tool for Mac which, as of version 3.0, has integrated many of the features that only Fireworks had until now. Its vector tools are quite powerful and it has symbols, pages, artboards, styles, and many other tools that should help UI designers be more efficient. It feels a bit sad that it’s for Mac OS X only (sorry, Windows users!), and its bitmap editing abilities are very limited, but if you’re on a Mac and work mostly with vectors, give it a try — you probably will like it! (And it’s not very expensive, too; Sketch 3.0 costs $79.00, as far as I know).
Project EvolveUI¹³¹ is still in alpha development stage and is a relatively new open source project by Alan Musselman¹³²⁵⁶. You can join the google group of the project¹³³ if you want to test the early builds and discuss its present and future features. EvolveUI screen design tool will be able to run on Windows, Mac OS X and Linux, and will be tailored specifically for UX and UI designers, information architects and web developers. Sounds promising!
Skala¹³⁴ is a project by Marc Edwards¹³⁵. This UI and icon design tool promises to deliver a unique blend of vector, bitmap and 3D abilities. Today Skala is in a closed beta stage¹³⁶, but a public beta will likely be open before the end of 2014. So far the plans of the team are to make a Mac-only version, but perhaps a Windows version might be considered at some point in the future, too.
Gravit¹³⁷ is a new UI design tool for Windows and Mac (developed by Quasado¹³⁸) that is currently in beta stage¹³⁹ but should be released to the public very soon, in August. It promises quite a few features that might replace Fireworks, and will be completely free until version 2.0¹⁴⁰ is released. You can get the early news in the newsletter¹⁴¹ or on Twitter (@gravit_io¹⁴², @quasado¹⁴³).
(last-minute click) Affinity Designer¹⁴⁴ is a new UI design tool for Mac, currently in open beta stage¹⁴⁵. You can try it for free or follow the news via the @MacAffinity¹⁴⁶ Twitter account. The tool promises to be very fast, with a robust set of vector and bitmap editing tools, custom auto shapes, and with excellent compatibility with PSD, AI and SVG file formats.

So, do you use Fireworks in your work? Have you recently found a good alternative to it? It’d be great if you could share your experiences with the tool in the comments section below.

A special thanks goes to Vitaly Friedman¹⁴⁷ who helped me compile this extensive list of Fireworks resources and who inspired me to write this article!

(mb, ml, il)

Footnotes

The post Useful Adobe Fireworks Resources: Tutorials, Articles And Freebies (Part 2) appeared first on Smashing Magazine.

Categories: Others Tags:

Exclusive Freebie: Five Responsive HTML Email Templates for Noupe Readers (plus PSD)

August 7th, 2014 admin No comments

Today we are back with another amazing freebie for all our lovely readers! We teamed up with one of the industry’s most well-known PSD to HTML conversion companies, PSD2HTML.com, to give away a pack of responsive HTML email templates. The original PSD template was created by our second amazing partner in this giveaway, BestPSDFreebies.com. The PSD is available from here, too. So you can get your hands on building your own template if you feel so. We thought this was a great opportunity to share the experience we had with the P2H guys, what working with them is like and what challenges you might encounter while creating your responsive newsletters. Not the least part is that anyone who leaves a comment below gets a chance to win free newsletter template coding services from PSD2HTML worth $150!

Categories: Others Tags:

A Closer Look At Personas: What They Are And How They Work (Part 1)

August 6th, 2014 admin No comments

A persona document should clearly communicate and summarize research data.

In my experience as an interaction designer, I have come across many strategies and approaches to increase the quality and consistency of my work, but none more effective than the persona. Personas have been in use since the mid-’90s and since then have gained widespread awareness within the design community.

For every designer who uses personas, I have found even more who strongly oppose the technique. I once also viewed personas with disdain, seeing them as a silly distraction from the real work at hand — that is, until I witnessed them being used properly and to their full potential.

Once I understood why personas were valuable and how they could be put into action, I started using them in my own work, and then something interesting happened: My process became more efficient and fun, while the fruits of my labor became more impactful and useful to others. Never before had I seen such a boost in clarity, productivity and success in my own work. Personas will supercharge your work, too, and help you take your designs to the next level.

I hope that those who are unfamiliar with personas will read this series of articles, divided into two parts, and give them a try and that those who are opposed to their use will reconsider their position. Where the use of personas has generated uncertainty and even controversy, I have leaned in with curiosity and a critical eye, questioning the tenants of my discipline to determine what works for me — and I’m all the better for it. Perhaps what I’ve learned will help others in their journey to hone their work as well.

What Is A Persona?

A persona is a way to model, summarize and communicate research about people who have been observed or researched in some way. A persona is depicted as a specific person but is not a real individual; rather, it is synthesized from observations of many people. Each persona represents a significant portion of people in the real world and enables the designer to focus on a manageable and memorable cast of characters, instead of focusing on thousands of individuals. Personas aid designers to create different designs for different kinds of people and to design for a specific somebody, rather than a generic everybody.

¹

A persona document should clearly communicate and summarize research data. (Image: Elizabeth Bacon²) (View large version³)

What Does A Persona Look Like?

While a persona is usually presented as a one-pager document, it is more than just a deliverable — it is a way to communicate and summarize research trends and patterns to others. This fundamental understanding of users is what’s important, not the document itself.

⁴

The main elements presented here are the key goals and the “Day in the Life,” which are common to all well-made persona documents. Other elements, such as the “Quick Take on Fred” are included because of team and/or project requirements. Each project will dictate a certain approach to producing persona documents. (Image: Interaction Design⁵) (View large version⁶)

I emphasize this distinction because many people think of a persona and the document that captures essential elements of the persona as the same thing — they are not. It is all too easy for novice practitioners of goal-directed design to fixate on the “best way” to make a persona document and to lose sight of the bigger picture, which is to fully understand a user and then simply share the top-level information with others.

For designers looking for a jump start on creating persona documents, I highly recommend the persona poster template by Creative Companion. This poster organizes and formats all of the important information that a designer would need to create an amazing one-page deliverable.

Where Does The Concept Of Personas Come From?

Understanding the historical context and what personas meant to their progenitor will help us understand what personas can mean to us designers. Personas were informally developed by Alan Cooper in the early ’80s as a way to empathize with and internalize the mindset of people who would eventually use the software he was designing.

Alan Cooper interviewed several people among the intended audience of a project he was working on and got to know them so well that he pretended to be them as a way of brainstorming and evaluating ideas from their perspective. This method-acting technique allowed Cooper to put users front and center in the design process as he created software. As Cooper moved from creating software himself to consulting, he quickly discovered that, to be successful, he needed a way to help clients see the world from his perspective, which was informed directly by a sample set of intended users.

This need to inform and persuade clients led him to formalize personas into a concrete deliverable that communicates one’s user-centered knowledge to those who did not do the research themselves. The process of developing personas and the way in which they are used today have evolved since then, but the premise remains the same: Deeply understanding users is fundamental to creating exceptional software.

Personas are an essential part of goal-directed design. Each group of users researched is represented by a persona, which in turn is represented by a document. Several personas are not uncommon in a typical project. (Image: Gemma MacNaught⁸) (View large version⁹)

How Do Personas Fit In The Design Process?

Since its humble origin, Alan Cooper’s design methodology has evolved into a subset of user-centered design, which he has branded goal-directed design. Goal-directed design combines new and old methodologies from ethnography, market research and strategic planning, among other fields, in a way to simultaneously address business needs, technological requirements (and limitations) and user goals. Personas are a core component of goal-directed design. I have found that understanding the fundamentals of this goal-directed approach to design first will help the designer understand and properly use personas.

In the summer of 2011, I was fortunate enough to become an intern at Cooper, which is where I learned (among other things) how to use personas. At Cooper, I found that, while personas are easy to understand conceptually, mastering their use with finesse and precision would take me many months. There, I witnessed everyone on the team (and even the clients) referring to personas by name in almost every discussion, critique and work session we had. Personas weren’t just created and then forgotten — they were living, breathing characters that permeated all that we did.

I learned that personas are an essential part of what constitutes the goal-directed process. I learned that personas, though important, are never used in isolation, but rather are implemented in conjunction with other processes, concepts and methods that support and augment their use.

Components of Goal-Directed Design That Support Personas

End goal(s)
This is an objective that a persona wants or needs to fulfill by using software. The software would aid the persona to accomplish their end goal(s) by enabling them to accomplish their tasks via certain features.
Scenario(s)
This is a narrative that describes how a persona would interact with software in a particular context to achieve their end goal(s). Scenarios are written from the persona’s perspective, at a high level, and articulate use cases that will likely happen in the future.

The three parts of Goal-Directed design are most effective when utilized together. — The three parts of goal-directed design are most effective when used together. For instance, in order for a sprinter to reach their potential, they need a place to run and a finish line to cross. Without a scenario or end goal, the sprinter would have nothing to do or strive for. (View large version¹¹)

Personas, end goals and scenarios relate to one another in the same way that the main character in a novel or movie goes on a journey to accomplish an objective. The classic “hero’s journey” narrative device and its accompanying constructs have been appropriated for the purpose of designing better software.

How Are Personas Created?

Personas can be created in a myriad of ways, but designers are recommended to follow this general formula:

Interview and/or observe an adequate number of people.
Find patterns in the interviewees’ responses and actions, and use those to group similar people together.
Create archetypical models of those groups, based on the patterns found.
Drawing from that understanding of users and the model of that understanding, create user-centered designs.
Share those models with other team members and stakeholders.

Step-by-step instructions on how to create a persona is beyond the scope of this article, but we’ll cover this in the second article in this series.

What Are Persons Used For?

Personas can and should be used throughout the creative process, and they can be used by all members of the software development and design team and even by the entire company. Here are some of the uses they can be put to:

Build empathy
When a designer creates a persona, they are crafting the lens through which they will see the world. With those glasses on, it is possible to gain a perspective similar to the user’s. From this vantage point, when a designer makes a decision, they do so having internalized the persona’s goals, needs and wants.
Develop focus
Personas help us to define who the software is being created for and who not to focus on. Having a clear target is important. For projects with more than one user type, a list of personas will help you to prioritize which users are more important than others. Simply defining who your users are makes it more apparent that you can’t design for everyone, or at least not for everyone at once — or else you risk designing for no one. This will help you to avoid the “elastic user,” which is one body that morphs as the designer’s perspective changes.
Communicate and form consensus
More often than not, designers work on multidisciplinary teams with people with vastly different expertise, knowledge, experience and perspectives. As a deliverable, the personas document helps to communicate research findings to people who were not able to be a part of the interviews with users. Establishing a medium for shared knowledge brings all members of a team on the same page. When all members share the same understanding of their users, then building consensus on important issues becomes that much easier as well.
Make and defend decisions
Just as personas help to prioritize who to design for, they also help to determine what to design for them. When you see the world from your user’s perspective, then determining what is useful and what is an edge case becomes a lot easier. When a design choice is brought into question, defending it based on real data and research on users (as represented by a persona) is the best way to show others the logical and user-focused reasoning behind the decision.
Measure effectiveness
Personas can be stand-in proxies for users when the budget or time does not allow for an iterative process. Various implementations of a design can be “tested” by pairing a persona with a scenario, similar to how we test designs with real users. If someone who is play-acting a persona cannot figure out how to use a feature or gets frustrated, then the users they represent will probably have a difficult time as well.

Are Personas Effective?

If you still aren’t convinced that personas are useful, you are not alone. Many prominent and outspoken members of the design community, including Steve Portigal and Jason Fried, feel that personas are not to be used. They make compelling arguments, but they all rule out the use of personas entirely, which I feel is much too strong. (A nuanced analysis of their anti-persona perspectives is beyond the scope of this article but is definitely worth further reading. Links to writings about these perspectives can be found in the “Additional Resources¹²” section at the end of this article.)

Like any other tool in the designer’s belt, personas are extremely powerful in the right time and place, while other times are simply not warranted; the trick is knowing when to use which tool and then using it effectively.

Any tool can be used for good or evil, and personas are no different. If used improperly, as when personas are not based on research (with the exception of provisional personas, which are based on anecdotal, secondhand information or which are used as a precursor or supplement to firsthand research), or if made up of fluffy information that is not pertinent to the design problem at hand, or if based solely on market research (as opposed to ethnographic research), then personas will impart an inaccurate understanding of users and provide a false sense of security in the user-centered design process.

As far as I can tell, only two scientifically rigorous academic studies on the effectiveness of personas have been conducted: the first by Christopher N. Chapman in 2008, and the second by Frank Long in 2009. Though small, both concluded that using personas as part of the design process aided in producing higher-quality and more successful designs.

These studies join a growing body of peer-reviewed work that supports the use of personas, including studies by Kim Goodwin, Jeff Patton, David Hussman and even Donald Norman. The anecdotal evidence from these and many other writers has shown how personas can have a profoundly positive impact on the design process.

An excerpt from Frank Long's study of Persona Effectiveness — An excerpt from Frank Long’s study of the effectiveness of personas. Designs created by students who used personas and scenarios (pink and blue) scored higher than the designs of those who used neither (gray) in a type of usability test called a heuristic analysis. (View large version¹³)

How And Why Do Persons Work?

Personas are effective because they leverage and stimulate several innate human abilities:

Narrative practice
This is the ability to create, share and hear stories.
Long-term memory
This is the ability to acquire and maintain memories of the past (wisdom) from our own life experiences, which can be brought to bear on problems that other people face.
Concrete thinking
This is the tendency for people to better relate to and remember tangible examples, rather than abstractions.
Theory of mind (folk psychology)
This is the ability to predict another person’s behavior by understanding their mental state.
Empathy
This is the ability to understand, relate to and even share the feelings of other specific people.
Experience-taking
This is the ability to have the “emotions, thoughts, beliefs and internal responses” of a fictional character when reading or watching a story.

Personas, goals and scenarios tap into our humanity because they anthropomorphize research findings. When hundreds or even thousands of users are represented by a persona, imagining what they would do is a lot easier than pouring over cold, hard, abstract data. By using personas, goals and personas together in what Cooper calls a “harmonious whole,” one is able to work in a more mindful way, keeping the user at the heart of everything one does.

If a designer truly understands and internalizes the user and their needs and how they could potentially fulfill those needs, then seeing potential solutions in the mind’s eye becomes much easier; rich and vivid ideas from the user’s perspective seem to percolate to the top of mind more rapidly and frequently. These ideas are more likely to turn into a successful design than by using other methods because the designer has adopted the user’s filter or frame as their own.

This potent combination of personas, goals and scenarios help the designer to avoid thinking in the abstract and to focus on how software could be used in an idealized yet more concrete and humanistic future.

Do I Really Need To Use Personas?

To determine whether personas would be appropriate, a designer must first step back and determine who they are designing for. Determining the audience for a design is deceptively simple, yet many people never think to take the time to explicitly figure this out.

The fundamental premise of user-centered design is that as knowledge of the user increases, so too does the likelihood of creating an effective design for them. If a designer designs for themselves, then they wouldn’t need to use personas because they are the user — they would simply create what they need or want.

Designers do design for themselves from time to time, but professionally most design for others. If they are doing it for others, then they could be designing for only two possible kinds of people: those who are like them and those who are not like them. If they are designing for people like them, then they could probably get away without personas, although personas might help. Usually, though, designers design for people unlike themselves, in which case getting to know as much as possible about the users by using personas is recommended.

Treat different people differently. Anything else is a compromise.

– Seth Godin

Personas help to prevent self-referential thinking, whereby a designer designs as if they are making the software only for themselves, when in fact the audience is quite unlike them. This is how most designers actually work: according to what they like or think is the right way to do things. Even a seasoned designer can go only so far on intuition. This is one of the biggest mistakes one can make when designing software (or anything else, for that matter).

Conclusion

As human beings, designers are all biased and can only see the world through their own eyes — however, they can keep that in mind when designing from now on. Designers must strive to the best of their ability to keep their biases and, dare I say, egos in check.

Designers don’t always know what is best — but sometimes users do and that is what personas are for: to stand up and represent real users, since real users can’t be there when the design process takes place. In your next project, there will come a time when you must decide what is in your user’s best interest. Just like in the movies, picture a devil and angel on your shoulders, where the devil tries to coax you to design something that pleases only your own sensibilities, and the angel is the persona who cries out in defence of their own needs. Who will you listen to?

Granted, not even the most disciplined user-centered and goal-directed designer can be completely unbiased. As professionals, we all use our best judgment to make decisions (based on knowledge of the field, knowledge of competitive markets and work experience), but some people’s perspective is more self-centered than others. Personas help to keep a designer honest and to become mindful of when they are truly designing for others and when they are just designing for themselves. If you are going to design for someone unlike yourself, then do your users a solid and use a persona.

We’ll discuss the process of creating personas from ethnographic research in part 2 of this series.

Additional Resources

Presentations and Posters

“Presentation Deck: Personas Demystified¹⁴,” Shlomo Goltz
Kick off a persona-creation project with your team.
“Presentation Deck: Provisional Persona Workshop¹⁵,” Shlomo Goltz
Create provisional personas with stakeholders.
“Persona Poster Template¹⁶,” Creative Companion
A great way to get a jumpstart on creating a persona one-pager.

Books

The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity¹⁷, Alan Cooper
About Face 3: The Essentials of Interaction Design¹⁸, Alan Cooper
Designing for the Digital Age: How to Create Human-Centered Products and Services¹⁹, Kim Goodwin
The Essential Persona Lifecycle: Your Guide to Building and Using Personas²⁰, Tamara Adlin and John Pruitt
The User Is Always Right: A Practical Guide to Creating and Using Personas for the Web²¹, Steve Mulder

Goal-Directed Design

“Goal-Directed Design: An Interview With Kim Goodwin²²,” Christine Perfetti, User Interface Engineering
“Designing With Scenarios: Putting Personas to Work²³” (PDF slidedeck), Kim Goodwin

Defining Personas

“Perfecting Your Personas²⁴,” Kim Goodwin, Cooper Journal
“Getting From Research to Personas: Harnessing the Power of Data²⁵,” Kim Goodwin, Cooper Journal
“7 Core Ideas About Personas And The User Experience²⁶,” Jeff Sauro, Measuring Usability
“Explaining Personas Used in UX Design,” Part 1²⁷, Part 2²⁸, Ben Melbourne
Personas²⁹ (white paper), W5
“The Power of Personas³⁰,” Charles B. Kreitzberg and Ambrose Little, MSDN Magazine
“Personas: Putting the Focus Back on the User³¹,” James Costa, UX Booth
“The Origin of Personas³²,” Alan Cooper, Cooper Journal
“Death to Personas! Long Live Personas!³³” (slidedeck) Elizabeth Bacon and Steve Calde, Catalyze
“Personas³⁴”, Lene Nielsen, Interaction Design Foundation

How and Why Personas Work

“The Narrative Practice Hypothesis: Clarifications and Implications³⁵,” Daniel D. Hutto, Academia.edu
“Ad-Hoc Personas and Empathetic Focus³⁶,” Donald Norman
“Personas and the Advantage of Designing for Yourself³⁷,” Joshua Porter
“Personas: Practice and Theory³⁸” (PDF), John Pruitt and Jonathan Grudin, Microsoft
The Persona Lifecycle: Keeping People in Mind Throughout Product Design³⁹, John Pruitt and Tamara Adlin
“Losing Yourself in a Fictional Character Can Affect Your Real Life⁴⁰,” Jeff Grabmeier, Ohio State University

Effectiveness of Personas

“Real or Imaginary: The Effectiveness of Using Personas in Product Design⁴¹,” Frank Long, Frontend
“The Personas’ New Clothes: Methodological and Practical Arguments Against a Popular Method⁴²” (PDF), Christopher N. Chapman and Russell P. Milham, Microsoft
“Putting Personas Under the Microscope⁴³,” Suzy Thompson, Cooper Journal
“Quantitative Evaluation of Personas as Information⁴⁴” (PDF), Christopher N. Chapman

(cc, il, al)

Footnotes

The post A Closer Look At Personas: What They Are And How They Work (Part 1) appeared first on Smashing Magazine.

Categories: Others Tags:

It’s a Rat Race: 40+ Free SEO Tools Any Site Owner Needs to Know

August 6th, 2014 admin No comments

Free SEO tools are a great way to get closer to that number one position without paying too much upfront. Dirty little secrets: even the average SEO specialist uses free tools, so why shouldn’t you? We have researched the following big list of free SEO tools anyone should at least know about. Even if you may have used one or two from the list already, we are sure you’ll find more than one gem you haven’t seen before. Let the race for the top spot begin…

Categories: Others Tags:

Design Responsive Websites In The Browser With Webflow

August 5th, 2014 admin No comments

This article is the first part of a series of articles on emerging responsive design tools. Today, Richard Knight explores the advantages of Webflow and how you can use it today to build responsive websites — perhaps a bit faster than you would build them otherwise. — Ed.

New tools have emerged to address the challenges of responsive web design — tools such as Adobe Reflow¹ and the recently released Macaw². Today, we’ll look at one that I have tested extensively in the last few months. Though not perfect, it’s been a leap forward in productivity for the team that I work with. Its name is Webflow³, and it could be the solution to the problems you face with static design comps produced in Photoshop and Fireworks.

This article will take you step by step through the process of creating a responsive website layout for a real project. As we go along, we’ll also identify Webflow’s advantages and where it comes up short.

Getting Started

Getting started in Webflow is a relatively simple. Head over to the website⁴, create an account, and give the free trial a go. Make sure to open the interface in the latest version of Google Chrome because it is currently the only browser that is fully supported.

Before beginning a design, decide whether to start it from scratch or to work with one of the many templates. For this tutorial, we’ll choose the blank website template.

⁵

Take a minute to mouse over the tooltips in Webflow’s interface to become familiar. There are no shape tools or layers in the traditional sense. There are also no filters or effects or even brushes. Webflow keeps everything focused on what the browser can do; so, knowing the basics of HTML and CSS is enough to get up and running.

Toolbar Overview

The left toolbar handles various functions, such as publishing your website to be shared with a live link and switching between device views (using the laptop and phone icons). You’ll use this toolbar mostly for the latter and for entering preview mode, which hides Webflow’s interface and shows what your website will look like when published.

webflow-left-bar-500 — (View the entire toolbar⁸)

The right toolbar (shown below) consists of six tabs. The first tab (“+”) lets you add structure and HTML content elements to the page. Each item you add to the body of the page comes with default styles that you may overwrite. Whenever you need to add content, you’ll come back here. I always start with a section, a container and columns because they all have predefined behavior that changes according to the breakpoint.

A section is a div set to the full width of the viewport. A container sits centered within a section and constrains the widths of elements such as headings and paragraphs, while columns divide containers evenly in percentages.

Next is the CSS tab, where we’ll spend most of our time. Here, we can assign classes to the element that is currently selected and then style it as we see fit. All of the CSS that you would normally write by hand is shown here. As soon as you change a class, the CSS will update immediately without your having to refresh. Be sure to examine the advanced toggles, which allow for control of other things such as positioning and the behavior of background images in their div.

wf_css_preview — CSS options (View large version¹²)

The third tab is for settings of the element that you select. Here, you can control things like the visibility of content at certain screen sizes, and you can add link elements to other pages in your project. This panel has to do mainly with non-style-related aspects and is especially handy when you’re working on complicated elements, such as the navigation menu.

wf_settings — Control visibility and even add links.

Fourth from the left is a useful structure navigator that visually displays the contents of your website in a folder-like tree. If you need a heading to sit in a different div or container, just click and drag it to where you want it to be. I often refer to this panel as I go to make sure that certain items are in the right divs and that my styles cascade appropriately. It’s also useful for selecting content that might be hard to click with the mouse because it is behind other elements.

wf_structure — These elements will be represented by the class names that you assign to them, so give everything a straightforward name.

Next up is the class manager, which shows all of your CSS classes at once. You can use it to edit a particular class (see the small wrench icon) and to quickly remove any class that isn’t being used. It’s handy, but you will usually just use it to clean up classes that you’ve discarded or to quickly change a class that’s used multiple times in different places.

wf_css_classes — A quick view of all of your CSS classes.

Last is the symbol library. Complex items, such as the primary navigation and the footer, can be created as symbols, which can be reused on other pages in your Webflow website. This is a great time-saver, but know that symbols are usable only in the project they were created in.

Regarding Web Fonts

Before we begin with the project, it’s worth mentioning that Webflow supports web fonts to a certain extent. All of the usual standbys, including Arial and Verdana, are available, and you can use any font in Google’s library, as well as any you have in TypeKit. However, any font not provided by either Google or Typekit cannot be integrated in Webflow’s design view (an obstacle that my team faced).

Applying your own font using Webflow’s custom code area is possible. Do this by linking to it in the head of your website and then using a style tag to specify where to use it. However, the font will appear only after you’ve published the website, making it frustrating to refine your typography for different breakpoints.

wf_custom_code_500 — An example of how to apply your own hosted web font.

Designing In The Browser

For this tutorial, we’ll work from the desktop view down to mobile. This is deliberate: In Webflow, every style that you create in the desktop view will cascade down. It’s weird at first, but you do get used it. The rationale is that when you change a style in the tablet view, it will change for everything below. This saves time when something is broken in one media query because it will often be broken in the narrower views.

We’ll find what we need to begin in the “+” icon (the tab to add elements). First, add a section, and then drag and drop a “navbar” into that section. Then, select the image element under “Media,” and drag it over to the logo area of the navbar. Once it’s highlighted, let go of the mouse, and Webflow will drop in a placeholder image. I’ve replaced the default image with my company’s logo. Essentially, what we’re doing here is using divs and HTML pieces that have a predefined behavior in Webflow; while empty and lacking any notable styles, they will form the basic structure of the website.

Now, let’s add the rest of the navigation, give it a background color, and change the fonts. My company uses a standard gray for the background of its navigation. Add a background color easily by selecting the navbar section with your mouse and then going down to the background area in the style tab. Once you’ve chosen a color, click “OK” to confirm.

Next, we need to add a section that sits above the navbar. This will have a link and some copy. Click and drag the section so that it sits above the navbar, and then add a container so that our new content stays centered in the browser window, like the navigation below it.

Above, I’ve added a plain-text block for the deadline copy, as well as a text link for our call to action. Both are assigned separate classes, set to display as inline-block and with the text aligned right. I’ve also adjusted the padding by dragging with the mouse on the arrows under “Position,” so that they both appear vertically centered. Finally, I’ve given this new section a background gradient.

Notice under “Position” how the padding values are blue. This lets us know that we’ve changed the default styling of 0. If it were a yellow number or a label, this would mean that the selected element’s style is inherited.

wf_inherited_fonts — The font and line-height fields have yellow labels, letting you know that their styles are inherited.

With the styling done for the header, let’s set the structure of the main body. Our website needs copy on the left and an image on the right for tablet and desktop views. Again, add a section and a container, and define a grid by adding the column element to that container. By default, we’re given two columns. You can change this to a different number at any time by tweaking the column’s setting.

I’ve gone ahead and added a large placeholder image to the right column and paragraph copy to the left. I’ve also added two buttons. Working with long copy in Webflow gets tedious because each paragraph has to be added as its own element. It would be nice just to work with one text-box element, in which you can paste all of the copy at once and proceed to style it, as in Macaw.

For now, let’s adjust the paragraph’s line height, add style to the buttons and add the remaining content.

Last, we’ll add the footer by adding a section to the bottom of the page. We’ll apply a background color and throw in one last container to house our new text links and copyright. Another annoyance is that Webflow doesn’t yet allow for descendant selectors. I’d much a prefer a visual way to target links in the footer section with styles akin to the following:

.footer a {
   text-decoration: none;
   font-size: 12px; }

Webflow currently requires everything to be assigned a class, even if it’s already in a div that has a class that you could reference. While not a deal-breaker, a little more finesse would be nice.

wf_footer_500 — Every styled element requires its own class in Webflow.

With the footer done, our desktop layout is in pretty good shape. Now it’s time to tackle any presentation issues that we find at the other breakpoints.

Fixing Breakpoints In Webflow’s Responsive Views

One of the main differences between Webflow and its competition is that you cannot define your own breakpoints. Webflow is a custom framework based heavily on Bootstrap, so a lot of the automatic behavior for content elements derives from that. You could view this as a hindrance or an advantage, depending on your situation and your project’s needs. Our current e-commerce website leverages Bootstrap, so using Webflow to prototype makes sense for us. If your website requires unique breakpoints or you already use another framework, such as Foundation, then you might have to try something else.

Let’s look at the tablet view first. Nothing completely breaks, as you can see below, although we might want to add more space between the footer and the rest of the page.

wf_tabletview_500 — Webflow’s custom Bootstrap framework does most of the work to resize our content.

Next up is the phone view in landscape mode or, as I like to think of it, a very wide phone breakpoint. As you can see in the first screenshot below, things are getting messy. Our image in “Column 2” collides with our callout box. Also, that image is pretty large for mobile phones, so let’s shrink it by changing its width to 40%, leaving the height set to auto. For our last change, I’d prefer that our buttons appear on small screens as block elements, with widths of 100%. Check out the before and after:

wf_phone_landscape_500 — Webflow makes it easy to fix a broken layout.

wf_phone_landscape_fixed_500 — The same breakpoint with our changes applied.

That’s a bit better. As you become familiar with Webflow, you might decide to abandon columns altogether in certain instances because they dictate the order of your page. Suppose we wanted the image to be the first visible item below the primary navigation on phones. Because we’ve used columns and thrown the image into the righthand column, we cannot reorder it on mobile; the left column will always be stacked on top.

If we used our own divs with our own CSS rules, we could easily circumvent this order with some floats. So, even though columns are easy to work with and they come with predefined padding and their widths switch to 100% at low breakpoints, they can also be limiting.

Before moving on, let’s look at the default styles for the navigation menu when expanded. We get there by selecting the navbar and going to the settings tab. Once you’re in settings, click “Open Menu,” and you should see something like this:

That’s a lot of dark gray, with no indication of the boundary between menu items for users of touch devices. Select a link and proceed to change the style. Let’s also separate the links with a bottom border. Other options are available to play with animation, but I’m happy with the defaults for now.

Much better. I’ve inverted the colors somewhat to make the menu items stand out more, and I’ve added a box shadow to give a sense of depth in case it overlaps with elements like buttons. Of course, you can refine it further, specifying hover states and pressed states, but for now let’s look at the smallest breakpoint and see how our changes cascade down.

Not bad but the header takes up a lot of space. Considering that browser chrome will take up space, too, let’s shrink it a bit.

There we go. You can view the result on the demo page²³. If you’re on a desktop machine, resize your browser to see how the layout changes. One of the last items we’ll look at is Webflow’s code-exporting feature.

Exporting The Code

In the left toolbar is an icon that allows you to export your work as a full ZIP file, with the HTML, CSS and all images that you’ve used. At this time, there are no options to tweak how your website gets exported. Having the option to choose between LESS files and one master style sheet would be nice in future, as would an option to point to the paths where images are publicly hosted.

Webflow’s code is relatively clear and straightforward enough. Being design-focused, it does throw just about anything it can into a div, and you’ll see a lot of custom classes that look akin to Bootstrap 3. It also includes a separate style sheet for various fixes, so your website should work in most browsers. Your mileage with the exported code may vary, depending on what you need to do with it. The developers on our team found it easier just to replicate my interactive mockup in Bootstrap 3, rather than try to build on top of the code.

We did this for two reasons. First, our website is a Backbone application that needs functionality such as timed user sessions, Google Analytics and an administrative back end. Secondly, Webflow’s code does not support Internet Explorer 8, which is a requirement for our user base, unfortunately.

Conclusion: A New Tool For Designers

Webflow is a tool targeted at designers who are looking for an alternative to Photoshop and Fireworks for responsive web design. It’s not an all-encompassing solution for creating websites — at least not yet — but by enabling me to focus on layout, interaction and content behavior without having to code, it sped up our team’s design phase immensely.

And while we didn’t use the code that Webflow generated, we still found it to be more collaborative, allowing the developers who I work with to see the work I was doing on their actual phone, tablet and desktop browsers. They could ask questions any time, and I was able to iterate on the fly. Sitting down to actually build the website was easier because we had an interactive prototype to refer to.

I still use Photoshop as I believe it was intended — to crop and retouch images — but when I’m asked to make a new page or a new website, I’ll start working in Webflow. And I’ll continue to refine and expand the visual prototype until we feel we’ve taken it as far as we need to. Then, we’ll move into development, still using Webflow to prototype or test ideas if needed.

On today’s responsive web, a static comp raises more questions than it answers. Sure, you’ll be able to convey the look and feel, but so many questions remain that both designers and developers can get frustrated. As designers, we try to resolve these questions by creating accompanying documentation, such as a web style guide or even sometimes by building a basic page ourselves.

Developers who receive static comps to build from either have to infer missing details or go back to the designer. How does the navigation adjust? What are we envisioning for hover states or for pressed states for buttons? How will the typography change to accommodate different screens? How do we denote an active page? The list goes on and on.

Webflow fills this gap. Details can be inferred because they’ve been realized and are viewable in the browser. It enables you as the designer to experiment and prototype interactive ideas on the fly. How the tool fits in your process will depend on you and the needs of the project. However, I strongly recommend giving it a shot. It might surprise you.

Other Resources

“Video Tutorials²⁵,” Webflow Help
This free series of videos walks you through the UI and how to build websites in Webflow.
“Forums²⁶” Webflow Community
An active and knowledgeable community of people already use Webflow.

Many thanks to Shawna Jones, Jeffrey Love, Shawn O’Neill and David Belangér for supporting my use and testing of Webflow throughout our projects.

(al, il)

Footnotes

The post Design Responsive Websites In The Browser With Webflow appeared first on Smashing Magazine.

Categories: Others Tags:

29 Great Free Business Card PSD Templates: The Ace up Your Sleeve

August 5th, 2014 admin No comments

When it comes to promoting a business, we have become accustomed to resort to online means such as websites, social media profiles, Google ads and the like. In doing so we extremely underestimate the power that is hidden in print material. Take that profane business card as an example. Of course these days business cards are no longer necessary to convey your contact information. But they still have the potential to set yourself apart from the competition. Start seeing business cards not as small pieces of paper, but more like an ad that is going to beat the drum for you. Focus on the details, the choice of paper, the print technology, the thorough design. We have compiled 29 professionally-crafted and free business card PSD templates in the following article. Let the inspiration begin…

Categories: Others Tags:

Improve Your Email Workflow With Modular Design

August 4th, 2014 admin No comments

Think of your designs as Lego blocks, made up of content & media.

Whether you’re in a Fortune 500 company or part a two-person team launching your first web app, email is one of the most important tools for reaching your customer base. But with the ever-growing number¹ of emails to send², getting them all out the door can seem a little overwhelming. By putting in place a solid email design workflow, you’ll be able to regularly ship engaging and mobile-friendly emails with ease.

Complexity Meets Adaptation

In addition to the increasing number of emails, the need for personalization and high quality and the introduction of responsive design have turned what was once a simple process of writing HTML and CSS in your favorite text editor into something seemingly more complex. A number of customizable templates³, editors⁴, tools⁵ and even full-fledged email frameworks⁶ have popped up to deal with this newfound complexity.

All of these new tools have their advantages, and many can be combined⁷ into a workflow that best fits you and your team. But even with a great set of new tools at your disposal, how do you structure your workflow to allow for continual iteration and quick turnaround?

Enter Modular Design

Modular design is the method of creating a system of self-contained components that can be stacked, rearranged and used or not used, case by case. The goal is to be able to easily change or adapt individual design patterns without altering the system as a whole. Adopting modular design and reusable patterns into your email design workflow can improve the quality and consistency of what you send, while speeding up your daily output.

Setting up a modular email design workflow involves three basic steps:

Create the design system.
Set up a reusable framework.
Test and iterate on what you send.

Let’s look in depth at how we can accomplish each step in the process.

1. Create A Design System

The easiest way to streamline iteration is to break down each of your common design use cases into a system of self-contained components, each one a LEGO block, made up of content and media, that you can snap together into numerous configurations. Doing this will enable you to build a nearly infinite number of emails with ease.

⁸

Think of your designs as LEGO blocks, made up of content and media. (View large version¹¹⁹)

Anticipate Use Cases

When designing your modular email system, the first step is to anticipate your use cases. Ask yourself what type of emails you typically send. Are they mostly transactional? Promotional? Informational? While all emails will likely have the same basic elements, such as a header and footer, a transactional email might need shipment information, ordering details, payment details, a contact section, and product upsells or similar products.

A newsletter might have simpler needs, such as introductory copy, a featured story, a hero image and secondary stories. Defining the content needs of the emails that you send will enable you to anticipate the common use cases that you’ll need to plan for along the way.

Design A Pattern Library

Once you determine common use cases, you can start to design individual components according to your needs. Whether you use Photoshop or jump right into the browser, remember to keep each component as self-contained as possible. Designing several variations of each use case might also be helpful.

Having several options for a “featured story” component, for instance, allows for flexibility and keeps things from getting stagnant over time. The patterns in your library will eventually become partials within your framework, easily referred to and called upon when needed.

¹⁰

Turn your use cases into modular patterns. (View large version¹¹⁹)

Keep Your Pattern Library Up To Date

As new use cases arise, use your existing patterns as necessary. However, unexpected use cases will probably arise; one benefit of the modular system is that you need to design only a single component to address this situation. As you create and add patterns, make sure to keep the entire design system up to date and organized. Leaving components scattered or out of sync will make the system difficult to use. The easiest way to keep everything in sync is to turn your system into a framework.

2. Set Up A Framework

From here, incorporating your design patterns into an out-of-the-box templating system or framework is possible. And if you’re not interested in navigating the chaotic world of Outlook or Gmail, with all of their quirks, or if you need to get something out the door with minimal configuration, then options like Zurb’s Ink³⁰¹² will do a lot of the heavy lifting for you.

But if you send a decent volume of email, then creating your own custom framework could lead to huge gains. By creating your own framework, you can add in time-saving custom helpers, keep the markup light and easy to work with, and even hook directly into your email service provider. Not to mention that you can create more customized layouts to complement all-in-one solutions. The long-term gains in quality and efficiency from setting up your own framework can be huge.

Build on Top of a Static Website Generator

Adding features and tools such as Sass, YAML data and localization to your framework could also be beneficial. The easiest way to do this is by integrating your framework with a static website generator. The building blocks that are common to email and the web will enable you to repurpose almost any website generator for your email workflow.

Middleman¹³ is a great option and one that I’ve found ticks all of the major boxes:

The structure of projects as layouts, partials and pages perfectly fits our mental model of modular email.
Sass¹⁴ is already integrated. Sass is an amazing addition to any responsive email workflow. Common workarounds such as the one for Yahoo Mail’s attribute selector¹⁵ become an afterthought through the clever use of selector inheritance. Sass also provides powerful features such as variables, mixins and CSS minification to cut down on file size.
YAML data and front matter allow you to fully separate content from design and loop through data for easy prototyping.
If you’re sending to a large and diverse audience in multiple languages, then localization can dynamically generate that diverse set of data relatively painlessly.
A myriad of hooks enable us to easily create custom helpers for email platform-specific needs.
Middleman is Ruby-based, making it easily extensible.

Set Up A Boilerplate

Once you’ve chosen a static website generator that meets your needs, then it’s time to set up your base boilerplate. A boilerplate includes such things as a reset file, the CSS or Sass structure, an optional custom grid system and a base template.

Base Layout Template

A basic template will serve as your base layout structure and will allow global elements to be shared across all emails. Preheaders, headers and footers will usually stay consistent across emails. If this is the case with your designs, then you can safely build these into your layout’s template. The safer approach is either to build out and include these elements as partials or, if these elements will likely move or change in particular emails, to wrap the markup in conditional statements.

Your base email template should include at least the following:

DOCTYPE
HTML5 is the friendliest for designing responsive emails. Remember that certain clients will either strip out or change your DOCTYPE.
head
A lot is important to include here: meta tags for proper character encoding, title tags for anyone viewing the standalone version of your email in a browser, reset styles, embedded media query styles, any styles to be inlined and the viewport meta tag to set the viewport’s width.
body
In addition to the standard body tag, wrap your entire email in a 100%-width table and cell structure, as shown below. The table with the body class will act as the body, thereby overcoming the drawback of certain clients removing the body tag.
yield
This is from where all of your modules for individual emails will be pulled.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width">
  <title><%= data.page.title %></title>

  <%= inline_stylesheet 'template/inline' %>
  <%= stylesheet_link_tag 'template/mq' %>
</head>

<body>
  <table class="body">
    <tr>
      <td class="header" >
        [Header content]
      </td>
    </tr>
    <tr>
      <td class="main" >
        <%= yield %>
      </td>
    </tr>
    <tr>
      <td class="footer" >
        [Footer content]
      </td>
    </tr>
  </table>
</body>
</html>

Partials Based on Modules

Keep the markup of your individual design patterns inside of partials, to keep the design system truly modular. This will allow the markup for each module to be self-contained. Taking a modular approach with both your designs and your markup becomes truly powerful. Once it’s built, you should be able to move each design pattern around to different areas of the template without breaking the module, the template or any other modules surrounding it. When you’re setting up the framework, build out each module that you’ve planned for in this way.

Taking the use case from our last example, the modular markup for a featured story would look like this:

<table class="featured-story">
  <tr>
    <td class="col">
      <img src="#" alt="" />
    </td>
    <td class="col">
      <table>
        <tr>
          <td class="title">
            [Story Title]
          </td>
        </tr>
        <tr>
          <td class="abstract">
            [Story Abstract]
          </td>
        </tr>
        <tr>
          <td class="cta">
            <a href="#">CTA</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Sass Structure

Following OOCSS¹⁶ or SMACSS¹⁷ will maintain the modularity of your Sass. In general, keep your styles as modular as possible, just like your designs and markup.

One caveat when writing CSS or Sass in an email framework is that all media query-based styles must begin with an attribute selector (such as td[class=example]{}) in order to avoid rendering issues in Yahoo Mail¹⁸. An easy workaround is Sass’ ability to nest styles. Nesting all media queries in a single attribute-based selector will prevent them from being applied to each individual style. Writing your Sass in this way will increase both readability and speed while maintaining visual consistency across clients.

Following this method, the basic media queries for optimizing the template and content area above for mobile would be this:

td[class=body] {
  @media only screen and (max-width: 600px) {
    .col { 
      display: block; 
      width: 100%; 
    }
    .title { 
      font-size: 22px !important; 
    }
    .abstract { 
      font-size: 16px !important; 
    }
    .cta a { 
      display: block;
      width: 100%;
    }
  }
}

Put It All Together

With a base framework and modular design patterns in place, it’s now time to snap all of the LEGO blocks together. Create a page for each email that you’re building for your framework. This page should be wrapped with your base template and should call any modular patterns that you need.

Thinking in a modular way will enable you to build emails like LEGO blocks. (View large version²⁰)

---
title: Example Email
layout: template
---

<%= partial "featured-story" %>
<%= partial "responsive-image" %>
<%= partial "social-callout" %>

Automate Common Tasks

One of the greatest efficiencies you can gain in your workflow is to automate frequent tasks. This typically means inlining CSS, optimizing images, sending tests, and integrating templates and modules with your email service provider. Most common tasks can be easily integrated with Rake tasks, Ruby Gems and/or Grunt.

CSS Inlining

The safest method is to inline styles whenever possible because certain email clients strip out styles from the head of documents. If you’re used to the common web workflow of writing styles in a separate sheet, then getting used to this will be hard. It can become a hindrance to modularity, and if you’re trying to use Sass to style, then this obviously becomes impossible to do manually.

Luckily, we have several options to automatically inline styles at build time. If you’re using a Ruby-based tempting engine, then the best option is to include the Premailer Gem²¹ in your project. Premailer automatically runs through your style sheet and inlines styles while preserving any existing styles when called. This is a huge time-saver, and it keeps markup manageable.

Testing

There are several ways to test how your email looks. The first stage in my process is to design and check the rendering in Chrome. Once the designs are completed, it’s time to jump into a more automated tool to check rendering across the board. Litmus²² is a web application, like BrowserStack²³ but focused on delivering screenshots of your email across a wide variety of clients.

You can send your emails to Litmus in a variety of ways, but if you’re using Grunt in the framework, then the easiest way is by using Grunt-Litmus²⁴. Grunt-Litmus automates the process of getting tests to your account and lets you check rendering in clients of your choice.

module.exports = {
  test: {
    src: ['email.html'],
    options: {
      clients: ['android22', 'android4'...]
      username: "username",
      password: "password",
      url: "https://yourcompany.litmus.com"            
    }
  }
};

Testing on real devices is another common approach, especially vital with things like CSS animation and embedded video. If you have a device lab set up with a common email address, an easy way to trigger an email delivery directly from your framework is to use the Ruby Mail Gem.

Hook Into Your Email Service Provider

If you’re using an email platform that provides access (such as ExactTarget²⁵ or MailChimp²⁶), then you can set up your project to hook directly into the API and push your template along with individual modules into the system on command. Doing this allows you to build locally in the framework, keeping everything modular and under source control, and still push to your email service provider quickly and easily as you iterate. How you hook into your provider will obviously vary by platform, but definitely keep this in mind when setting up a modular framework.

3. Iterate On Your Designs

The periodical nature of email lends itself well to design iteration. If you’re sending emails daily or weekly, then you have ample room to A/B test your design decisions. No matter what workflow options you adopt, make sure to track important email metrics²⁷ and use available data to improve your core design, remembering that a better experience is usually more important than any single data point.

The periodical nature of email makes for easy testing and iteration. (View large version²⁹)

Don’t reinvent the wheel every time you send an email; rather, make continual incremental changes as warranted by your metrics. The benefits of a modular design workflow should make these incremental changes fairly painless as you swap components in and out. The important thing is not to let your designs stagnate.

Conclusion

Incorporating a modular approach and a custom framework into your email workflow can lead to increased productivity and make it easier for you to iterate on your designs. You will have to make an initial investment of time to get everything up and running, but if you send a decent volume of email and can afford the initial investment, then the result will improve your designs, the customer experience and your engagement rates, leading to happier customers and increased revenue.

Links

Ink³⁰¹², Zurb
A framework for rapid development of responsive emails.
“A Workflow for Responsive Emails Using Ink and Grunt³¹,” Victor Garcia, Medium
Middleman Email Template³², DEG
A Middleman project template customized for building emails.
Middleman 3.0.x Project Template: HTML Email Boilerplate HAML³³, Danny Prose
A Middleman template for HTML Email Boilerplate³⁴, converted to HAML.

(al, , il, ml)

Footnotes

The post Improve Your Email Workflow With Modular Design appeared first on Smashing Magazine.

Categories: Others Tags:

July 2014: 20 Fresh and Free WordPress Themes of the Month

August 4th, 2014 admin No comments

We are back with our third month in a row, where all the new entries to the WordPress theme stage are being designed responsive. New ranking factors at Google take mobile usability into account, so building websites that are not mobile-ready today is shortsighted , to say the least. Don’t get caught that easy. Use one of our new entries instead. For another month we went out into the wild to search for the newest and coolest WordPress themes available. In the following article, we introduce you to our findings.

Categories: Others Tags:

Why Having a Blog is so Important for Freelance Designers

August 1st, 2014 admin No comments

With competition rising among designers, using social media is more important than ever, especially having your own blog to help spotlight your talent and abilities. A blog can not only show your work but your thought process, knowledge and professional demeanor… if it’s done correctly!

Categories: Others Tags:

Build A Blog With Jekyll And GitHub Pages

August 1st, 2014 admin No comments

I recently migrated my blog from WordPress to Jekyll, a fantastic website generator that’s designed for building minimal, static blogs to be hosted on GitHub Pages. The simplicity of Jekyll’s theming layer and writing workflow is fantastic; however, setting up my website took a lot longer than expected.

In this article we’ll walk through the following:

the quickest way to set up a Jekyll powered blog;
how to avoid common problems with using Jekyll;
how to import your content from WordPress, use your own domain name, and blog in your favorite editor;
how to theme in Jekyll, with Liquid templating examples;
a couple of Jekyll 2.0’s new features, including Sass and CoffeeScript support and collections.

Jekyll’s Simple Purpose

Tom Preston-Werner created Jekyll to enable people to blog using a simple static HTML website, with all of the content hosted and version-controlled on GitHub. The goal was to eliminate the complexity of other blogging platforms by creating a workflow that allows you to blog like a hacker¹.

Jekyll’s Octocat mascot. (Image credit: GitHub²)

Jekyll takes your content written in Markdown, passes it through your templates and spits it out as a complete static website, ready to be served. GitHub Pages conveniently serves the website directly from your GitHub repository so that you don’t have to deal with any hosting.

Here are some websites that were created with Jekyll:

Barry Clark’s blog³ (that’s me)
Zach Holman’s blog⁴
CSS Wizardry⁵
Jekyll⁶
HealthCare.gov⁷‘s landing page and content subpages
Development Seed⁸

The Advantages of Going Static

Simplicity
Jekyll strips everything down to the bare minimum, eliminating a lot of complexity:
- No database
  Unlike WordPress and other content management systems (CMS), Jekyll doesn’t have a database. All posts and pages are converted to static HTML prior to publication. This is great for loading speed because no database calls are made when a page is loaded.
- No CMS
  Simply write all of your content in Markdown, and Jekyll will run it through templates to generate your static website. GitHub can serve as a CMS if needed because you can edit content on it.
- Fast
  Jekyll is fast because, being stripped down and without a database, you’re just serving up static pages. My base theme, Jekyll Now⁵¹²⁵¹⁵⁹, makes only three HTTP requests — including the profile picture and social icons!
- Minimal
  Your Jekyll website will include absolutely no functionality or features that you aren’t using.
Design control
Spend less time wrestling with complex templates written by other people, and more time creating your own theme or customizing an uncomplicated base theme.
Security
The vast majority of vulnerabilities that affect platforms like WordPress don’t exist because Jekyll has no CMS, database or PHP. So, you don’t have to spend as much time installing security updates.
Convenient hosting
Convenient if you already use GitHub, that is. GitHub Pages will build and host your Jekyll website at no charge, while simultaneously handling version control.

Let’s Try It Out

There are multiple ways to get started with Jekyll, each with its own variations. Here are a few options:

Install Jekyll locally via the command line, create a new boilerplate website using jekyll new, build it locally with jekyll build, and then serve it. (The Jekyll website¹⁰ shows this workflow.)
Clone a starting point to your local machine, install Jekyll locally via the command line, make updates to your website, build it locally, and then serve it.
Fork a starting point, make changes, and then serve it.

We’ll get started with the quickest and easiest option: forking a starting point. This will get us up and running in a few minutes, and we won’t have to install any dependancies. Here’s what we’re going to do directly on GitHub.com in the browser:

Create our Jekyll powered website.
Host it for free on GitHub Pages.
Customize it to include our name, avatar and social links.
Publish our first blog post!

1. Fork A Starting Point

We’ll start by forking a repository that has followed best practices and the workflows that we’ll be covering in this article. This will get us on the right track and save a lot of time.

I have prepared a repository for us already. Head to Jekyll Now¹¹, and hit the “Fork” button in the top-right corner of the repository to fork a copy of the blog theme to your GitHub account.

¹²

Walkthrough of steps 1 and 2. (View large version¹³)

Starting with a fork is great because it will give you a feel for what Jekyll is like before you have to set up a local development environment, install dependencies and figure out Jekyll’s build process.

Common problem #1: Creating a Jekyll website through the local command line can be frustrating and time-consuming because you have to install and configure dependencies like Ruby and RubyGems. Let GitHub Pages build the website for you, until you have a real need to build it locally.

2. Host On Your GitHub Account

As a GitHub user, you’re entitled to one free “user” website (as opposed to a “project” website), which will live at http://yourusername.github.io. This space is ideal for hosting a Jekyll blog!

The best part is that you can simply place your unbuilt Jekyll blog on the master branch of your user repository, and GitHub Pages will build the static website and serve it for you. You don’t have to worry about the build process at all — it’s all taken care of.

Click the “Settings” button in your new forked repository (in the menu on the right), and change the repository’s name to yourusername.github.io, replacing yourusername with your GitHub user name.

Your website will probably go live immediately. You can check by going to http://yourusername.github.io. Don’t worry if it isn’t live yet: Step 3 will force it to be built.

The base theme of your blog will look like this after being forked. (Image: Jekyll Now⁵¹²⁵¹⁵⁹) (View large version¹⁶)

Whew! We’re moving fast here. We already have a Jekyll website up and running! Let’s step back for a second and look at some of the most common issues to be aware of when hosting a Jekyll website on GitHub Pages.

Common problem #2: Be aware of the difference between user websites and project websites¹⁷ on GitHub. With a user website (which we’re setting up), you don’t need to do any branching. The master branch is already configured to run anything placed on it through Jekyll. You don’t need to set up a gh-pages branch.

Common problem #3: Using a project website for your Jekyll website introduces some complexity¹⁸ because your website will be published to a subdirectory. The URL will look like http://yourname.github.io/repository-name, which will cause problems in Jekyll templates, such as breaking references to images and not letting you preview the website locally.

Common problem #4: Jekyll has a lot of plugins¹⁹, but GitHub Pages supports only a few of them²⁰. If you try to include a plugin that isn’t supported, then Jekyll will fail while building your website. So, stick to the supported list. Luckily, my favorite plugin is on the list: Jemoji²¹ lets you include emoji in blog posts, just like you would on GitHub and Basecamp.

3. Customize Your Website

You can now change your website’s name, description, avatar and other options by editing the _config.yml file. These custom variables have been set up for convenience and are pulled into your theme when your website gets built.

Making a change to _config.yml (or any file in your repository) will force GitHub Pages to rebuild your website with Jekyll. The rebuilt website will be viewable a few seconds later at http://yourusername.github.io. If your website wasn’t live immediately after step 2, it will be after this step.

Go ahead and customize your website by updating the variables in your _config.yml file and then committing the changes.

You can change your blog’s files from here on in one of three ways. Pick whichever suits you best:

Edit files in your new username.github.io repository directly in the browser at GitHub.com (as shown below).
Use a third-party GitHub content editor, such as Prose²² by Development Seed. It’s optimized for Jekyll, which makes it easy to edit Markdown, write drafts and upload images.
Clone your repository and make updates locally, and then push them to your GitHub repository (Atlassian has a guide²³ on this).

Editing your website's _config.yml on GitHub.com — Editing your website’s `_config.yml` on GitHub.com. (Image credit: Jekyll Now⁵¹²⁵¹⁵⁹) (View large version²⁶)

Common problem #5: Don’t assume that you need to jekyll build the website locally in order to customize and theme a Jekyll website. GitHub Pages does that for you. You just need to place the files that you want to be built in the master branch of your user repository or in the gh-pages branch of any other repository, and then GitHub Pages will process it with Jekyll.

4. Publish Your First Blog Post

Your website is now customized, live and looking good. You just have to publish your first blog post:

Edit /_posts/2014-3-3-Hello-World.md, deleting the placeholder content and entering your own. If you need a quick primer on writing in Markdown, check out Adam Pritchard’s cheat sheet²⁷.
Change the file name to include today’s date and the title of your post. Jekyll requires posts to be named year-month-day-title.md.
Update the title at the top of the Markdown file. Those variables at the top of the blog post are called front matter, which we’ll dig into a little later. In this case, they specify which layout to use and the title of the blog post. Additional front-matter variables²⁸ exist, such as permalink, tags and category.

If you’d like to create new blog posts in the browser on GitHub.com, simply hit the “+” icon in /_posts/. Just remember to format the file name correctly and to include the front-matter block so that the file gets processed by Jekyll.

Creating a new post on GitHub.com. (View large version³⁰)

Common problem #6: One concern I had about using Jekyll for my blog was that it has no CMS, so I wouldn’t have the convenience of being able to make quick edits by logging into a CMS interface when I’m away from my laptop. It turns out that your Jekyll blog will have a CMS if you use GitHub Pages, because GitHub itself serves as the CMS. You can edit posts in the browser, even on your phone if you wish. It might not be as convenient as other CMS’, but you won’t be stuck when you’re away from your computer and need to make a change.

Optional Steps

Use Your Own Domain

Configuring your domain name to point to GitHub Pages is a simple two-step process:

Go to the root of your blog’s repository, and edit the CNAME file to include your domain name (for example, www.yourdomainname.com).
Go to your domain name registrar, and add a CNAME DNS record pointing your domain to GitHub Pages:
- type: CNAME
- host: www.yourdomainname.com
- answer: yourusername.github.io
- TTL: 300

Then, refresh What’s My DNS³¹ like crazy until you’ve propagated. If you run into any problems, refer to “Setting Up a Custom Domain With GitHub Pages³².”

Import Your Blog Posts From WordPress

Before importing, you’ll need to export your data from WordPress, possibly massaging the data a little (for example, by updating the image references), and then import it into your new Jekyll website. Fortunately, a few great tools can help.

To export from WordPress, I’d highly recommend Ben Balter’s one-click WordPress to Jekyll Exporter³³ plugin. It exports all of your WordPress content as a ZIP file, including posts, images and meta data, converting it to Jekyll’s format where needed. Good on you, Ben.

The other option is to export all content in the “Tools” menu of the WordPress dashboard, and then importing it with Jekyll’s importer³⁴.

Next, we need to update our image references. Ben Balter’s plugin will export all of your images into a folder. Then, you’ll need to copy them to wherever you’re hosting your images on your Jekyll blog. This could be in an /images folder or on a content delivery network.

Then, you have the fun task of updating all of the links to these images across your WordPress content. Because I was only updating five or six posts, a quick find-and-replace worked well, but if you have a lot of content, then it might be worth writing a script or checking out scripts that others have written, such as Paul Stamatiou’s³⁵.

Finally, we have to import comments. Being a platform for static websites, Jekyll doesn’t support comments. However, a hosted solution like Disqus works really well! I’d recommend importing your WordPress comments to Disqus³⁶. Then, if you’re using Jekyll Now, you can enter your Disqus user name in _config.yml and you’re set.

Blog Locally in Your Favorite Editor

If you prefer to write in Sublime, Vim, Atom or another editor, all you need to do is clone to your repository, create new Markdown blog posts in the _posts folder, and then push the changes to GitHub. GitHub Pages will automatically rebuild your website as soon as your Markdown file hits the repository, and your new blog post will be live as soon as the build is complete.

First, git clone git@github.com:yourusername/yourusername.github.io.git, or clone your repository using GitHub Mac³⁷.
Create a new post in the _posts folder. Remember to name it in the format year-month-day-title.md, and include the front matter at the top of the post.
Commit the post’s Markdown file, and push to your GitHub repository. (Atlassian’s guide to Git’s basics³⁸ might come in handy.)
That’s it! Just wait for GitHub Pages to rebuild your website. This typically takes under 10 seconds, assuming you don’t have a huge amount of content.

Common problem #7: Again, you don’t need to build your Jekyll website locally in order to write a blog post locally and publish it to your website. You can write the Markdown post locally and push it with any images you’ve used, and then GitHub Pages will rebuild the website for you on the server.

Theming In Jekyll

Want to customize your theme? Here are some things you should know.

Building Your Website Locally

If your theme development is more substantial, then building and testing your Jekyll website locally could be convenient. This step isn’t required for theme development. You could just push the theme changes to your repository, and GitHub Pages will do the build for you. However, having Jekyll watch for theme changes locally and preview the website for you would be helpful if you’re creating a custom theme.

First, you’ll need to install Jekyll and its dependencies. Run gem install jekyll, then gem install jemoji jekyll-sitemap. (You’ll need to have Ruby³⁹, RubyGems⁴⁰ and Kramdown⁴¹ installed. Jekyll has a full list of dependencies⁴².)

Here is the workflow for building and viewing your Jekyll website locally:

First, cd into the folder where your Jekyll website is stored.
Then, jekyll serve --watch. (Jekyll explains more build options⁴³.)
View your website at http://0.0.0.0:4000.
When you’re done, commit the changes and push everything to the master branch of your GitHub user website. GitHub Pages will then rebuild and serve the website.

Common problem #8: Keep in mind that jekyll build will wipe everything in /_sites/. The first step of jekyll build is to delete everything in /_sites/ and then build it all again from scratch. So, you can’t store any files in there and expect them to stick around. Everything that goes into /_sites/ should be generated by Jekyll.

Directory Structure

Here’s a snapshot of my Jekyll website’s directory structure:

/Users/barryclark/Code/jekyll-now
├─ CNAME # Contains your custom domain name (optional)
├─ _config.yml # Jekyll's configuration flags
├─ _includes # Snippets of code that can be used throughout your templates
│  ├─ analytics.html
│  └─ disqus.html
├─ _layouts 
│  ├─ default.html # The main template. Includes <head>, <navigation>, <footer>, etc
│  ├─ page.html # Static page layout
│  └─ post.html # Blog post layout
├─ _posts # All posts go in this directory!
│  └─ 2014-3-3-Hello-World.md
├─ _site # After Jekyll builds the website, it puts the static HTML output here. This is what's served!
│  ├─ CNAME
│  ├─ LICENSE
│  ├─ about.html
│  ├─ feed.xml
│  ├─ index.html
│  ├─ sitemap.xml
│  └─ style.css
├─ about.md # A static "About" page that I created.
├─ feed.xml # Powers the RSS feed
├─ images # All of my images are stored here.
│  ├── first-post.jpg
├─ index.html # Home page layout
├─ scss # The Sass style sheets for my website
│  ├─ _highlights.scss
│  ├─ _reset.scss
│  ├─ _variables.scss
│  └─ style.scss
└── sitemap.xml # Site map for the website

Liquid Templating

Jekyll uses the Liquid templating language to process templates. There are two important things to know about using Liquid.

First, a YAML front-matter block is at the beginning of every content file. It specifies the layout of the page and other variables, like title, date and tags. It may include custom page variables that you’ve created, too.

Liquid template tags are used to execute loops and conditional statements and to output content.

For example, each blog post uses the following layout from /_layouts/post.html:

---
layout: default
---

<article class="post">

  <h1>{{ page.title }}</h1>

  <div class="entry">
    {{ content }}
  </div>

  <div class="date">
    Written on {{ page.date | date: "%B %e, %Y" }}
  </div>

  <div class="comments">
    {% include disqus.html disqus_identifier=page.disqus_identifier %}
  </div>
</article>

At the top of the file, YAML front matter is surrounded by triple hyphens. Here, we’re specifying that this file should be processed as the content for the default.html layout, which contains the website’s header and footer.

Liquid markup uses double curly braces to output content. The first Liquid template tags that do this in the example above are {{ page.title }} and {{ content }}, which output the title and content of the blog post. A number of Jekyll variables⁴⁴ are made available for outputting in templates.

Single curly braces and modules are used for conditionals and loops and for displaying includes. Here, I’m including a Disqus commenting partial at the bottom of the blog post, which will display the markup from /_includes/disqus.html.

_config.yml

This is Jekyll’s configuration file, containing all of the settings for your Jekyll website⁴⁵. The great thing about _config.yml is that you can also specify all of your own variables here to be pulled in via template files across the website.

For example, I use custom variables in Jekyll Now’s _config.yml to allow SVG icons to be easily included in the footer:

Here is _config.yml:

# Includes an icon in the footer for each user name you enter
footer-links:
  github: barryclark
  twitter: baznyc

And here is /_layouts/default.html:

<footer class="footer">
  {% if site.footer-links.github %}<a href="http://github.com/{{ site.footer-links.github }}">{% include svg-icons/github.html %}</a>{% endif %}
  {% if site.footer-links.twitter %}<a href="http://twitter.com/{{ site.footer-links.twitter }}">{% include svg-icons/twitter.html %}</a>{% endif %}
</footer>

The variable is outputted to the Twitter URL like this: http://twitter.com/{{ site.footer-links.twitter }}, so that the footer icon links to your Twitter profile. One other thing I really like about variables is that you can use them to optionally add pieces of UI. So, a footer icon wouldn’t be displayed if you don’t enter anything in the variable.

Common problem #9: Note that _config.yml changes are loaded at compile time, not runtime. This means that if you’re running jekyll serve locally and you edit _config.yml, then changes to it won’t be detected. You’ll need to kill and rerun jekyll serve.

Layouts and Static Pages

Most simple blog websites need only two layout files: one for blog posts (post.html) and one for static pages (page.html). The only real difference between these in Jekyll Now is that post.html includes the Disqus comments block and a date, and page.html doesn’t.

If you create a file with an .html or .md extension in the root of your Jekyll website, it will be treated as a static page. For example, about.md would be outputted as www.mysite.com/about. Nice and easy!

Images

I store my images in an /images/ folder in the repository and haven’t had any performance problems yet. If your website is hosted on GitHub Pages, then the images will be served up by GitHub’s super-fast content delivery network. I haven’t found the need to store them elsewhere yet, but if I wanted to migrate my images to somewhere like CloudFront, then just pointing all of my image links to a folder on that server would be easy enough.

I like the simplicity of saving an image to the /images/ folder and then linking to it in the content. The Markdown to include an image in content is simple:

![Image description](/images/my-image.jpg)

Preprocessor Support

Jekyll now supports Sass and CoffeeScript without any need for plugins or Grunt files. You can include your .sass, .scss and .coffee files anywhere in your website’s directory, and Jekyll will process it, outputting a .css file in that same directory.

It's Sass time! — It’s Sass time! (Image credit: Sass⁴⁶)

To ensure that your .sass, .scss and .coffee files get processed, start the file with two lines of triple hyphens, like this:

---
---
$color-coffee: #644C37;

If you’re using @imports to break out your Sass into partials, then you’ll need to let Jekyll know that by including the following flag in your _config.yml file.

sass:
  sass_dir: _scss

You can specify the outputted style here, too:

sass:
  sass_dir: _scss
  style: :compressed

Advanced Jekyll Features

Jekyll has a couple of powerful, more advanced features that might help you if you’re looking to scale up your website from a simple blog.

Data Files

There are two ways to integrate external data with a Jekyll website. The first is by using third-party services and APIs. For example, Disqus allows you to embed dynamic content on your static website via its external service.

The second way is by using data files. Jekyll is able to read YAML and JSON data files⁴⁷ from the /_data/ folder, allowing you to use them in your templates just like other variables. This is really useful for storing repetitive or website-specific data that you wouldn’t want bulking up _config.yml.

Data files also make it possible to include large data sets in your Jekyll website. You could write a script to break down a big data set into JSON files and place them in your Jekyll website’s /_data/ folder. A creative example of this is serving Google Analytics data to Jekyll⁴⁸ in order to rank blog posts by popularity.

Collections

The two standard document types in Jekyll are posts (for blog content) and pages (for static pages). The launch of Jekyll 2.0 brought collections⁴⁹, which allow you to define your own document types. For example, you could use a collection to define a photo album, book or portfolio.

Conclusion

Jekyll isn’t for every project. The biggest disadvantage of a static website generator is that incorporating dynamic server-side functionality becomes difficult. The number of services to integrate, like Disqus, is growing, but not all offer much flexibility or control. Jekyll isn’t suited to building user-based websites because there is no database or server-side logic to handle user registration or logging in.

Jekyll’s strength is its simplicity and minimalism, giving you just what you need to create a content-focused website that doesn’t need much dynamic user interaction — and no more. This makes it perfect for your blog and portfolio and also worth considering for a simple client website.

Don’t let Jekyll’s reputation as a blogging platform for hackers dissuade you. Building a beautiful, fast, minimal website in Jekyll doesn’t require elite hacker skills or knowledge of the command line. As shown in the walkthrough, you can get set up in a matter of minutes, giving you more time to spend on your content and design.

Further Resources

Jekyll⁵⁰
The official website is the best resource for theming Jekyll and creating a website. A lot of the information in this article was drawn from it.
Jekyll Now⁵¹²⁵¹⁵⁹
This starting point makes it easier to create a Jekyll blog by eliminating a lot of the up-front setting up.
Jekyll source code⁵²
The Jekyll repository shares the source code and discussions about Jekyll.

(al, ml)

Footnotes

The post Build A Blog With Jekyll And GitHub Pages appeared first on Smashing Magazine.

Categories: Others Tags:

Archive

Tutorials

Brushed Metal Effect in Adobe Fireworks Tutorial

How to achieve pixel perfection with Adobe Fireworks Tutorial

Creating Brushed Metal in Adobe Fireworks Video Tutorial

Designing the Rainboxx Logo Video Tutorial

Pasting Attributes in Adobe Fireworks Video Tutorial

Brushed Metal iCloud Logo Tutorial

Working with Masks in Fireworks Video Tutorial

Realistic 3D simulation with reflection in Fireworks Tutorial

8 Essential Fireworks Tips For Web Design Tutorial

Easy Odometer Icon Tutorial

Refining Your Design In Adobe Fireworks Tutorial

Fireworks: The Things You Might Have Missed Tutorial

Index and Alpha Transparency in Fireworks Tutorial

FireworksGuruForum Community

Adobe Fireworks Tutorials by Craig Erskine

Articles

The Endless Fireworks vs. Photoshop Battle Article

The Power of Adobe Fireworks Article

50 Reasons not to use Photoshop for Web Design Article

Adobe Fireworks, a Super Hero that is Hard to Kill Article

10 Reasons why I prefer Fireworks to Photoshop for Web Design Article

7 Reasons Why I Choose Fireworks Over Photoshop Article

Fireworks PNG Files, Templates, Style Presets & Resource Libraries

Dragnet Wireframes Kit for Adobe Fireworks

Fireworks PNG Weeks Series

Dribbble Records Fireworks PNG

Dark UI Kit Templates

Simple User Interface Kit Templates

Hipster Photo Styles for Fireworks

Webportio Library of Fireworks Resources

Fireworks Library by Aaron Beall

FireworksLab Library of Resources

Conclusion

Where to go from here?

Is Fireworks still relevant?

Alternatives to Fireworks?

Footnotes

What Is A Persona?

What Does A Persona Look Like?

Where Does The Concept Of Personas Come From?

How Do Personas Fit In The Design Process?

Components of Goal-Directed Design That Support Personas

How Are Personas Created?

What Are Persons Used For?

Are Personas Effective?

How And Why Do Persons Work?

Do I Really Need To Use Personas?

Conclusion

Additional Resources

Presentations and Posters

Books

Goal-Directed Design

Defining Personas

How and Why Personas Work

Effectiveness of Personas

Footnotes

Getting Started

Toolbar Overview

Regarding Web Fonts

Designing In The Browser

Fixing Breakpoints In Webflow’s Responsive Views

Exporting The Code

Conclusion: A New Tool For Designers

Other Resources

Footnotes

Complexity Meets Adaptation

Enter Modular Design

1. Create A Design System

Anticipate Use Cases

Design A Pattern Library

Keep Your Pattern Library Up To Date

2. Set Up A Framework

Build on Top of a Static Website Generator

Set Up A Boilerplate

Put It All Together

Automate Common Tasks

3. Iterate On Your Designs

Conclusion