articles on

CSS Quick Tricks #1 - Where to put your CSS

Apart from the awesome design you get fed with here, it is time to start a new series! CSS Quick Tricks! To be honest, I didn't really know where to start, so I thought I'd start at something simple, and then, as we move on, we get in to more advanced topics on CSS. For this quick trick, I'm going to teach you where you can place your CSS, the most efficient way. Where to place your CSS In CSS, there are different ways to put it in function; Inline, Internal (or "Embedded") and External. You've probably used them all, at least one time. What's the difference? How can this question better be answered than with some pieces of code? With an external stylesheet, you create a link to a stylesheet. This is by far the most efficient way when you have multiple pages, running on 1 CSS file. To do this, in the head section of your html document, place this line of code: <link rel="stylesheet" type="text/css" link="directory/file.css" /> As you can see, we've literally created a link to a stylesheet, that is not located in the HTML, or in other words; Is external. With an internal stylesheet, you place the whole stylesheet inside the HTML. This is again done inside the head tag, but in a different way. The reason you might want to put styles inside your HTML, may be, because one page in particular may need some seperate styling, which can cause problems on other pages, or if you just don't want to increase the file size of your CSS document. The right way to place a style(sheet) internally is: <style rel="stylesheet"> * { margin: 0px; padding: 0px; } </style> Left over is the inline way, the reason you use this may be, that just a certain element needs f.e. a red color. However, take my advice; When styling a page, do NOT use this to style your whole page, but just for the little pieces that you couldn't be bothered about in your stylesheet. The way you use this way of CSS styling (some may not even call it CSS) is as follows: <div style="background-color: #fff;"> NOTE: This is just an example. Every CSS selector in here, and you can use it with every HTML element. But what way, is the best way? Well, there's no real answer to this question, because it depends on the way you are going to use it. But when you want to use CSS most efficiently, I suggest using the followng guidelines: If you are going to style multiple pages with one stylesheet, use the external way, and you may even want to use this way on a single page. This may prevent having issues, when the website needs a style update, or some little tweaking. If you just need to style a few elements that were left out on the original stylesheet, for whatever reason, use the embedded way. Like this, you won't increase the total file size of other pages not needing the additional styling, and thus decrease loading time for other pages. If you just need to style a single paragraph tag (or something similar), that neither external nor embedded stylesheets are worth mentioning, use the inline way. And again, take my advice, do NOT use this to style whole pages, it will give a lot of unnecessary code, and when updating/tweaking a page, you will be busy for ages. Conclusion I hope you liked this first one in the new series, so I can do many more! Also, suggestions or questions are always welcome, so I have some inspiration to write about. Thanks!

Interview with Stephane Munnier aka Goanna

Check out this interview with the Flash Masters Stephane Munnier aka Goanna, the French designer who lives in Brazil and does work for all parts of the globe. Plus, he gives us all access to his recent project vouDo! Design. Who is Goanna? Stephane Munnier aka Goana, 35 year old born in France, now lives in Rio de Janeiro Brazil Flash Designer/ Web Art Director. Work as a freelancer since 2004. Goana is a Flash masters making his designs very unique and definitely very interesting as you can see: For more visit Tell us about your project "vouDo! Design". The project besides anything is a experimentation, I can be defined as a virtual studio, A collective of 5 designers, all freelancers. And the formation goes like this: Stéphane Munnier - Founder and Flash Designer (Rio de Janeiro) Sébastien Larreur - Motion Designer (New York) Jean Christophe Quillez - Sound Designer (Paris) Sylvain Briand -Action script 3 Programmer and 3D Flash (Lyon) Florent Jean -Action Script 3 Programmer (Lyon) The Idea was to be united so we could present ourselves to our clients with more competence, and complement any needs in different areas, like mobile and other types of multimedia productions, but the biggest challenge was to have everybody working together being so far away from each other. For more visit How long you guys been together now and is the distance still a challenge for the team? The team was created in April 2008, when I started looking for someone to work with me in some projects and I ended up hiring Sebastien, our motion designer, after he presented to me a video about stop motion on the web that got him a place on the team ... After that we Sylvain got on the team, me and him worked before back in 2007 on a web project where I did the animation and he did the programming. Then we started getting proposals of a lot of different designers that would like to be part of the team, Florent got in when he helped me to make the vouDo! Design website, after that It became more official. And Jean-Christophe came in to complete the team. Now days we don't have a lot of problems communicating anymore, we use skype and emails, sometimes I even forget that telephones exist. The only problem is the time difference between some of us but we try to get around that. And with the clients is the same process. Sometimes the clients feel a need of meeting with someone and when that happens I have to explain the way we work and showing our references they end up understanding and trusting us to go futher with the project our ways. Now show us some work that you guys done together. So far we haven't done a lot of projects together but we use the team to gather up our portfolios and get more jobs for ourselves, here are the latest web work we've done, if you check on the website there is a some motion design, sound design, animation and more, we cover all design areas you can imagine. I hope everyone like my stuff, check out my websites for more work and more inspirations, if anything needed you know where to find me, Thank you.

WebTech#4 - Installing Wordpress

In my last article we discussed installing a web server (Apache), PHP, MySQL and securing your server for live environment. This time around, I would like to go even further and talk about setting up a Wordpress Blog. Wordpress is probably the most popular blogging tool on the web, but the setup steps given on the Wordpress site can be a little unclear for a novice user. So let's jump right in and start setting up the blog. Before doing anything, we have to set up the database Wordpress will use to store content. Since MySQL is already installed we can connect to the monitor and use is to create the database. The alternative would be to use a database administration tool such as phpMyAdmin. Start by connecting to MySQL as root using the password you specified during MySQL installation # mysql -u root -p You will get a new prompt that will let you perform MySQL operations. Go ahead and create a new database and a new user that will have privileges to access and modify it mysql> CREATE DATABASE wordpress; mysql> GRANT ALL PRIVILEGES ON wordpress.* TO 'wpadmin'@'localhost' IDENTIFIED BY 'somepassword’ WITH GRANT OPTION; mysql> exit; After your database is created and configured, download and extract the latest version from the Wordpress site # wget # tar -xvf latest.tar.gz Move into the Wordpress directory and rename the wp-config-sample.php file to wp-config.php. # cd wordpress # mv wp-config-sample.php wp-config.php Edit wp-config.php and change the login information to match your database // ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('DB_NAME', 'wordpress'); /** MySQL database username */ define('DB_USER', 'wpadmin'); /** MySQL database password */ define('DB_PASSWORD', 'somepassword'); /** MySQL hostname */ define('DB_HOST', 'localhost'); Now move your wordpress directory to your web root # mv * /var/www/ You can now access your blog from your server's IP or domain name, if you registered one. You will be prompted with a short configuration wizard that will let you name your blog and set your email address, as well as give you a temporary password. After the wizard is completed you can log in and create content. Also, don't forget to change your password. You're all set, now go out there and start blogging!

Web Picks #3: GRASS

Web Picks is a new series here on Abduzeedo. The idea of the articles is to choose a subject, and present photography, artwork, designs, illustrations and tutorials we find on the topic; and put them together. When designing we tend to forget to look at mediums other than the one we are currently working in. We hope this series will illustrate the many dimensions a single subject can have, and provide cross-format insight for each subject Im sorry, I figured out that It takes more time than i thought, to finish the web picks. That's why I doing these articles now together with Paul0v2, so we can be faster with the coming topic. This time I picked "grass" and i found some really amazing stuff. And for the first time I started posting brushes. Enjoy these. PHOTOGRAPHY DESIGNS BRUSHES 6 HIGH DEFINITION GRASS BRUSHES EIGHT GRASS BRUSHES FOUR GRASS BRUSHES GRASS BRUSHES TUTORIALS CREATE REALISTIC GRASS BRUSH ADD GRASS TO A 3D SCENE CREATE A SPECTACULAR GRASS TEXT EFFECT PAINTING GRASS CREATE AN AWESOME GRASS TEXTURE IN PHOTOSHOP NATURAL GRASS - DAY OR NIGHT SPLASHY LEAF WALLPAPER CREATE A FANTSY PHOTO MANIPULATION Web Picks is going to continue and we need your help. If you want to add designs, illustrations, photography or any kind of art send me an email: aloa[at] Next topic: WOOD

Web Design Inspiration: Bacardi Mojito

When I looked for artists for the Web Pick's Water article I found this awesome water website but forgot to post it. It's the polish website for Bacardi Mojito. The website was created by Bartek Rozbicki and Peter Jaworowski Click here for the website.

Wood in Web Design

Another day I was talking to a friend of my, and he told me that he would love to see more posts about web design here at Abduzeedo. When he told me that, I totally understood that we're kind of posting just about photography and illustration... and only Fabiano is doing something about web with his tutorials and links in the Best of the Week series. So today, web design it is! :D When making a new site design, most of us try to figure out what kind of theme to go with... and there are plenty: space (lol), water, wood, colorish, glowing and shinning stuff, etc, etc. The list is just endless. One of my favorite design elements is wood! It's really great how you can manage to make a sweet design with wood background, static or not (I do prefer static). Anyways, here are some hand picked websites that got plenty of wood for your design needs.

Cool Web Image Editor: Sumopaint

We've seen some cool web apps come out this year, like Aviary, and now I've came to know a new one: Sumopaint. It's simpler than Aviary, but you can still make some cool stuff there. Most of the images in their gallery remind me a lot of the expressionism school, which Van Gogh was part of. I recommend to you all to visit there and play around with it. As our friend Mikko suggested, try out the symmetry tool with the gravity on. I must say, the results are really cool. Cheers!

Inspiration: Diego Zambrano

Diego Zambrano is a Brazilian designer who's been doing some great work. He's worked with big Brazilian companies, such as Skol, Claro, Sadia and Fiat. It's just great to see some awesome designs such as these... and I wonder how many people have visited the sites he developed. Probably millions. That's freakin' awesome. Visit him at Work for Food.

Best of the Week #12

Lots and lots of inspiration this week. A cool update is the Notes tool announced to Google Reader. But the greatest moment was yesterday, when we launched our first contest. Check it ou and join!! FRIDAY - 05/09 Abduzeedo Icon Group Contest Facebook Responds To MySpace With Facebook Connect Wii Fit: the 30 day test starts today Round Two of the International Poster Design Competition Has Begun! DIYer builds fully-functional NES controller coffee table, earns mad respect BUILT's Laptop Backpack keeps your files close, peripherals closer Zune headquarters mini-tour If all packaging looked like this, I'd buy more stuff. THURSDAY - 05/08 Novartis, Otrivin: Hounds Heineken DraughtKeg: Pizzas, CDs Now More Than Ever: 50 More Excellent Blog Designs Apple's iPhone coming to Latin America on America Movil 15 Great Examples of Web Typography 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars WEDNESDAY - 05/07 Typography on the Behance Network GreenPix Energy Media Wall Manbabies Back to Early 90s TUESDAY - 05/06 300 Images From 1800 Sites Help save the Frank Lloyd Wright designed Park Inn Hotel in Mason City Iowa Mix Cool Retro Curves Into Your Photographs 34 Stunning Abstract Designs PhotoshopDisasters - 3Fanta: You Really Don't Wanta MONDAY - 05/05 Google Reader Gets More Social: Now With Notes 6 Places that Flash Does Not Belong Pixels Go Mad - The Celebration Of Pixel Art Baby Car Logos Packaging design inspiration - Part II 16 Ways to Keep A Razor- Sharp Focus at Work Adobe’s newest kid on the block - Photoshop Express

The Evolution of Internet brings us as cool article about how the Internet has evolved in the past 10 years. It's amazing to see the design of cool companies have changed a lot, but the design of those with an 'old soul' didn't get much different. It also makes us wonder how internet may look in 10 years from now. Would we wear special 3D glasses, or maybe wear a full virtual really set? That makes me worry, thinking that maybe the future of internet might be something like Second Life. For the full article, please visit The CNN Evolution The of Apple Evolution The Nike Evolution (Keanu would say: Whoa) Author: Paulo Antunes | If you want to write an article and have it published here send it via email to abduzeedo[at]

The Best of the Week #2

The last week was full of cool things, John Hicks and the gorilla icon for Silverback, the new BBC beta site, and the very useful 10 Phrases Every Freelancer Should Kick-Out of Their Vocabulary article from Freelanceswitch are just three examples, below we list some of the best articles we read during this past week. If we missed something that you think it's really good, leave a comment and we will check that out 02/29, Friday Smashing Magazine Best of February Confirmed: Live Video On YouTube This Year Fentix Cube Evolution of Dance Tribute jQuery Tutorials for Designers 02/28, Thursday En Bloc Adobe Cards Silverback 10 Phrases Every Freelancer Should Kick-Out of Their Vocabulary Google Docs Gets A Visual Overhaul, Now More Office Like Increase Your Morning Productivity with the 10 O'Clock Rule Idea: A new typography term BBC Kevin Ledo: The Guiding Light 37signals Featured in Wired (March 2008 issue) 02/27, Wednesday Sarah France: Method Aesthetically loyal 02/26, Tuesday Navigation Menus: Trends and Examples Less is More: 10 Methods to Be More Productive, More Profitable, and Happier Arcade Fire Poster, MidAmerican Tour Side 1 6 Adobe AIR Apps to Check Out Shintaro Kago cover for Vice Magazine AIGA 70 of the best logo design resources Write Just One Thing Today, and Write It Well 02/25, Monday Progress

The Best of the Week #1

Every week we get to visit hundreds of sites, many of them catch our attention: a cool image, works and portfolio that impress us, interesting news and also other miscellaneous stuff. So we've decided to set apart the best content and share with you at the end of every week. Now, let's start the list with the 20 best links we've visited during this week. semana começando pelos mais recentes. Friday - Feb 22Winners of the What is Graphic design poster competition Friday - Feb 22iLK Friday - Feb 22Insane Soccer Ad Thursday - Feb 21Stamps Of Helvetia Thursday - Feb 21The Next Five Years of Website Freelancing Thursday - Feb 21The 45 More Excellent Blog Designs Wednesday - Feb 20Mulheres Barbadas update Wednesday - Feb 20Freelancers Beware of Receiving Payments via Credit Card through PayPal Wednesday - Feb 20Introducing The Most Advanced News Site On The Planet Wednesday - Feb 20Meet The World Wednesday - Feb 20Sanna Annukka Wednesday - Feb 20Put graphic design as home decoration Tuesday - Feb 19Sony PlayStation 3 tops Microsoft Xbox 360 in sales for first time; Nintendo Wii still leads Tuesday - Feb 19AIGA Los Angeles Tuesday - Feb 19In Graphics We Trust | Update Tuesday - Feb 19FNAC Tuesday - Feb 19Rai Beijing Olympics Tuesday - Feb 19All about Paul Rand Tuesday - Feb 19Brand new ilovedust portfolio Monday - Feb 18All Jobs - Smashing Jobs And if you think we missed a cool link, please tell us! Author: Fabiano Meneghetti | If you want to write an article and have it published here send it via email to abduzeedo[at]

Issuu - Read the world. Publish the world.

Do you wish you could transform those boring .pdf files into cool web-based books or even to find some cool books to look at? Well, I've got just the right tool for you: Issuu. "Issuu is an online publishing service and a creative community dedicated to publishing. With Issuu (pronounced 'issue') anyone can convert their PDF documents into interactive online publications. It only takes a minute and it's free. Forever." There, you'll find all sorts of books: from architeture to comics. From art to photography. You may visit the site clicking here. Author: Paulo Antunes | If you want to write an article and have it published here send it via email to abduzeedo[at]

Testing sites in different browsers

I've been working on several projects for the web lately and I have always had to test them in several browsers. That could be very frustrating most of the times, mainly because as a Mac user I must test them every time on Windows and Internet Explorer 6 and 7.With virtualization tools like VMWare, Parallels, Virtualbox and others I thought my problems would have ended. Of course that big concern of testing in a PC ended, now I’m able to open Windows and test my sites in IE 6 and 7. However my machine gets really slow, some times freezes, what makes the user experience a bit disappointing.Fortunately, after some searches I came across with this really useful website called IE NetRender, where allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5,This web rendering tool is ideally suited for web designers working on Apple iMac and Linux workstations. It allows to verify web designs natively on all popular Internet Explorer versions, without the need to set aside several physical or virtual Microsoft Windows PCs just for that purpose.It’s definitely worth checking that out. An essential tool for those who work as web designers. I captured some screens of my site rendered by IE 7 and 5.5 via IE NetRender, you can check the photos below.Abduzeedo blog rendered in IE 7 via IE NetRender Abduzeedo blog rendered in IE 55 via IE NetRender

New Design

Last night I finished the transition to the new version of my blog. It's been like 4 months since the first release, although I really liked the previous version, I had to make some adjustments in the design.When I designed the first version, I had no idea about who would read it, if someone would read it. However one of the most important thing, which resolution would they use, browser, system and stuff like that. Analyzing my blog's web traffic for the last 4 months I noticed some issues with my blog's design.Resolutions: Firstly, my blog was designed for a minimum resolution of 800x600, after 4 months, no one has visited it using that resolution, besides, the most used resolution is 1280x1024.  Browsers & Platforms: I thought Internet Explorer would be the first in the list, and for my surprise, Firefox has been the most used browser when visiting my blog. Now talking about platforms, Windows continues to dominate the market.  The new designThe new version is totally different from the previous, starting from the logo that I changed to make it simpler and easier to reproduce, I think I’m going to make some stickers. The color scheme has changed too, now I’m using a brown and orange combination. However the most important thing was the better use of screen, white spaces and to make it more organized. I hope everybody enjoys the new design, and feedback is really appreciated.