Aug 6
This is super cool!!!!
9Elements created a completely html page containing nothing more then Javascript and some of the tags that are created in the new HTML version.
This is really amazing as it is really the first time that I see a website that does some things I thought could only be done with Flash. I m overwhelmed with it an I suggest you take a look at it!! Be sure to look at it in an advanced browser ( Google Chrome 3.0, Safari 4 or the latest Firefox 3.5 version).
Brushes and Patterns
A few of the patterns and brushes i play with are those from our friends at Brusheezy. After a few years of working with Photoshop you’ll become quite handy in working with the brush tool, but for those just started out with Photoshop, these video tutorials might be very helpful.
Jun 17
One of my favorite blogs is that of jQuery 4 Designers and this time he created a cool tutorial on how to create one with jQuery.
It has always been a struggle to create a nice carousel but i think this guy managed to create a real cool one. Also one of the most interesting things about this website is that all the code he writes in jQuery also works after disabling JavaScript. Try it!
for more information and other cool tutorials you can visit his website: jQuery4Designers
The Type Tool:
A Comprehensive Introduction to the Type Tool written on Tutsplus is a great way to learn about this tool. It is in general, one of the first tools that everybody seems to try out and also one of the easiest to use. But using it means not that you are able to work with it. You might want to read and try out this tutorial to get a more in depth view on the type tool itself and how it works together with other things in Photoshop like shapes, paths and mask tools. The cool thing is that when you are going through this tutorial you have tons of examples that show you the result you should get and what you should start from.
One of the things I always intend to do on Tutsplus is reading the comments of the users; they often link to other tutorials that cover similar content.
The Pen Tool
I was always struggling with the pen tool in the first few months of my Photoshop adventure until I found this tutorial. As we all know the best way to learn Photoshop is by trying and creating things with it and this tutorial does that all the way.
Actually there is no reading involved in learning about the Pen tool; you just have to download their psd exercise file and get busy. Follow the guidelines and when you reach the end of the psd you’ll be able to do all basic things you should know. Try it out! And if that isn’t enough, you can always find the explanation in this tutorial too as it covers all functions, shortcuts, cursor types, options and keyboard controls.
Try these 2 tuts, you’ll see they are a big help, even after a few months and forgetting some functionalities, these tutorials will be a great help. Enjoy
Mar 19
Writing css code isn’t that hard, it’s easy, clean but can be a pain in the ass to keep it readable when you have hundreds or maybe thousands of lines of code.
When sticking to specific rules it can all be made a bit more readable:
read the full text to enhance your css code
Mar 18
Ever heard of ‘less is more’? This is, more than ever, a standard that every developer should follow while designing his new website. Why the f* would I start talking about that, you can ask yourself. Well, the answer is quite simple, as I was going to the toilet earlier this day and was in deep thoughts with the question: why isn’t everything designed and created as simple as a toilet room?
This is one of the only rooms and spaces in the world where you only find exactly what you need for the job and nothing else. No rubbish, no extra stupid information, just 3 simple things: a toilet, toilet paper and a little sink to wash your hands. These 3 things can easily be compared to 3 actions: brew, act, finish.
How is it possible that my emails are blocked by spam filters?
I got this question from a few friends and a client and this are the things you can do:
Check your newsletter/email on a spam checker tool
Programmers heaven spamchecker
Lyris contentchecker
The problem for the client was the subject line, in order to get a correct and acceptable subject you need to think carefully about it.
A spam filter recognizes capitals and exclamation marks and blocks your mail on them, so try to avoid that.
Make sure your mail/subject doesn’t contain the words on the list you can find here
And also a few others:
Good luck.
Feb 5
A lot of programmers seem to hate the layout part of the job. Well if you work in a big company you probably won’t do the two jobs, but in some cases, or when you work in a small company (ex 1-5 employees) you have to do them both (layout and programming). And for those guys, it isn’t always easy to have inspiration right away, well there is a solution.
Here are a few sites that have a huge portfolio with nice layout sites. You can grab the css in some cases, and that’s the interesting part of it.
Take a look at them.
cssmania
cssremix/
cssimport
designsnack
Anyone got a better idea to get inspiration? Feel free to add your way of working in the comments.
A lot of people create easy forms but don’t think it trough before designing the page. I listed 5 useful attributes/elements a lot of people intend to forget or simply don’t know why they are using it.
Use get or post to send a form
Get will append the form data to the URL that is set in the action attribute of the form and is used when the form is idempotent. For example on search forms.
Post will not append it to the URL but sent it in the body of the form. It should be used when we are modifying a database or doing a subscription.
What is enctype?
This attribute is used to submit the form to the server; it is only needed when using post. Whenever you use a file field in your form you should set the enctype value to multipart/form-data, otherwise it uses the default value application/x-www-form-urlencoded.
Use tabindex
This creates an order when going from one field to the next using your tab button. When creating complex forms, this might come in quite handy. It creates the opportunity for the developer to indicate the order the form needs to be completed. Every field in the form gets a ‘tabindex’ value starting from 0 with a maximum of 32767.
Connect a label to a field
It’s always handy to have a label for each input field, so you can click on the label and the cursor automatically gets positioned in the input field. The only thing to do is put a ‘for’ attribute in the label and give it the id of the corresponding field as value. Easy and Handy for users
Fieldset and legend
This allows you to thematically group your form elements. The ‘legend’ element gives you the opportunity to create a title on each fieldset and has to be put in between the fieldset tags. Use css styling to create a nice design for the fieldset.
Greetings K.
A lot of people don’t really know when to use what kind of elements to build up an HTML page therefore I would like to take the time to explain tables and div elements.
Tables are created to display data, they are built for it and that’s the only thing they are good for. To explain this we can take a look at the elements that a table can contain. Thead (again in tags <thead></thead>) contains the header row information of a table, tfoot contains the footer or bottom row of a table and tbody contains the body or data of a table. The easy thing about tables is that you can change them very easily without breaking out of the design, the height is fit automatically and data is displayed correctly the first time you show it. Off course with a little bit of CSS you get the layout just like you want it to. For more information on this you can take a look at my earlier post (http://www.devexp.eu/?p=50)
Now what are div tags actually and why are they better to create a layout?
Div tags are nothing but logical divisions within the content of a page, they are built up with the <div> tag and make it easy to manage and style your HTML page just as you like. The cool thing about div tags is that you can name them individually, so you can affect them with CSS. As you can see the div will react a lot better with layout and give you all the possibilities you need.
The problem with tables is how unreadable and unusable they make your code. When you use a table as base to start from and create different rows and columns you will probably create other tables inside that table to display some content. And maybe you’ll end up with 3, 4 or even more tables within each other. When you have a page like that, please do take the time to look at the code and you’ll notice right away that it became very unreadable. When trying to change 1 column or 1 row you’ll see how complicated it gets. This method was very often used 3-4 years ago in web development but div tags are now getting the bigger hand in this now.
Let’s create a little example to illustrate this issue. This example will create data displayed like this:
| This is a Title | |
| aaa | bbb |
| cccc | |
<table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td colspan="2">This is a Title</td> </tr> <tr> <td width="50%">aaa</td> <td width="50%">bbb</td> </tr> <tr> <td colspan="2">cccc</td> </tr> </tbody></table>
When we try to create this same view built up with div tags you will get:
<div style="width: 100%;">This is a Title</div> <div style="width: 50%; float: left;">aaa</div> <div style="width: 50%; float: right;">bbb</div> <div style="width: 100%;">ccc</div>
I guess the example makes it pretty clear, you write less code and you are very flexible while using the div tags and it makes it very readable.
When creating pages, be sure to think about your design before starting and think of tables as data displayers, not as design tools. It will ask a lot of exercising when you’re not used to work with div tags, but after a while, you’ll see all their advantages. These tags and tables are built with a cause, tag for creating divisions in your page, tables for displaying data. Don’t mix them up.
You are currently browsing the archives for the Layout category.
Get all our updates directly: subscribe now