A Quick-Start Guide to Teaching Yourself Creative Software “I really need to learn how to use Photoshop.” “I don’t know how people do all that stuff with After Effects.” “If I only knew Ableton…” Does this sound like you? Learning creative software can be intimidating, but it’s not as hard as you might think. An ever-growing catalog of high-quality, online video tutorials available on sites like Lynda.com and Kelby Training are making learning on your own both efficient and engaging. For Photographers and Image Editors Kelby Training ($25/mo, $200/yr) KelbyTraining.com specializes in Photoshop and Photography by having skilled professional photographers teach courses in HD video. For Adobe Creative Suite Users AdobeTV (Free) Adobe provides a series of free tutorials for all of their creative suite products, including Photoshop, InDesign, Illustrator, Premiere, and more. For Musicians, DJs, and Sound Engineers For Videographers and Editors For Motion Graphics Designers and Animators For Web Developers For Everyone 1. 2. 3. 4. What Do You Use?
Say Hello to the HTML Email Boilerplate Figuring out html email will test the patience of any human being. A seemingly small formatting issue will inevitably arise and you think to yourself, "self, I'm a world class web developer type person schooled in the latest and greatest html5/css3/whatever, I can tackle this with plenty o' keystrokes to spare." Several hours/cups of coffee/googling later, you are ready to pull your hair out and begin to contemplate what you would do to the person/persons who created {fill in the blank email client here}. The HTML Email Boilerplate is a template of sorts that is absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo, etc. - the HTML Email Boilerplate The boilerplate is here to provide you with some examples and helpful tips to keep your email design rendering as true-to-form as possible. But before we get started, let's review some basic tenants of html email: 1: Setting the DOCTYPE
CSS3 Hover Effects Hello guys, this time I will show you other five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops. In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects. Please note that this will only work properly in modern browsers that support the CSS3 properties in use. HTML Markup This simple structure allows us to make these effects. <div class="view"><img src="images/1.jpg" /><div class="mask"></div><div class="content"><a href="#" class="info" title="Full Image">Full Image</a></div></div> Here you will set the basic properties of our tutorial. 1 Example Add the special class effect to the element with the class view for this effect. <div class="view effect"><img src="images/1.jpg" /><div class="mask"></div><div class="content"><a href="#" class="info" title="Full Image">Full Image</a></div></div> Go to View the Example 2 Example 3 Example
An Overview of Defensive Design All over the Web, at any given moment, something is going wrong. It's not an issue we take lightly, yet it still occurs! No I'm not here to talk about our over dependence upon third party tools or IE6 (specifically), I'm here to talk about site glitches, and how to avoid them. Occasionally these bugs are small visible glitches, occurring as a result of mismanaged code; or in many other cases, Internet Explorer. Introduction In recent years, we have placed a great deal of effort as an industry, following the topics that get lots of attention. What is Defensive Design? Combatting these evil forces, be they bugs or reoccurring errors, is an on-going battle that cannot be won overnight. Essentially, our goal is to support our sites in times of trouble, purge those errors relating to lost files or the unavailability of resources, ensure that our layouts do what they're supposed to, help the user complete actions, and avoid throwing visitors into a bottleneck of confusion. Why does this Matter?
Maximize the Use of Hover Usually, we create hover effects by changing: font color, font styles, border styles, background, and etc. But there are a lot more that we can do with hover. We can use hover to beautify design, minimize clutter, and display additional information. 1. I use hover to beautify the layout of IconDock. 2. QBN makes its layout look cleaner by hiding the extra buttons on default. Gucci puts focus on their product images by hiding the variations. 3. Coda combines CSS and Javascript to create a beautiful tooltip. On Best Web Gallery, I use jQuery to display a larger image of the screencap. Tutorials Image Hover (see demo) The following CSS tutorial imitates the hover effect as seen on the Gucci and QBN site. Animated Hover (see demo) The following demo use jQuery to animate the <em> text when you hover the link, as seen on the Coda site. jQuery Tooltip Head over to CSS Globe to see the jQuery tooltip that I use for Best Web Gallery.
Get Into LESS: the Programmable Stylesheet Language I don't like CSS. Plain and simple. It makes the World go round on the web, yet the language is restrictive and hard to manage. It's time to spruce up the language and make it more helpful by using dynamic CSS with the help of LESS. Let me illustrate my point with an example right away. Instead of using #FF9F94 to get a dark peach color, wouldn't it be easier to store that color value inside a variable and just use that variable? In other words: it would be awfully nice if we could use some programming and logic inside CSS to make it a more powerful tool. What Is LESS? LESS is a superset of CSS. LESS adds much needed dynamic properties to CSS. How To Use LESS There are two ways to use LESS. Using The LESS Javascript File First of all head down to the LESS website and grab the Javascript file. Next, create a file with the .less extension and link it to your page with the code below: Make sure that you link your LESS file before the Javascript file. Compiling The LESS File Variables
Responsive Design with CSS3 Media Queries Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. View Demo Responsive Design Download Demo ZIP See It in Action First Before you start, check the final demo to see how it looks like. More Examples If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr. Overview The page's container has a width of 980px which is optimized for any resolution wider than 1024px. HTML Code I'm not going to go through the details of the HTML code. HTML5.js Note that I use HTML5 markup in my demo. Reset HTML5 Elements to Block The following CSS will reset the HTML5 elements (article, aside, figure, header, footer, etc.) to block element. Main Structure CSS Again, I'm not going to get into the details.
HTML onChange specifies script code to run when the data in the input field changes. applies to input fields which accept text, namely text and password fields. ( and fields also use .) The event is triggered when the contents of the field changes. For example, when the user enters an email address in this form, a script does some basic validity checking on the value entered: <SCRIPT TYPE="text/javascript"><! which gives us this form: Because only occurs when the value changes, the user is only warned once about a bad value. The happens whenever anything changes the value of the field, not just when the user enters a value. <SCRIPT TYPE="text/javascript"><!
Musings on the Relationship Between Grids and Guides Though it has been around for years in print design, the concept of working on the grid has become really popular in web design in recent times, especially with the success and availability of CSS frameworks like the 960 Grid System. Many tutorials and articles that I have seen make explicit use if grids, even going so far as to specifically recommend the use of one particular system. Musings on the Relationship Between Grids and Guides That’s great. Personally, I’ve been used the 960 Grid System in several designs, and will be using some form of grid in the upcoming redesign of this very blog. As great as grids are, however, I do think that it’s important to distinguish them from another useful layout tool: guides. Grids I suppose that the best place to start is with a simple definition of what the grid. A grid breaks space or time into regular units. There are a few key elements that I want do draw out of this. Guides A grid, on the other hand, does translate into the finished design.
Why We Shouldn't Make Separate Mobile Websites Advertisement There has been a long-running war going on over the mobile Web: it can be summarized with the following question: “Is there a mobile Web?” That is, is the mobile device so fundamentally different that you should make different websites for it, or is there only one Web that we access using a variety of different devices? Acclaimed usability pundit Jakob Nielsen thinks that you should make separate mobile websites. I disagree. Jakob Nielsen, the usability expert, recently published his latest mobile usability guidelines. “Good mobile user experience requires a different design than what’s needed to satisfy desktop users. I disagree (mostly) with the idea that people need different content because they’re using different types of devices. Firstly, because we’ve been here before, in the early years of this century. It was a great success—heavily stripped down, all server-generated (as in, those days screen readers couldn’t handle much JavaScript) and it was highly usable.