First and foremost I couldn’t live anymore without Chrome. It’s sort of a homebase for me, without it I don’t feel comfy. It is not only the most progressive browser out there, but also has some great developer tools, built in synchronize functionality and is lightning-fast to use and load. Great to see, that more and more people adapt this browser for their everyday surfing.

Although I don’t exactly love it, but I also couldn’t live without Photoshop. A kind of love-hate relationship connects me with this behemoth of an application. Adobe’s bestseller is so buggy and so laggy and bloated, but at the same time it is also so powerful, helpful and essential for my profession. Probably it will lose momentum in the future and the design process of a website will more and more move directly into the browser, but for certain task, especially “non-flat” website, it will forever be an essential tool.

One of the “apps” I use that I truly and dearly love is Sublime Text 2. It totally changed the way I write code and simplified this task so incredibly. I’ve first seen it in a Tuts+ tutorial where Jeffrey Way used it and the desire to try it out grew with every minute. I didn’t regret it to date. Of course it has a very steep learning curve and takes some time and sweat until you have tailored it to your needs. But as soon as this point is passed, it’s so incredibly helpful, easy to use and essential for your job. You can read my “love letter” to it here.

The newest addition to my favorites is Typecast App. Although I participated in the beta test, I didn’t exactly know how it could fit into my design process. Luckily I changed my job and so I finally have a reason to integrate it employ it regularely. Gone are the days when you need to fiddle about with different font files to test out which font works best for a design or a combination with another one. The best thing is that Typecast App features almost every font out there available at a font service and therefore the possibilities are endless. It’s fast, it’s easy to use and lately it also includes a Pro plan for fonts.com. Which directly leads me to my next tool.

fonts.com Web fonts is another “classic” for me. If you are interested in fonts and foremost in some of the best fonts invented to date, you won’t come around this service. Although the website is a bit clunky and sometimes buggy, the range of available fonts is incredible. Frutiger, Helvetica, Futura, Avenir, Trade Gothic, Univers, ITC Avant Garde, Gill Sans, Optima, just to name a few. If these fonts make you feel cosy just like me, you definitely need an account at fonts.com. Unfortunately I won’t have to do that much with fonts anymore at my new job.

Besides Sublime Text another tool that absolutely changed the way how I develop websites is SASS. First I thought that it’s just a cheap mask to hide the real problems of CSS, but now I know that it’s the one true way to write CSS. Although I don’t use it in the least, the few features I actually employ – like nesting, variables, mix-ins, extends, media query bubbling – make my life so much easier. Nesting alone is a huge time-saver and a reason to try out the pre-processor. Luckily there are tools like Compass.app which protect me from the nightmares of the command line.

The next tool is probably the one where the most people would agree that it is one of the best innovations to date: Dropbox. The ability to access your data at any time, at any place and on any device is a little bit like magic. The bonus of a “free” backup and the possibility to restore any state of your files if you wish to make it my absolute number one. So small but so powerful.

Lately I have also discoved a new favorite: Inkscape. I didn’t know that there is a free alternative to Illustrator and Corel Draw, that’s actually so powerful and easy to use – and, like I said before, free. Especially with the rise of icon fonts and their preferred file format SVG it’s often essential to change some details of them or simply transfer them to a PNG. Inkscape is “your man” for such occasions. A strong bonus point is that you also can save SVG files as an EPS so that they re ready to use within Photoshop and don’t lose details.

Speaking of icon fonts: The one App you will ever need if you have to deal with icon fonts is icomoon. The library of different icons is huge, it lets you add your own icons and you can also download them for other usage. And if you invest a little bit of money and buy a paid plan it’s also incredibly easy to use. Whenever I open the App in my browser I’m again astonished what websites (respectively web apps) are capable of meanwhile.

Lastly there is a programme which almost is a substitute for my brain and lets me easily collect things: Evernote. It’s also an App which I totally underestimated before. Whenever I see an interesting website, I add it to Evernote, whenver I learn something new, I add it to Evernote, whenever I want to make sure that I don’t forget something, right, I add it to Evernote.

So, which are the tools you couldn’t live without? Please share them at the comments.

Although I use the former on chriskrammer.com, I’m not so sure if it’s the best fit anymore. That Chrome uses the same icon for its preferences represents just a minor glitch, what matters more in my eyes is that the handling can be pretty sophisticated, and that it first has to be learned by the people. Whereas the tried and tested select box is almost as old as the Personal Computer and therefore grounded in everybody’s mind. So why should we introduce a new element if there’s already one available?

I think that the main problem of the select box is its implemetation. Either you include it – hidden – into your source code and show it as soon as a certain breapoint is due or you automatically assemble it based on the the navigation list. The former just needs CSS, but means a “suporflous” element. The latter depends on jQuery, but since it’s only an assistance for the user and if JavaScript isn’t available, the common navigation will be shown with and no harm done here. Since I also was in the situation recently that I needed such a handling I deceided to go for the select box and develop a little jQuery script which automatically translates a <ul> list into a <select> box at a certain breakpoint. Besides jQuery you will also need Modernizr.

The script

Although it may sound complicated at first, the actual script is not that difficult.

var width = jQuery(window).width(); // 1
var mq = Modernizr.mq('only all'); // 2

First I check the width of the window (1) and if media queries are generally available (2).

if(Modernizr.mq('all and (max-width: 40em)') || (width < 1000 && mq == false)) { ... }

To determine when the script should be performed I use two different conditions. You may notice that two different widths are stated, that’s for a reason. The first is for “advanced” browsers with media query support (max-width: 40em), which only need to fall back to a select box very late. The second (width < 1000) is for “archaic” browsers (yes you, IE, but also less capable mobile phones and the like), which don’t have the possibilities of media querys to rearrange the elements of a site. mq == false just states the unavailibility of media queries. Of course I could also simple rely on the window width for both conditions, but it feels better to test browsers capable of media queries just for that.

var content = '';

An empty variable is invoked, which will hold the generated select box later. Now things get a little bit tricky …

$('#site-navigation').find('ul').find('a').each(function() { ... })

For every link which is within an <ul>, which is inside an element with the ID site-navigation the following code will be performed.

var href = $(this).attr('href');

The respective href attribute of the link is saved into the variable href.

var html = $(this).html();

The content of the respective link is saved into the variable html.

content += '<option value="' + href + '">' + html + '</option>';

And now the <option> tags are composed and appended to the variable content which we set up earlier.

.end().replaceWith('<select id="navsel">' + content + '</select>');

Finally the actual navigation list is replaced with the only just generated select box. The end() method just jumps back from the link to the <ul>.

$('#navsel').on('change', function() {
	location.href = $(this).attr('value');
});

Since the select box (which we assigned the ID navsel earlier) should also do something when an entry is selected we tell it to go to the link inserted into the value attribute above.

And that’s all. Now the whole thing.

var width = $(window).width();
var mq = Modernizr.mq('only all');
if(Modernizr.mq('all and (max-width: 40em)') || (width < 1000 && mq == false)) {
	var content = '';
	$('#site-navigation').find('ul').find('a').each(function() {
		var href = $(this).attr('href');
		var html = $(this).html();
		content += '<option value="' + href + '">' + html + '</option>';
	}).end().replaceWith('<select id="navsel">' + content + '</select>');

	$('#navsel').on('change', function() {
		location.href = $(this).attr('value');
	});
}

You can test-drive the script here. Resize the window so that’s it’s smaller than 640px (40em), reload the page and you should see a select box instead of the navigation list. A little disadvantage is that the change from the navigation list to the select box doesn’t occur in real time but only at a page reload. But since a common user doesn’t resize a website to check its media queries but will invoke the page at a certain width that should be no big issue.

If you have some improvement suggestions or questions please post them into the comments.

Am I just a bad designer? Or is it – like they say – that a design is more than the sum of its parts, and you just can rip a part out of anything and hope that it will work just like that? Of course it is, a design is a well considered package of different choices, of choices made together with the client, of countless iterations and, above all, design isn’t just “aesthetics” or “decoration”. Unfortunately a notion, which many bosses, managers and mostly clients still advocate. This needs to change! I myself am bound into this tight cage, to this perception, and it’s hard to break free from it because a beautiful picture is all that matters about a website. There is also a talk from Andy Clarke which deals about pretty much the same and made me wish that things were different for me. Do you know that situation? What do you think about it? I’d like to discuss it with you.

I’ve prepared a little example which showcases this type of pattern. Four images, located in an unordered list with floated list items, each 25% wide and width a gutter of 3% in bet-between. To be able to set the width this way without the need to care for the gutters needs a few preparations:

1. Set the box-sizing to border-box so that the padding of the items isn’t added to the width (don’t forget about -moz-box-sizing for Firefox).
2. Define the gutter with paddings instead of margins (3%).
3. Give the list itself a negative margin of -3% so that the padding of the first item gets “swallowed” and isn’t displayed.

If you want the bar to be responsive just set the images to max-width: 100% and it always fills the whole window. But it’s also possible to specifiy a width for the bar. Wrap everything inside a container (<div class="container">) and assign a width to it: a fixed width (600px) is possible just like a relative width (60%). Works in pretty every browser, even IE down to version 8.

This way an arbitrary number of items next to each other is possible. If you need five, set the width of the <li> to 20%, for three items use 33.33%. No more calculations, just one simple percentage value.

]]> http://www.css3files.com/2013/01/16/how-to-responsive-image-bar/feed/ 5 http://www.css3files.com/2012/12/14/form-validation-done-right/ http://www.css3files.com/2012/12/14/form-validation-done-right/#comm Fri, 14 Dec 2012 22:23:44 +0000 Christian Krammer http://www.css3files.com/?p=1635 One of most useful additions of HTML5 is definitely the built-in form validation. No more complicated scripts, just set the required attribute and you are ready to go. Unfortunately there's a snag to it: the current state of form validation is pretty mediocre. While the "trinity" Chrome, Firefox and Opera all bring decent support, Safari stays far behind and the only Internet Explorer capable of this feature is IE10. So what to do now if you want to validate a form so that it works in every browser?
Continue reading
]]> One of most useful additions of HTML5 is definitely the built-in form validation. No more complicated scripts, just set the required attribute and you are ready to go. Unfortunately there’s a snag to it: the current state of form validation is pretty mediocre. While the “trinity” Chrome, Firefox and Opera all bring decent support, Safari stays far behind and the only Internet Explorer capable of this feature is IE10. So what to do now if you want to validate a form so that it works in every browser?

Of course you could relapse to jQuery and use one of the many ready-made plugins, but that’s anything but future-proof. Definitely the way to go is to let the capable browser do their native thing and for the rest resort to a polyfill. The downside: JavaScript and jQuery are still needed, but the time will come when you can purely rely on the native support of the browsers and chuck out the script. So what do we need to validate a form in the the said way?

The official way

For the “modern” browsers the only thing really needed for validation is the required attribute:

<input type="email" required/>

Since that’s a boolean attribute you don’t need to set a value. Admittedly you get a different error message for every browser, but the result is what matters. Beyond that you can also use the title attribute to set a custom message that gets displayed alongside the default message:

<input type="email" required title="You really need to fill out this field!"/>

Unfortunately Chrome is the only one to display this custom message at the moment.

But how to tell the browser which content is actually allowed to be inputted? That’s when the pattern attribute comes into play. It takes a regular expression as a value:

<input type="email" required title="You really need to fill out this field!" pattern="[0-9]{4}"/>

In this case a four-digit combination of numbers needs to be inserted. If you are not that into this kind of stuff, you can visit the excellent website html5pattern.com which gives you a wealth of different patterns.

Let’s polyfill

Now that we’ve taken care of the modern guys let’s turn towards the retarded pals. Although there are a few different polyfills to choose from the most feasible one is the WEBSHIMS LIB, a collection of numerous polyfills for the not-so-capable browsers. Basically the employment is pretty simple: Load up Modernizr, jQuery and the WEBSHIM polyfill (polyfiller.js) and add the script to the <head> of your website:

<script>
     $.webshims.polyfill();
</script>

Now browsers with no native support for form validation will show a nice little error message for every required field. Unfortunately there’s a little drawback: pretty every browser with native support gives you a different text. Wouldn’t it be nice to get a a nice uniform one for every single one? That’s when the WEBSHIMS LIB also assists modern browsers.

Just expand the above invocation with a few lines:

<script>
	$.webshims.setOptions('forms', {
		overrideMessages: true
	});
	$.webshims.setOptions({
		waitReady: false
	});
	$.webshims.polyfill();
</script>

Now you get the same text for every browser, even with language support. Here’s an example for such a form.

To go one step further you can also instruct the script to use the same appearance for the error messages for every single browser:

<script>
	$.webshims.setOptions('forms', {
		overrideMessages: true,
		replaceValidationUI: true
	});
	$.webshims.setOptions({
		waitReady: false
	});
	$.webshims.polyfill();
</script>

Neat, huh? To change this appearance use the CSS classes .validity-alert-wrapper .va-arrow (for the arrow) and .validity-alert-wrapper .va-box (for the container itself).

Additionally the WEBSHIMS LIB also enables a few other features for legacy browsers like a date picker. If you often have to deal with forms and especially their validation you should check out this polyfill. It’s very powerful and can both assist modern and legacy browsers.

]]> http://www.css3files.com/2012/12/14/form-validation-done-right/feed/ 2 http://www.css3files.com/2012/10/11/relative-is-the-new-absolute-the-rem-unit/ http://www.css3files.com/2012/10/11/relative-is-the-new-absolute-the-rem-unit/#comm Thu, 11 Oct 2012 06:50:41 +0000 Christian Krammer http://www.css3files.com/?p=1580 For me one of the hottest things CSS3 has to offer is not an obvious one like animations or filters, but a pretty inconspicuous: the rem unit. I recently employed it at a project for the first time and it really thrilled me. But one thing first, before I continue with my excitement. You know, these days it's recommended to use relative units (like em) instead of absolute ones (like px), because the Web's no fixed place, why should we use fixed units then?
Continue reading
]]> For me one of the hottest things CSS3 has to offer is not an obvious one like animations or filters, but a pretty inconspicuous: the rem unit. I recently employed it at a project for the first time and it really thrilled me. But one thing first, before I continue with my excitement. You know, these days it’s recommended to use relative units (like em) instead of absolute ones (like px), because the Web’s no fixed place, why should we use fixed units then?

Unfortunately the problem with relative units is, well, that they are relative. For one thing – and I’m speaking strictly of em – they are relative to their parent. So if we have an element with a font-size of 1.4em, all the paddings you set in ems are relative to this size, which makes the math very difficult (if you strictly relate to px units or the dimensions of another element). And moreover inheritance is a big problem. If you have an <li> which is sized at 1.2em and nest another <li> inside it, it effectively gets a font-size of 1.2 × 1.2 = 1.44em. While the first can be helpful in some cases, say if you want the paddings always relate to their parent if things get enlarged, the latter is pretty annoying.

rem is the saviour

And here is where the rem unit comes into play. This one’s not relative to its parent but to the root (therefore “r”em) of the document, so in most cases based on a font-size of 16px (which is the default for HTML documents nowadays – yep, even across browsers). Therefore every unit you want to be relative has to be divided by this factor to get the rem unit. So if you want all spaces and sizes on your page to be consistent and only dependent on one factor (the document) and not numerous ones (their parents), this is the unit for you. I’ve set up a quick demo to depict this difference. The first <h1> with the class of .one is sized with em, the second with the class of .two with rem (accordingly their paddings). If you change the font-size of the first heading the left padding grows or shrinks relative to it. Whereas for the second heading the padding always stays the same – relative to the document. Not to mention that the padding for the first heading is by far larger since it’s based on the heading’s size.

The same goes for the aforementioned nested lists. Please have a look at another demo. Since the font-size for the <li>s of the first list, with the class .one, is set in em, the nested items are double the size of the non-nested (remember 1.2 × 1.2 = 1.44). But for the second list the nested item remains at the intended size – therefore the same as the non-nested ones (list no. three – .three – is for later).

Why should I bother?

The single most important question for you might be now: Why should I bother to size things in rem and not just use px? Well, let’s say you want to enlarge everything on your site as soon as it exceeds a certain width limit. With everything rem you just set the font-size of the <html> tag to 110% and, magic, everything is 10% bigger. But what to do with everything px in this case? Good luck with that! Make a media query and overwrite every single element, that is supposed to be larger? No way! Try it out yourself in the demo from above and change the font-size of the <html> tag. While the first and second list adapt, the third remains at the original size.

However there is one pitfall: the rem unit is not supported by Internet Explorer < 9 (and Android 1.6, if you have to bother). But there is a relatively quick fix: for every property you use rem, repeat it beforehand with px values (remember, by default rem = px/16). A bit tedious, but the only way to rem at the moment.

One thing last: the conventional em unit still has its right to exist, for example for the measure (the line-length) of paragraphs, which are intended to adapt relatively to the font-size and nothing else. And like I said before, if you want margins or paddings that resize relative to its parent (and you don't care about actual pixel sizes or a relation to other elements). So, at the end of the day the rem unit is a valuable tool in our tool belt to tailor device- and resolution-independent layouts. I love it!

]]> http://www.css3files.com/2012/10/11/relative-is-the-new-absolute-the-rem-unit/feed/ 12 http://www.css3files.com/2012/09/24/ios6-brings-us-the-joy-of-two-new-css3-properties/ http://www.css3files.com/2012/09/24/ios6-brings-us-the-joy-of-two-new-css3-properties/#comm Mon, 24 Sep 2012 10:11:27 +0000 Christian Krammer http://www.css3files.com/?p=1554 It's always great when new CSS properties are supported in (desktop) browsers. But as long as this support is limited to Chrome (or Safari) it doesn't provide much benefit, since the user base isn't that broad yet (but fortunately growing). However they become really interesting as soon as they are backed up by mobile devices powered by WebKit, in this case the iPhone and iOS6. With this new operating system two new CSS3 techniques find their way into a broader audience.
Continue reading
]]> It’s always great when new CSS properties are supported in (desktop) browsers. But as long as this support is limited to Chrome (or Safari) it doesn’t provide much benefit, since the user base isn’t that broad yet (but fortunately growing). However they become really interesting as soon as they are backed up by mobile devices powered by WebKit, in this case the iPhone and iOS6. With this new operating system two new CSS3 techniques find their way into a broader audience.

CSS3 filters

They allow enormous manipulations of the content like blur, greyscale or the adaption of the saturation. I’ve build a demo which showcases all the available filters and their employment. You can read more about them at the official specs. A totally awesome way to play around with filters is provided by Adobe’s CSS FilterLab.

CSS3 Cross-fade

As against filters I can’t see that much potential to be a valuable CSS3 property that will be massively deployed. It’s nice to be able to blend in two different images, but the emphasis is on “nice”, not more. However to play around a bit I’ve also made a quick demo. The specs can be found here.

Except from the iOS devices both of the techniques only work in Chrome and Safari 6 so far. Support in Firefox or IE10 is uncertain for now.

What do you think about them? I’m really excited about CSS3 filters, but it will take a long time until we can finally apply them in a desktop environment. But for apps it’s definitely a great addition and as good as ready to use.

Source: mobilexweb.com

]]> http://www.css3files.com/2012/09/24/ios6-brings-us-the-joy-of-two-new-css3-properties/feed/ 3 http://www.css3files.com/2012/09/11/what-is-design/ http://www.css3files.com/2012/09/11/what-is-design/#comm Tue, 11 Sep 2012 11:06:26 +0000 Christian Krammer http://www.css3files.com/?p=1532 That's a pretty good question, which even seasoned professionals can't answer properly to what I've read lately. Is it art? Is it creativity? Or is design just design, standing for itself? To my understanding it is just the latter, and only the latter. It's a fundamental, it's the base of everything we as "creatives", as web-designers, do each day. Without design no website would be structured properly, it would convey no meaning, it would be just a mess no user could decode.
Continue reading
]]> That’s a pretty good question, which even seasoned professionals can’t answer properly to what I’ve read lately. Is it art? Is it creativity? Or is design just design, standing for itself? To my understanding it is just the latter, and only the latter. It’s a fundamental, it’s the base of everything we as “creatives”, as web-designers, do each day. Without design no website would be structured properly, it would convey no meaning, it would be just a mess no user could decode. That’s really the principle of it all. A good, usable website is not about gradients, drop-shadows or rounded corners, it’s about the clever use of typography, color, grids, white-space, emphasis, … Since I’m pretty obsessed about design and everything involved lately I’ve read a ton of articles about it and want to share these resources with you:

Articles

• The principles of design
• Art, design and visual thinking
• Dieter Rams’ ten principles of design
• The design lesson: 1 of 1
• Gestalt principles of perception
• Forget all the rules about graphic design

Books

• Designing for the Web (free online version)
• The principles of beautiful web design
• Designing the invisible
• Universal principles of design
• The elements of typographic style

If you are like me, who never enjoyed a traditional graphical education, these publications are a mine of information. But even if you consider yourself to be a seasoned, educated professional, have a look, peruse what you know (or seem to know) and be delighted at your knowledge. Another good way to test your designs skills is the Design test 2 by Andy Rutledge. It may seem overwhelming at first, but if you truly call yourself a designer you should at least try it and not immediately close the current tab due to the complexity of this “test”. Here are my answers. Try it for yourself, post your answers, let’s start a discussion about your findings, what’s right, what’s wrong, what can be done better.

Now I also understand why “pros” like Elliot Jay Stocks or Andy Clarke (unfortunately his approach is not online anymore) redesign their websites to its simplest form. Back then I really couldn’t understand why they did this, but with growing knowledge I more and more understand their motives.

]]> http://www.css3files.com/2012/09/11/what-is-design/feed/ 0 /gradient /gradient#comm Mon, 10 Sep 2012 10:44:38 +0000 Christian Krammer http://www.css3files.com/?p=1518 I'm glad to announce that css3files.com now also provides descriptions for radial gradients, namely radial-gradient and repeating-radial-gradient. Based on this addition the site should be pretty complete now since it offers all important CSS3 properties you will need regularly. I hope everything's clear and I'd love to hear some comments about the newest additions. If you think there is an important CSS3 property still missing please tell me likewise in the comments.
Continue reading
]]> I’m glad to announce that css3files.com now also provides descriptions for radial gradients, namely radial-gradient and repeating-radial-gradient. Based on this addition the site should be pretty complete now since it offers all important CSS3 properties you will need regularly. I hope everything’s clear and I’d love to hear some comments about the newest additions. If you think there is an important CSS3 property still missing please tell me likewise in the comments.
]]> /gradient/feed/ 0