Building an Online Web Design Portfolio May 25 2012 There many benefits to having an online web design portfolio, but there is something more than beneficial to displaying web design work online, in the arena in which it was intended; it just feels at home. Optimized and ready to show off its full potential. A successful online portfolio will use the same rich media functionality that a great website would, too — and with these hosting services, templates, and themes, you don’t have to be an experienced developer to do set yours up. We’ll start off by taking a look at portfolio hosting services that allow for a wide range of customization. Portfolio Hosting Services Behance Behance is perhaps the best-known and highest-visibility portfolio hosting service on the Web. Behance offers fully customizable portfolios for creative professionals of various disciplines, and its graphics-heavy layouts and multimedia options are well suited for web designers. Behance ProSite Viewbook Cargo Collective Wix Fresh.li Carbonmade The Creative Finder
Sass vs. LESS "Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing. Really short answer: Sass Slightly longer answer: Sass is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing. Much longer answer: Read on. The Much Longer Answer The Learning Curve with Ruby and Command Line and Whatever The only learning curve is the syntax. Winner: Nobody Helping with CSS3 With either language, you can write your own mixins to help with vendor prefixes. In Sass, you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. In LESS, there are also some mixin libraries battling to be the best. See that?
Don't Overthink It Grids The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a "main content area" floated to the left a "sidebar" floated to the right, it's a simple grid. If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot of the grid systems they reach for are very complicated. Here's how I build grids. Context A block level element is as wide as the parent it's inside (width: auto;). Columns Let's start with a practical and common need: a main content area being 2/3 the width and a sidebar being 1/3 the width. <div class="grid"><div class="col-2-3"> Main Content </div><div class="col-1-3"> Sidebar </div></div> To make them next to each other, we just need to float them and apply widths. and individual width like this: That's the whole premise of not overthinking grids. Clearing Context
5 Mac Apps That Make CSS Preprocessors Easier to Use This post is part of a series that revisits some of our readers’ favorite articles from the past that still contain awesome and relevant information that you might find useful. This post was originally published on December 20th, 2011. If you’re a fan of CSS preprocessors, then you know that despite their usefulness, they can be a bit of a pain to work with at times. Most of them require some sort of Terminal voodoo to compile, which immediately scares off a good portion of potential users. As always, the Mac development community has come to the rescue with some amazing tools that completely take the effort out of the process. What Is a CSS Preprocessor? A CSS preprocessor is a tool that makes writing CSS easier, more flexible and arguably even more fun. Typically, a CSS preprocessor adds some interesting functionality to CSS such as variables, mixins, functions, nesting, etc. Five Apps to Process Your Files LESS.app Price: Free Supported Languages: LESS LESS.app Crunch! Crunch! LiveReload
UXPin: UX Design & Wireframing Tools As Beautiful As Your Work Can’t Get Into Preprocessors? Try Zen Coding A ton of discussion lately has been given to preprocessors. These incredibly useful tools make coding easier, faster and more maintainable, but they’re certainly not for everyone. Whether or not you’ve jumped on the preprocessor bandwagon, you should give a fresh look to an old favorite that helps you dramatically cut your coding time without reinventing your workflow with compilers and other complications: Zen Coding. With Zen Coding, you can type a little and output a lot, just like with a preprocessor like Jade or Haml, only it expands instantly into the vanilla HTML that you love. Zen Coding vs. Zen Coding has been around for a number of years, so several of you reading this are bound to think that this is too old school to merit a discussion in 2012, but I’m willing to bet that lots of new coders have never given it a shot. I’ll start by saying what Zen Coding isn’t: it isn’t a preprocessor in the same vein as LESS, Sass, Stylus, Jade, Haml and the like. How Does It Work? Zen CSS
Intuitive Web Design: How to Make Your Website Intuitive to Use 29inShareinShare The easier your website it is to use, the more people use it. An essential part of “easy to use” is intuitive. Intuitive design means that when a user sees it, they know exactly what to do. The main thing about intuitive design is that it’s invisible. Design is intuitive when users can focus on a task at hand without stopping even for a second. Imagine that you’re at a car rental place and you’re pointed out the car you’re getting. Image credit This is an example of non-intuitive design. The same goes for web design. The problem with designing intuitive interfaces: intuitive for who? Why are there so many websites that make people cringe? I believe most websites are designed with good intentions. People see the world as they are, and when they design something, they unconsciously design it for themselves – for people that have the same level of computer skills, experience using this type of interfaces and what not. Image credit Current knowledge vs Target knowledge Conclusion
Sass vs. Stylus: Who Wins the Minimal Syntax Battle? Today we’re going to pit two CSS preprocessors head to head. You’ve no doubt seen lots of discussion about how SCSS compares to LESS, but where does Stylus, the new kid on the block, factor in? Can it possibly match the power and versatility of SASS? We’ll jump head first into both syntaxes and compare them side by side to see which is more logical and versatile. We’ll also talk about features and give you a clear argument for why one preprocessor is more powerful. Sass, Not SCSS One little detail needs to be addressed before we dive into this any further. However, for the sake of comparison, Sass is actually much closer to Stylus than its sibling SCSS. Alas, this is not an article on the merits of Sass vs. Basic Syntax Let’s start with a direct comparison of both syntaxes at their most basic level. As you can see, they’re almost identical. Flexibility One thing that I’ve always appreciated about LESS and SCSS is that I can still write plain old vanilla CSS within my stylesheet. Nesting
commadelimited/jQuery-Mobile-Bootstrap-Theme 45+ CSS Grid Layout Generators Using a CSS Grid System is really worth considering if you’re planning to create a complex web design like e.g a magazine layout. For quite some time CSS Grid frameworks have been very popular and helped designers and web developers to create well structured and easy to maintain solutions. However there many options available and it is not an easy tasks to make the right pick when starting up a new project. This article will give you the overview and tools you need to get started by presenting more than 45 CSS Grid systems and tutorials on how to use them. If you are looking for examples and inspiration on grid based web design you need to check this article. Update: While the grid generators below still work I think you should now that it more or less have become the de-facto standard to use responsive layouts. Advertisement Introduction Cascading Style Sheets (CSS) is used to describe the presentation of a document written in a markup language. CSS Grid Layout Generators BlueTrip SenCSS