1stwebdesigner

---

Put Your Website on a Diet with Minifiers Posted: 01 Feb 2012 01:00 PM PST Did you know that every second delay on page loading results in a 7% reduction of conversion rate? Actually you lose 7% (maybe even more!) of sales without even noticing… Sounds bad, huh? I mean, you work carefully to put things in the right place, good call-to-actions, nice design, spend a few bucks with ads.. And then you lose 7% of sales just because you forgot to minify your CSS. We’ll, this is not going to happen again. We’ll put every future project that you work on a diet. And this one, won’t wait for next monday, or next january :) Here we’ll see amazing tips to reduce your files size and increase your site performance without affecting important things like image quality or a files readability for future edits. Grab your meter and let’s rock! Every Second Counts Before the practical stuff, I would like to share with you a few numbers about page loading X users satisfaction. I saw this infographic several months ago, but it’s still amazing. Click on it to see all the data, here’s what I liked most: If you hit 4 seconds of page loading you have 25% abandonment increase About 80% of users expect mobile pages to take almost the same amount of time as the desktop version Credits: Kissmetrics Image Optimizing – File formats & Tools So, the best way to optimize images starts with using the right file format. Basically we have 3 common formats for web (no, I won’t talk about .bmp, .svg, .tiff or anything else): JPEG – Really good for photos and bigger images GIF – Good for icons and images with fewer colors PNG – Good for small images with a lot of colors or when alpha channel is needed This is really just the basics, there is a lot of particularities for each image type that we won’t be talking about (right now). But you should be good with this, when you are exporting a psd to code a layout you should use .jpg for photos or bigger backgrounds, use .gif for smaller elements or elements with a restricted color palette (like simple icons or replacements for common inputs) and png where you can’t lose any data or small colorful images. I know many people say that png are bad and too big, but actually if you know how to use them they can give you a better effect (exactly what you designed) AND smaller or similar file size as gif or jpg. Let’s see some tips for each image type: JPG Minimizing JPG does “lossy compression”. That means that its algorithm stores data using much less disk space but will also save less info about your original file. Once compressed it’s impossible to decompress .jpg files. Your best choice in this case is to always keep the original file safe and just save copies. Ideal quality for jpg is pretty tricky, but most times you’ll be good with 60-80. When you take photos your camera stores metadata about the photo that you may not use in future. Also image size is often bigger than your entire screen. So get rid of useless data and reduce your image to what you really need. Irfranview is a small tool that can do this for you even as batch conversion for lots of files. Recently I heard about an amazing tool, called JPEGmini. They have an amazing compression algorithm that works pretty much like our eyes do, so it makes what gets our attention higher quality and what doesn’t, lower. You should give it a try! GIF Minimizing GIF files have a really small color table, ranging between 2 and 256. 256 may sound a good figure, but when you realize that jpg has up to 16 million colors, 256 isn’t that good, huh? What you can do to cut files size is to reduce their color palette. Above is an example where reducing a file from 128 to 64 colors we saved almost 30% of file size. PNG Minimizing PNG compression is similar to gif compression. You reduce the color palette and gain a few kbytes. In above example, png-24  instead of png-8, would be a huge file since it’s completely lossless, so you would have a perfect image, but pretty big. The best part of png-24 is full alpha channel, but we can handle that. Image Alpha gives us full alpha channel over PNG-8, so we have much smaller files but pretty good-looking for overlays and advanced effects. Code Compressors – HTML, CSS, JS Actually I’m not too much a code-compresser type. But images aren’t the only thing we should care about in our websites, HTML, CSS, JS files should be compressed too since they can eat precious bytes from your diet. Let’s take a look at a few options: minify – PHP solution HTML Compressor YUI compressor HTML Minifier Server caching Another good way to improve site loading is server-side caching. If you don’t use cache your page needs to be processed by the server every time it’s accessed, even if you don’t change your site for ages. So, here are the best WordPress Caching plugins: WP Super Cache W3 Total Cache DB Cache Reloaded Fix GZip, a.k.a. Compression Like a Boss I’m pretty sure you’ve heard about zip files. Or maybe .rar files or .7z files. Well, GZip is an implementation of GNU Zip, which does pretty much the same thing as ZIP files, but gives you a really good compression rate. The crazy idea here is to drastically reduce download time by sending users compressed files, instead of the uncompressed original ones, and their browser will handle the decompressing in much less time than if it had to download original files. Your hard work here is to paste this code into you .htaccess file: #Gzip <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript </ifmodule> #End Gzip Then you’re done! Well, hope it doesn’t take you more than 5 minutes :)

Divine Elemente Review and Contest: A PSD to WordPress Theme Software Posted: 01 Feb 2012 02:00 AM PST It appears that the world has just gotten better with the introduction of Content Management Systems like WordPress and their customizable themes, but in order to create a fully functioning WordPress theme you’ll need to be knowledgeable in both programming and design, right? Many people don’t have all the required knowledge and skills to build a custom theme from scratch, and that includes yours truly. There are many designers out there with great concepts for themes, but their works only remain as JPEGs or PSD files. Good thing there is Divine Elemente that can semi-automatize the conversion of your PSD to a functioning WordPress theme. Don’t forget to read through, there’s a CONTEST waiting for you here. Winners will receive a  License key! We will be choosing 3 winners! Brought to you by Divine-Project.com. Note: To begin with, you will be seeing a lot of product and service reviews from now on. I would just like to point out that we take this seriously and we review them absolutely for free when we deem the product to be very useful and innovative. If you are a developer or know someone who is, that has an awesome product/service then contact us! Divine’s Elemente is a new program that is still under careful development and is definitely a one of a kind program that many designers have been dreaming of since WordPress became mainstream. Open Google and search "PSD to Theme" and you’ll end up seeing Divine-Project.com as the top result, followed by services like CodeMyConcept that you have to pay for. Previously, the main go-to guy for designers are coders or services like CodeMyConcept. I have to admit that when I first heard about Elemente and what it does, I was skeptical. I mean, people once thought it would be quite impossible to use drag-and-drop software to create a website, right? The first thing you need to have is the creativity to design, then you need to have Adobe Photoshop. Currently Elemente only supports Adobe Photoshop. When you already have your design in place, the only thing you need to do now is to convert it. What I Like About Elemente 1. It’s cool design. Black and aqua (pardon my ignorance, I can’t specifically name the colors). This is more of a personal opinion. I’ve grown tired of software interfaces having only black and white. Elemente’s design is refreshing, and sometimes even soothing. 2. Spoon feeding. No coding required. Literally everything you might write in a CSS or PHP file is already in here. Including adjusting the size of the template, size of the content area, header, and sidebar. 3. Solid documentation and an active online community. 4. You can literally create a WordPress theme in less than 5 minutes if you already have the design. I have no problems with Elemente, aside from the pricing which I cannot afford, but that is just me. It only works on Windows, but there are talks that they’re working on making it available for Mac. Pricing starts from $139 for a personal license and $199 for Theme Developers, having unlimited website accounts and a 90% commission on the Themes Marketplace. Wait, they have a Themes Marketplace? Yes. You can actually make a living just creating themes and selling them in the marketplace. You can even sell your themes on other marketplaces like ThemeForest, although I believe you’ll have to do some customizing to be in line with their guidelines. Elemente is not hard to learn, all of the things you need to know are laid out in front of you, all you have to do is read first before trying anything or risk the chance of getting lost. How it works Below I will briefly walk you through the software. On the screenshot below you will see that after clicking on "Create a Blog Layout"  I was welcomed by a built-in guide. Step 1: Create a basic layout  Choosing option 1 will lead to a default layout that is filled with elements you can find in most themes. There you can add and remove the elements that you won’t be needing. This part is pretty much full of clicking and tweaking, manipulating the layers. Do not be disheartened when you try it yourself, since you will only be looking at black and white text and cells. Remember that this part is where the skeleton of the theme is made. Above you will see the main layout that you are free to edit. You can remove elements that you will not use on the theme. Sadly, I was confused at first so I will mention it now, that this is not the part where you move the elements around. Just leave them where they are. Adjusting the Grid This is where you adjust the size of the header, footer, post, sidebar, and content. I had fun playing with the sizes because it’s so easy! Above the Grid blocks you will see “Create PSD”, this is what you’ll be clicking once you are satisfied with the adjustments you’ve made on both the grids and the elements of the design. Adjusting the Elements This part is where you adjust the elements shown on your layout. By checking and unchecking the items, you are adding and removing certain elements that you won’t be needing. Step 2: Put graphics to groups After laying out the skeleton of your theme, it is now time to place graphics. It’s pretty much a dress-up game where you apply the graphics to their designated places. Yes, that is all. Above you will see how it works. The first image is the un-adjusted and the most basic layout which you can see on Step 1 under the name Billboard. The second image is the finished one, added with graphics. It’s just like tracing an image and making things fit. Step 3: Adjust properties & publish This is the part where you add the links, SEO stuff, ALT, CSS, meta information of your page, Google Analytics ID, change the background color if you fancy, margins, and a bunch of other stuff that can affect the entirety of your theme. After publishing, your theme is now ready to go. Free Themes created using Divine Elemente 2 muchwires Download It Here iPhone Download It Here But don’t take my word for it. Try it for yourself. Elemente has a 30–day trial that you can use instantly, just download and install. Don’t forget to tell your friends about it, I’m pretty sure many will find it very useful! Contest I know many of you have been waiting for this, and that many of that many actually just skipped through the whole thing above (I assure you, there’s a very vital piece of information in there that will make or break your chance to win a license key!). How to join: Register using our form below. Why? So that we’ll have an idea how many people will join and so that we can contact you for future design contests! Isn’t that cool? Design your template using Adobe Photoshop Download and install Elemente trial version Run Elemente and convert your PSD to a working WordPress theme! Submit your entry on or before February 18, 2012 submit a zip file containing everything to rean [at] 1stwebdesigner dot com write your full name in the body of the email don’t forget to include your portfolio website (wow!) Rules: The design should be yours. Only one entry per person. Trolls will be banned from future contests. How to Win: After gathering enough submissions, we will be posting them here. The 3 submissions with the most votes will win a license key from Divine Project! So, how do you gather more votes? 1stwebdesigner.com receives hundreds of thousands of visitors a day, if you’re lucky, many people will see your design and vote for it. But it does not stop there, you can call on your friends to vote for you, provided they have Van Gogh’s eye for art! Remember, this is the first contest of our explosive 2012!

You are subscribed to email updates from 1stwebdesigner - Graphic and Web Design Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610