Waves of change are currently rippling through every aspect of the Web. The iPad and other mobile devices are changing the way we access the Internet, while HTML5 and CSS3 promise to change the way we develop it. However, another storm is brewing that threatens Photoshop’s throne as the application of choice for Web design. The battle suggests a fundamental shift in the design process from Photoshop to mark-up.
A militia of designers have assembled to launch this coup. Their propaganda is convincing, and their proposed successor is worthy, capable and sexy. Their cause is important, but their manifesto is flawed.
[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]
The Argument
The argument against Photoshop focuses on the effect of the final product. Photoshop can be used to create impeccable designs, but after hours of hard work, you end up with a static mock-up that is incapable of emulating the experience one gets when the design is converted to mark-up and viewed in the browser. HTML and CSS mock-ups require no explanation. They present the final product in the final environment. They also take full advantage of browser capabilities, such as fluid layouts, progressive enhancement and animation. These are things that Photoshop simply can’t do.
If we compare the two methodologies even closer, we find a number of other disadvantages to the Photoshop approach. For example, Photoshop’s text rendering is nothing compared that of modern Web browsers. CSS classes also make the process of updating similar elements easier than hunting down all instances within a Photoshop document. Even making certain structural changes to a website can be done more easily with CSS. Finally, I can’t overlook Photoshop’s propensity to crash, especially when opening the “Save for Web” dialog.
I admit: the benefits of mark-up are undeniable, and Photoshop doesn’t…
For too many projects, there comes a time when every action taken, every decision and sacrifice made, is spurred on by pressure to finish. Tempers seem to shrink along with the available days, talk about “high standards” gives way to “good enough,” and people realize that deadlines are aptly named. During the last-minute crunch, someone may well wonder, how did it come to this? Could it have been prevented? Every Web project has deadlines. But not every designer or developer deals with them the same way.
[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]
What Causes A Deadline To Break?
Because a deadline marks the end of a project, everyone involved in the project must understand the deadline’s role. Most projects follow a schedule or have an estimated date by which they must be completed. The concept is simple then: when the work takes longer than expected, deadlines get missed.
A deadline is the end point of a time estimate, making it a known quantity. But how long will the work actually take to get done?
Of course, projects can be more complicated in their details. Unexpected technical problems and unanticipated changes will affect the amount of work required. Sometimes other tasks take priority. Sometimes the time estimate wasn’t considered carefully enough.
Whatever the cause, too much work needs to be done in the available time. That’s the problem, but not the challenge.
Rate Deadlines By Severity Of Consequences
The hardest deadlines are tied to events that cannot be moved, such as a date promised to the public, an upcoming trade show or a date stipulated in a contract. Retailers know that their holiday sales must end at Christmas, and theater owners can…
Mastering Photoshop for Web Design is the third book in our eBook series, and it’s definitely the best eBook we’ve published so far. It was written from scratch by our regular writer Thomas Giannattasio, exclusively for Smashing Magazine and its readers. We are very proud of the result, in particular because of the high quality of tips, ideas and techniques that Thomas — who is a deep expert in Adobe Photoshop — presents in his book.
Mastering Photoshop is written for advanced and intermediate designers who want to brush up on their workflow and improve their Photoshop skills. The eBook contains 178 pages, explaining fundamental techniques that Web designers need to know to produce high-quality work in Photoshop. You won’t find any generic step-by-step tutorials or learn random effects. You will gain a profound understanding of what you can do with Photoshop and how to use it effectively in your work.
All chapters have undergone a careful technical review by well-known designer, illustrator and speaker Elliot Jay Stocks. The book was proofread by our regular proofreader Andrew Lobo, and it has an attractive layout. The PDF can be printed and read on all devices.
The Author
Thomas Giannattasio is an interactive designer who resides in the Washington DC metro area. He specializes in Web design and front-end development, particularly art direction, website design and application design, and has 14 years of experience. Thomas cares strongly about typography, simplicity and user experience. He works as a senior designer for a global marketing firm and freelances under the name attasi.
Thomas’ articles on Smashing Magazine prove his expertise…
An effective, well-organized workflow is an important asset of professional web designers. The more useful and time-saving your tools are, the more time you can focus on important things, thus creating a foundation for timely good-quality results. The problem is that there are just way too many tools, services and resources out there, so it has become difficult to keep track on them and find those tiny little time-savers that will spare you headaches and save time in a long run.
And this is where we come in. Back in old days, Smashing Magazine used to publish lists after lists, with plethora of links that covered different topics all somehow related to web design and development. We have undergone quite a development since then, and are now publishing almost only in-depth articles — written by some of the best professionals in the industry. However, useful, carefully prepared and filtered lists are still useful, and therefore we keep publishing them as well.
Below you’ll find 50 useful tools and time-savers for web designers and developers. Among other things, you will find recently released tools, useful reference sheets, articles and further resources. Such posts are prepared over months, each containing resources found, reviewed or bookmarked by the Smashing Editorial Team. We hope that at least some of them will help you improve your workflow!
You may be interested in the following related posts:
Camera is a remarkable piece of innovation. However, it is people — professionals and newbies alike — who make it truly remarkable. It’s the photographer behind the camera. It’s his imagination, passion and talent and knowledge of the medium. You don’t need a high-end costly equipment to get beautiful results. Just your talent and a way of looking at things differently is together more than enough for a great shot. It’s also the ability to envision the final result in your mind which is also important.
A pinhole camera is a simple camera without a lens and with a single small aperture — effectively a light-proof box with a small hole in one side. Light from a scene passes through this single point and projects an inverted image on the opposite side of the box. You can easily construct this camera by yourself using things lying around like match boxes or any kind of boxes, paper, duct tape etc. The small amount of light passing through this pin sized hole produces image on a photographic film or a CCD sensor.
If you don’t want to get your hands dirty on creating a pin hole camera by yourself, you can use your DSLR with some modifications (replacing camera lenses with a pinhole). Also, pinhole cameras are available in the market: and they are quite popular, too — after all, you don’t have to worry about the focus and distortions as there are no lenses involved. Also, you might end up with lovely motion blurred photographs.
In today’s weekend post we present beautiful and inspiring photographs created using a pinhole camera. Please notice how photographers use the camera creatively to produce quite remarkable images. At the bottom of this post you will find links to some photographers and references to related resources that will help you get you started. Also, we listed related Flickr pools which contain thousands…
Let me start by saying that I am not a developer. Sure, I can write some pretty solid HTML and CSS, but beyond that I defer to our great team of developers. So when I first heard about Sass, the right side of my brain freaked out. While the idea of Syntactially Awesome Stylesheets sounds pretty cool, I was afraid that Sass was going to make writing CSS more like programming Ruby, PHP, or Javascript. If you've been scared away from using Sass for the same reason, I'm here to tell you that nothing could be farther from the truth. Sass actually gives us some really powerful ways of writing CSS more efficiently.
If you're looking for a tutorial on getting started with Sass, this isn't it. You can find everything that you need to get rolling on the official Sass tutorial. This post is also less technical and more about my experience, some lessons learned, and a few tips from an actual project. I'll be referring exclusively to Sass 3, the latest syntax that is also known as SCSS. This new syntax uses semicolons and brackets to specify blocks of code, so any standard CSS file is already a valid Sass file. (You're feeling better already, aren't you?)
It's important to note that Sass isn't going to be the best fit for every project by default. Sites with a lot of pages or application-based sites tend to be well suited for using it. These types of sites generally allow you to take full advantage of the efficiencies that are provided, like variables and mixins. It would be unnecessary overkill to set up Sass for smaller sites with fewer pages or less-common elements.
Now let's get on with the details, starting with some tips and techniques that I found to be helpful.
Use Variables and Mixins ... a Lot
One of my major complaints with CSS has been that I can't create variables for the common properties that are used heavily. Sass variables work just as you would expect. They are particularly helpful for defining properties like colors, font families, and common widths and heights that are broadly used throughout your CSS. You can enhance their power by using operations.
As much as I love the variables feature, Sass really grabbed my attention with mixins. Mixins are even more powerful than variables, allowing you to reuse entire chunks…
With another Design Share event in the can we thought we'd share a taste of the evening's amazing talks for those who couldn't make it. Our format mostly stayed the same featuring 4 short-format talks (roughly 10 minutes each) ending in a panel-style round-up with all the speakers at the end. This time around we saw and heard about how design can lead the charge for grassroots campaigns, how design wishes can become scary (but awesome) realities, what it's like to start designing for the iPad and similar devices, and how to rise above negative feedback to extend a rebranding effort.
When I came into web design fresh off the print world, I wanted to make innovative and crazy looking websites that broke a lot of rules to create unique experiences for users. However, I forgot all about the importance of user-friendly navigation, functionality, usability, and practicality. On a daily basis, I am constantly faced with the dilemma of designing for the web and print media. It's an ongoing challenge for a noob like me to bring creative concepts and aesthetics from both worlds together in harmony.
From a transitioning designer's point of view, I've noticed that a lot of web designers are constraining themselves by sticking with the same old and boring web templates that look reminiscent of their competitors. Web designers are starting to lose the traditional aspects and foundational elements of design that makes a design visually engaging. This includes strong hierarchy of information, great typography, a solid grid system, color theory, and captivating artwork.
We need to bring back innovation and pioneer new techniques to break the aesthetic norm in web design while still maintaining user-friendly usability. If you don't want your website to be another can in the assembly line, then perhaps you should look at some print-inspired websites that retain a lot of traditional design for inspiration.
Now here are some of the advantages and disadvantages of taking the traditional design concepts and print design to the web.
ADVANTAGES
Poster-like websites have the ability to entertain and grab the user's attention with engaging visuals that are lacking in a lot of contemporary websites. Adding a print-like vibe to a website can make it visually stand out from the crowd.
A designer can create a unique and personal experience for the viewer by retaining the storytelling aspect of design that has a beginning and end.
The design and layout in blogazines are more tailored to the specific content in each article. Allowing the content to dictate the design of a page will aesthetically refine the author's message in an interesting way. Presenting the content…
Last week, the W3C released an updated version of its HTML5 differences from HTML4 document. This is the second iteration of the text this year and the seventh overall since first being drafted in January, 2008.
The document is a tremendous resource to front-end web developers as it outlines only those items relevant to authors. If you've ever tried to parse a W3C spec (and lived to tell about it), then you know they are geared toward browser makers and not run-of-the-mill web developers (The Rest of Us™).
I just finished reading over the latest version of the "differences" document and thought it'd be helpful to jot down some thoughts on things I hadn't seen before when reading up on HTML5. For brevity's sake, we'll just cover the changes to markup. There's a truckload of new APIs that I'm hoping to cover in the near-ish future.
Let's get this party started with a "new" element.
I'll be honest and admit I'm a little confused as to how this differs from the object element. It's also pretty late as I'm writing this, so that could have something to do with it. Enlighten me, dear readers.
New Attributes
The a and area elements have a new attribute called ping that specifies a space-separated list of URLs which have to be pinged when the hyperlink is followed. Currently user tracking is mostly done through redirects. This attribute allows the user agent to inform users which URLs are going to be pinged as well as giving privacy-conscious users a way to turn it off.
This is a pretty cool addition as it bakes into the browser behavior that is already in widespread use. "Paving the cowpath," as Mr. Keith would say. The side benefit here is that it gives the end user power over their own privacy (at least as it pertains to click tracking).
The new form attribute for input, output, select, textarea, button and fieldset elements allows for controls to be associated with a form. I.e. these elements can now be placed anywhere on a page, not just as descendants of the form element.
If you’ve ever been in a situation where you need to make modifications to a page or a site’s HTML, CSS or JavaScript but don’t have direct access to the source code, it can be pretty frustrating. Whether you're working on client’s live site or if you’re helping someone remotely, you have to somehow make the contents of the site editable locally.
There are tons of tools out there to automate the process of crawling a site and downloading all the necessary files. There are Unix command line tools like wget that have plenty of tutorials for downloading websites, and graphical interfaces like Net Vampire for Windows and SiteSucker for Mac OS X. But if you want a faster method with fewer files to download, the HTML spec has you covered.
The base tag is a really simple way to set a default URL (or default target) for every relative path on a page. This includes links to stylesheets, sources of script tags and even relative hrefs in anchors. Just save out the raw HTML from your favorite browser, open up the saved document in a code or text editor and place the base tag in the head element with its href attribute pointed toward the fully qualified URL of the live site:
Now you can open that very document in a browser and it should appear exactly as if it were running from the site itself. From our example above, every relative path will use viget.com as its base path, so the stylesheet we linked to will actually be located at “viget.com/css/master.css” (which doesn’t exist, by the way).
To make changes, just remember that all new paths will use the base href value, so any changes will have to happen inline - CSS changes will have to be directly placed in-page in a style tag and JavaScript in a script tag - or use fully qualified urls to a known domain (so paths like “http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” for loading jQuery from Google, for instance, will still work just fine). This is a great way to easily debug code that you just don’t have direct access to.
One thing to remember though, be sure to check your base tag before deploying any code you may have been working on locally. If it happens…
The Web has grown into a real jungle, and finding cool new sites nowadays isn't always the easiest thing in the world. If you have a Website yourself, you're dealing with the other end of this issue. How do you get noticed online, and is there anything you can do to increase your popularity?
There certainly is! Here are the top five ways you can strengthen your site and increase your online visibility.
1. Strong Hosting
This first point is mostly important for those who don’t have their own Website yet but eagerly want to create one. After you have selected your domain name, the next step is to choose a hosting plan. There are many good, affordable alternatives, but what professionals usually recommend is specialized blog hosting. This form of Web hosting allows you to set up a professional-looking Website in no time at all. Why is this important to mention when it comes to making your site more popular? Well, without strong hosting, you won’t be able to handle a traffic to your new Website, which means you’ll have no chance at all of becoming well liked.
Of course, finding strong hosting is often easier said than done. The hosting industry has grown very popular in recent years, and this has lead to large numbers of companies offering various hosting services. But don’t be fooled by their tricky ways of making it sound as if they are the best in the industry. We would recommend you partner up with a company that has a strong reputation and experience in the business. You might start at Web Hosting Search for reviews and other information to help you find the right fit.
When it comes to hosting, you should compare the different features included with the plan. Make sure you are guaranteed at least 99.9% uptime and that customer support is easy to get hold of. You never know when you could need them. Likewise, it is also good to know exactly what kind of numbers in terms of disc space and bandwidth will you be allowed to use and manage. Some providers also forbid their clients to upload music or video files to their servers even if it is for personal use. It's important to ask customer support to resolve such issues before purchasing a plan. Some other things you might consider asking are whether your domain name…
If you're looking to collect information from your users, there isn't a much easier or more straightforward method than a Web form. If designed well, Web forms provide valuable information; if not, they may scare users away. With this in mind, here are a few key tenets of Web form design that every designer should know.
Let's face it: No one likes spending a long time filling out a form. Keep it short and simple and eliminate elements that aren't absolutely necessary or that don't offer a tangible benefit. Make sure every part of your form is pulling its weight, and your users will thank you.
The structure of your form should serve just as much of a functional purpose as its elements. When laying out your form, keep in mind that, at least in the Western world, people read from top to bottom and left to right. They also often use the Tab key to move around the form. Your design should reflect this through intuitive labeling and natural placement of elements. And, of course, your form should never look scattered or haphazard — make sure everything is evenly spaced and neatly arranged.
Here are a few standard form layouts that you should use as a starting point for more creative designs:
Left-Aligned Labels With Vertically Stacked Fields
This form features left-aligned labels with neatly ordered fields stacked on top of one another. This gives the eye an easy-to-follow path down the form, which is especially helpful if you're asking questions users may not be familiar with. Because they're able to read down the list of questions without the visual interruption of an input field, they'll be able to concentrate more on what you're asking. This layout does tend to make for longer form completion times because of the amount of time it takes for the eye to move from the label to the input field.
Right-Aligned Labels With Vertically Stacked Fields
Right-aligning your labels can help make them easier to distinguish and quicker to read, and also eliminates awkward spaces between labels and input fields. However, this can…
It's easy to resent punctuation. Its purpose is to clarify sentences, so why are the rules governing it so complicated? There are so many exceptions, so many exceptions to exceptions — it's enough to make you want forego punctuation altogether.
Well, back when it was alive and kicking, the Latin language did just that — and it didn't stop there. Written Latin also omitted spaces between words or lowercase letters.
It sounds kinda nice, doesn't it? No more worrying about whether that comma is in the right place, and on the flip side, no more embarrassing urge to whip out a red pen and correct restaurant menus. What's not to love?
A lot, it turns out. The result of all this grammatical simplification looked a little something like this:
You don't need to be discipulae lingua Latina to understand how nightmarish that sentence is. Now let's see how it looks when we apply our modern grammatical conventions:
Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.
Behold the power of punctuation! Interword spacing, commas, and a period have helpfully transformed a terrifying sentence-monster into five easy-to-digest compartments.
Like it or not, punctuation is necessary. So what to do about all those hard-to-remember rules? Well, the trick is to make the same allowances for punctuation that we do for people. We all blatantly contradict ourselves in one way or another. It's these little exceptions to the rules we set for ourselves that make us that much more interesting and unique. Punctuation is no different. Rather than getting frustrated by all the exceptions to the rules, try embracing "punctuationality" — the personality of punctuation.
Naturally, a comprehensive guide to all the available punctuation in the English language is a bit beyond the scope of a single article, so instead I'll concentrate on the stylistic uses of a few commonly used marks over the course of two articles.
Ellipsis
I like to think of ellipses as industrious workers who don't particularly enjoy what they do for a living, but take pride in doing a good job. But when they get home, they like to unwind Michael Phelps style — and I'm not talking about swimming laps.
Most ellipses find work in the scripts for cheesy daytime soap…
It's one of Thoreau's most enduring witticisms, and with good reason. When faced with the ever-increasing barrage of information that is modern life, many people find solace in minimalism. This trend has taken an especially strong hold on the Web.
Minimalism and simplification draw attention to important page elements. Using lots and lots of empty space makes content stand out. The overall effect is calming and sophisticated, a welcome break from the typical gauntlet of advertisements and traffic and television and whatever else screams incessantly for your attention.
For your inspiration, here are 25 beautiful minimalist designs. Some are charming, some powerful, some stunning, but they’re all linked by the same idea: simplicity, simplicity, simplicity.
Part two of last week's examination of the personality of punctuation. Click here to read Part 1.
Em Dash and Hyphen
Em dashes and hyphens are sisters, and whenever they go out together, they get stopped by strangers.
"Are you twins? You all look so much alike!"
At this, they roll their eyes. Sure, they look similar, but it's obvious — to them, at least — that they're each completely unique.
The em dash is the eldest. She’s taller than her sister, more graceful, and a bit more aloof. She needs her space — specifically, one space on either side. Some people misinterpret her attitude as snobby because of her near-encyclopedic knowledge of famous quotes. However, since em dashes are used to indicate attribution, ("The mass of men lead lives of quiet desperation." — Henry David Thoreau) she’ll demurely credit her knowledge to her job.
No, the real reason she's distant at times is that she's insecure about her place in punctuation society. She has two main jobs, one as a sort of watered down parenthesis (see the third paragraph in this section), and one as a sort of watered down semicolon (see the fourth paragraph in this section), and sometimes she wonders if she's even necessary at all.
The hyphen doesn't have this problem. She's the baby, and like most younger siblings, she's a total ham — and a total copycat. Whereas em dashes link a phrase to the rest of a sentence, hyphens link words to other words. Far more social than her aloof older sister, the hyphen doesn't mind being right next to the words she links, and sometimes within the word itself.
One of her favorite games is jumping around a phrase and seeing how she can change the meaning. Take "three month old puppies," for instance. The hyphen might jump between "month" and "old" — three month-old puppies — and then squeal over the idea of three puppies, each of them a month old. Then she might jump between "three" and "month" — three-month-old puppies — and squeal again over the idea of a number of puppies, all three months old.
Whenever the hyphen plays this game, the em dash just smiles and pats her head.
Commas
We're not done with the sibling metaphor yet. I want you to think back to middle…
