behance professional portfolio site


Just received this as a behance notification and it does seem worth sharing:

Admittedly, the price for this (11USD per month) is rather on the steep side, considering that you could get a fully hosted site for about half the price at places like Bluehost, or indeed that with a bit of ingenuity you could very easily set up a similar site right here on blogspot for free.

However, on the upside, you do get the considerable professional design expertise of the behance team in the shape of some beautiful and fully customizable templates, which could save a lot of time. And, probably most importantly, given that behance is one of the highest regarded design portals online my guess would be that having a site hosted by them would be likely to get you exposure you might not get all too easily through a standalone site.

.................................................................................................................................

semi-transparent and/or image background for all posts in blogspot

This is a step by step tutorial for creating a transparent/image background for the entire main posts section.

1- Creating a transparent .png:
Create a new photoshop (or whichever program you are using) file with 16x16 or 32x32 size, 72 resolution and tranparent background. Fill it with the color you wish to use, then change the opacity of the layer to a desired amount (a value between 70 to 90 is optimal). Save it for Web & Devices, making sure you have png24 and transparency selected. Now, upload it to somewhere (picasa etc.), so that you can have an url of the image which we will need later.

2- Template Designer:
Navigate to your blogger account's template designer tab. Select Advanced, here depending on your blogger template you will either have "Post Background" or "Background", first look for Post Background if you don't have it, select the other one.

For people with Post Background
From the color picker of Background Color, put a tick to transparent. If you don't want borders, do the same for Border Color.

For people with Background
From the color picker of Main Background, put a tick to transparent.

Finally apply to blog.
3- Edit HTML
Under the Edit HTML tab, look for this piece of code,

For people with Post Background in the previous step,
find,
.date-outer {
in it there is a line like this,
background-color: $(post.background.color);
replace it with this line changing the "image_url" with the actual url of your image
background: url(image_url) repeat;

For people with Background in the previous step,
find,
$(content.background.color.selector) {
in it there is a line like this,
background-color: $(content.background.color);
replace it with the following changing the "image_url" with the actual url of your image
background: url(image_url) repeat;

.................................................................................................................................

how to get google to be totally in love with you... ;-)

What we were talking about just before the class broke up today, made into a little blog post for you:

1) Good, focused, (and if at all possible) original content. This is the one and only and penultimate thing that counts! Without good content, forget it, it just won't happen. What you have on your site simply has to be of interest to others - either specialist groups or general entertainment, but it has to be really good stuff! And my general hunch with this is that specialty sites are far more likely targets to get hits, since there is bound to be more search engine activity related to a specific topic, than there will be to general chit chat.

2) A large site will have more material for the search engine to find. Very simple logic really. If you have 100 posts it is far more likely that you wrote about something that somebody out there is searching for than if you have only 10. The larger the easypeasy site gets the more search engine results we get, no doubt about it. When we had only 10 posts, we had none. Nowadays with over 100 posts under our belts we have at least 5 or 6 a day and very often many more, sometimes as many as 20 even...

3) Make sure your site is structured well in terms of navigation. Even the best content in the world is useless if folk have to work too hard to get to it, they will simply not bother and leave and never come back. And needless to say, forget about them recommending it to anyone else... Read Selim's excellent post on navigation to get more insight on the matter here >>>

4) Post often and consistently. In other words, not silence for a whole month and then 10 posts all at once, but more like 3 posts a week, and every week. Remember that you can also write a whole batch and then pre-date them. I am not exactly sure how or why this makes a difference but a site which is consistently active seems to draw more traffic, a thing which I can tell very easily from the site stats of my own blogs. 

5) Make sure your meta tags are in perfect order. More on this here >>>

6) Make sure your post title comes before your blog title. More on this here >>>

7) Make sure you have a lot of links to other sites, either inside the posts or as sidebar elements: Your courtesy to others is likely to generate courtesy in return by them linking back to you - after all, this is how the internet works...

8) Use social networks efficiently. Tweet your blog and also post it on facebook, linkedin etc. Also if your site's content is at all relevant, start creative network accounts such as on youtube, Flickr, deviantart, vimeo etc. Use the groups within these domains to put out videos and photos and link these back to your site. 

9) Finally, be patient! It will take some time for people to find you - anything up to 6 months to even a year, depending on how fast your site is growing and on how good your content is. Usually you will hit the really big visitor numbers only after one of the major portals or blogs, one that covers the same area of interest on which you are focused, spots you and blogs you. This will take time. Just keep on posting and once you have enough good stuff it will happen - count on it.

.................................................................................................................................

embedding a flipbook into a blog with issuu


Last time I looked into this (which was a few months ago) it still wasn't possible to do so but I just found out that you can now embed flipbooks which you create with issuu into other domains! Gave it a try just now and as you can see above it works beautifully!

So, all you need to do is create a free account with issuu, make your flipbook by following the instructions on the site which involve combining the images of your left/right pages into a pdf which you then upload into your issuu library. Once the book has been crunched by the system it will be published, at which point you will find the embed icon (looks like this < >) under the thumbnail of the book. Make sure you have all the correct things checked on the menu which appears when you click on the tags (such as having the double page view as default!), then copy and paste everything into the HTML tab of the post editor and you are done! You can also change the height and width of whatever appears on your blog by playing with the values inside the embed code. If you do so remember to use a calculator so that the aspect ratio remains correct.

 Tip:  When you publish this there will be several text links which appear under the small flipbook on your site. If (like me) you do not want these text links simply delete the bottom part of the code, which will look something like this:
<div style="text-align: left; width: 420px;">
<a href="http://issuu.com/elifayiter/docs/ctrl_xyv?mode=embed&amp;viewMode=presentation&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&amp;showFlipBtn=true" target="_blank">Open publication</a> - Free <a href="http://issuu.com/" target="_blank">publishing</a> - <a href="http://issuu.com/search?q=computer" target="_blank">More computer</a></div>

.................................................................................................................................

navigate in style or fail miserably

Good navigation is the most important aspect of a well designed website. If the visitor is not presented with a clear navigation, it won't matter how well your site is designed, it is highly likely that they will leave your page in a matter of seconds. It is a very tough challenge to create a meaningful and unambiguous yet stylish navigation that allows users to view content easily.

Some of the most important rules of a good navigation are;

1- Visibility: Make sure that your navigation is one of the first things that catches the eye. Do not make it obscure. Don't let it get hidden because of clutter or problematic placement.

2- Consistency: Make certain it has a certain style and placement that it keeps on every page.

3- Clarity: Make sure that every item in the menu is %100 understandable. No one likes to guess where the link will take them. Use either clear names, or little explanations, hover titles are a good way as well. If you are using thumbnail images as links in your menu, make sure they are clarified one way or another.

4- Creativity: Creative navigation will always make your site stand out more, just make sure you don't overdo it, sometimes simplicity is the real creativity.

Good Examples of Stylish Navigation

It is both stylish and easy to use. Very clear menu with a classic top tier placement.



Clear well designed navigation. Nice use of typography.



This is especially for those designing blogs, very slick and clear navigation ina 3 column design. Nice use of sidebars and top level menu design.



A very good example of how to fit massive amounts of content into a navigation in a stylish way.

Clear, playful, hand-drawn and animated navigation.



Simplicity, minimalist design, left aligned side navigation.



Nice clear navigation.



Playful navigation consistent with the style and content of the page, usability is top-notch.



Very simple and very attractive, everything is easy to follow and you always get to where you want to go.



Creative way of categorization. Easy to follow, the only problem is it is a bit space consuming.



Interesting and creative menu design. Takes a little bit of getting used to but the filter and sorting menu is a must see.



Impressive use of top tier navigation, clear simple and yet stylish.



Good example of Apple inspired navigation, everything is consistent and clear.



Little explanations when you hover over the menu items is a great way of guiding your visitors through your site.



Another clear navigation



Very slick navigation. 2 tier top level navigation, the sub tier works especially nice in works section. It is a bit graphic heavy when you use the works next, previous project navigation, but it looks really cool.


Unconventional right-side tabbed navigation does actually work very well in this site. Scroll down to see how the navigation changes style beautifully.

Also see these...










And when it fails....




First of you are presented with bouncing links that kind of sattle later on. And guess what not everything that looks like a link is clickable, not a very satisyfying navigation for a visitor.



Seriously.. where is the navigation. Am I supposed click on those bottles, is that it?



Don't get fooled by the top lunch and dinner items, they are unclickable. There is a small thing under the disturbing video called navigation, well it seems to work if you refresh the page 10 times.



When simplicity fails miserably. Worst use of top tier navigation. It looks like a word document rather than a webpage. And that isn't the worst part, just go on, decrease the size of your browser window and see what happens.



Wow simply amazing, the middle menu runs away when you move your mouse to click. Plus the content font is so small that it is impossible to read. Check out the news section and you will see.



Menu items continuously change into images that don't give any clues to what they are connected. Very irritating navigation.

.................................................................................................................................

free flash photo galleries + free swf hosting

Just stumbled upon this:
A lot of these are freebies and some of them could look really cool on a custom designed header, or embedded into a page post as a photo gallery.

In order to be able to do this you will need to host your swf file somewhere - unless you have your own server or a remotely hosted site, that is. Here are a couple of places that seem to do the job, for free:

.................................................................................................................................

blogspot: unlocking the header widget so that you can place it in a different location

Oooops! A couple of posts ago I was talking about making a vertical header and completely forgot to mention something very important related to that: In order to move your header to a different location on the site you will have to do some sniffing around inside the HTML editor (with expanded widgets!), where you need to find this line:
<b:widget id='Header1' locked='true'
and change it to
<b:widget id='Header1' locked='false'

.................................................................................................................................

design + details: padding the widgets


Fairly self-explanatory image I would say... On the left is the default state and on the right is the one where I have tweaked padding values by placing this code in the CSS box on the Advanced Editor:

#Label1 {
padding: 24px;
padding-bottom: 8px;
}

The padding makes a huge difference as to how this looks. The strokes become much sleeker when they stop a bit short of the border, and the top and the bottom of the box is also sitting much better now that I no longer have that big space below the last line.

.................................................................................................................................
Subscribe to: Posts (Atom)