Andrew Ckor

What facebook taught me

Fri, 04 May 2012 15:24:00 +0300

A few days ago I was working on a sticky header for thetudu, all I wanted was just a fixed position header that overlap the content on scrolling. So far sounds good and really easy, you don’t even want Javascript, some pure classic CSS code is the deal.
So let’s see how the code should look like:

HTML

<div class="header-container"/>
   <header class="header">
      <!-- content here -->
   </header>
</div>

And the CSS is pretty simple too

.header-container {
   min-width: 980px;
   height: 40px;
   position: fixed;
   left: 0;
   top: 0; 
   right: 0;
}

.header {
   width: 980px;
   margin: 0 auto;
}

Everything seems we are ready and if you test it, it works really good. The header is sticked at the top and the content scrolls beneath. I was thinking the same, when I got a big WOW, BOOM, WTF moment of my life, you know that time when you realize that everything you know is nothing and you just discover that your code all these years didn’t work… Is the same moment when I discovered the use of clearfix (where all my sites were invisible broken), or the time I learnt that evertyhing is an object in JS.

Wait a minute what are you talking about?

You will see right away. Now open the following pages and try to resize the window horizontally, in other words make it as thin as you can. Simulate a case that your users have a small screen, smaller than your site’s width, or maybe a mobile phone.

A cool task management app flow
Or woothemes which is a famous marketplace with best selling themes
Also one more best selling author Orman Clark

BOOM!
The content is hiding at the end of the window and there is no way to make it come back to the surface again, lost! This moment is when you realize that all your sticky headers/footers don’t work! And this is very important problem because in all cases above something crucial is missing, signup or purchase.

Personally I think that you should care for your visitors and examine all the possible aspects, this is what facebook does and the others don’t, this is what Dan Cederholm call handcrafted

But man, I have seen it work on facebook

I said the same words and I jumped straight forward on facebook to check their code.
And voila! Facebook’s header works really well.
Why? Because they check when you resize the window and if your window is smaller than their min-width the sticky header becomes a regular header and goes back at the top of the page, not the browser. Check this video to understand what I’m saying.

And how it works?

The idea is pretty simple and smart but more complex than the first case. So let’s see the differences in the markup and the CSS.

HTML

<div class="header-placeholder">
   <div class="header-container">
      <header>
         <!-- content here -->
      </header>
   </div>
</div>

First, we need one more div as placeholder. The placeholder holds an empty space for the header, so when the header is “flying over the content” and it’s time to landing back to the page as a regular one it needs some space for this.
The CSS is more complex and we’ll see it step by step.

Placeholder’s styling

.header-placeholder {
   height: 40px;
   /* It needs only height just to save the space we want */
}

Then we keep the old code as it is

.header-container {
   min-width: 980px;
   height: 40px;
   position: fixed;
   left: 0;
   top: 0; 
   right: 0;
}

.header {
   width: 980px;
   margin: 0 auto;
}

A now the magic, a media query to handle the window size:

@media only screen and (max-width: 979px) {
   .header-fixed {
      position: relative;
   }
}

Now if our window is less than 980px, the header will change back to static. If you want to support older browsers you have to use some Javascript to make it work.

Javascript (I’m using jQuery, you can do it with plain javascript too)

function checkSize(){
   if ( $(window).width() < 980 ){
      $('.header-container').addClass('is-static');
   }else {
      $('.header-container').removeClass('is-static');
   }
}();

/* Then check again on resize */
$(window).resize( checkSize );

Finally some extra CSS to handle is-static class

.is-static {
   position: relative;
}
/* If you use more specific selector on .header-container
e.g. #top .header-container, you need to use !important
e.g. position: relative !important; */

And that’s all! From now all your sticky headers/footers will work perfectly with the right way and I’m waiting to see a lot of websites implement this way. The problem is not exists in the websites that follow the Responsive Web Design technique, but we can’t make everything responsive, so facebook’s way will be useful for all of us.

Left your comment and write your thoughts and suggestions…

Noise texture generator updated to v2.1

Thu, 12 Apr 2012 14:35:00 +0300

It’s been a while since my last post in my blog and I have to say I missed it.
It’s 9 whole months!

The last months I’m working hard on a new app called thetudu a brand new category in the calendars and todo lists market and I’m sure you will love it! (You can see some screenshots on my dribbble)

But enough with thetudu lets go back to the main subject that is the new noise texture generator. The pas months a lot of people used it and tweeted about this and I’m happy that this small handy tool helps so many people to do their job faster. This kind of popularity made me think to add new features into the app and that the new version. I’m listing the features below:

New density slider

The new density slider helps you make the noise less dense in case you need it. (Need some improvements and some smarter generating but it’s really helpful)

New transparency switcher

On the first version of NTG the final image was transparent (without background). After the major update to v2 the final image became colored to be easier to use it. Now there is a checkbox that YOU DECIDE if you want background color or not on the final image.

Settings saving

When you’re using the NTG, if your browser close accidentally, you come back your settings are still there. Same happens if you visit the page in the future, because of HTML5 localStorage API that let us save the settings locally in your browser.

These were the new major features on NTG, they also made a lot of code improvements in both of JS and CSS sides.

What for the future?

I’m thinking a lot of new features to implement which are need time. My first and most important priority on my to-do list, is to create a github repository so anyone can help on NTG building and improvement.

Visit noise texture generator

New Sitepoint Book: Build Mobile Develop Websites and Apps for Smart Devices

Mon, 20 Jun 2011 14:06:00 +0300

As my close friends know I love Sitepoint’s books. I love them because they teach to everyone all the web trends and programming languages, with very well structured books and easy to read language for everyone from the very amateur to the most intermediate guy. The last very good example is the latest book that they released HTML5 & CSS3 for the Real World (that I suggest you to buy).

So, as I tell to my twitter followers few minutes ago Sitepoint is about to release a new cool book that I was looking for that kind of book for the last month. The book is called Build Mobile: Develop Websites and Apps for Smart Devices:

The main sections that book focuses are:

Learn the fundamental rules if great mobile UI design
Responsive layouts are smart layouts
Get that ‘native app’ feel on any device
Get the most out of every device
Offer powerful native applications to different OS’s
View Table of Contents

I think it will be a great book and I suggest you to pre-order it you save $4.34 :P. Me, I will definitely buy the the bundle version (eBook + Printed) to have it also in my iPad. :)

Subscribe to my RSS Feed to see my review after book’s release.

Forrst Invite Giveaway!

Sun, 01 May 2011 16:44:00 +0300

Hello everyone!
Yesterday forrst team gave me an invite and now I share it with you!

So if your are designer leave your comment:
with your valid email address, a link to your portfolio or maybe some links with your work.

Be sure your not developer!

Have Fun!

Make jQuery tipTip plugin cross browser

Sat, 30 Apr 2011 15:09:00 +0300

jQuery tipTip is a Drew Wilson’s plugin that I love and I use it in 90% of my projects. But because I use firefox, I found a small design problem in Tooltip. The background color is not the same, look at the differences:

You can see that the -webkit- browsers render the tooltip with a light gradient in contrast with firefox that hasn’t got gradient background.
How to solve this problem?

Just open the tipTip css file and find the #tiptip_content selector and add this two attributes under -webkit-gradient- property

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2), transparent);
background-image: linear-gradient(top, rgba(255, 255, 255, .2), transparent);

That’s it your tipTip tooltip works correctly and with same color in all major browsers.

HTML5 and CSS3: Develop with Tommorow's Standards Today (Unboxing & Review)

Thu, 28 Apr 2011 19:14:00 +0300

I’ve just come back home from easter holidays and i found in my mailbox a book that i had purchased 2 weeks ago from amazon. Which Book?

HTML5 & CSS3 : Develop with Tomorrow’s Standards Today

With a first look the book is totally designer non-friendly!
It’s a classic Pragmatic Programmers book, with black & white content and full of text pages. The content is a lot and i think that nobody read it all, but it’s a great book for reference as I mentioned in my Amazon review!

When you have stuck, you can navigate fast and easy through the chapters and find the solution to your problem. I especially like the fact that the book’s title is totally TRUE, in every single example they give you a fallback code how to implement the example now days with current standards and technology.

I bought this book with an amazon gift card and i don’t know if i want to pay to buy it, but it’s a good choice if you have $20 in your piggy money box.

Happy Easter Everyone!

Fri, 22 Apr 2011 18:50:00 +0300

Easter is 2 days away, so in my free time after a lot of Angry Birds Seasons (Easter) gaming, I made the following poster!

You can download it free, the bird is full vector so use it wherever you want!

Happy Easter & Holidays to everyone! Have Fun and play Angry Birds…

Download it

Using Image Sprites, the right way

Sat, 16 Apr 2011 01:26:00 +0300

In this article, I will not taught you how to use image Sprites but how to use them correct!

As you already know the right way to create a lightweight and fast sprite image is to put all small images and graphic parts in one image. A lot of designers (including me) stuff the sprite image a lot and they didn’t leave whitespace between images, this is good if you see your website from a pc.

But have you ever see your (extra stuffed sprite image) website from a mobile device like iPad or iPhone? If you don’t, then in the following images you will realize that the method mentioned above is completely wrong!

Let’s see some famous websites from my iPad:

www.mediatemple.net

www.dmdthebook.com

www.fancybox.net

So, can you see those “1 pixel” lines? That’s the problem! Mobile devices, because of scaling effect that doing to achieve the best presentation of a web page, they can’t render the absolute dimensions of an element. If your images inside the sprite image are too close you will have that ugly “1 pixel” line.

The solution

Yes of course there is a really easy solution; place your images in such a way that the minimum distance between them are 1-2 pixels, like the sprite image below:

That’s it, hope you guys enjoyed this article!

20 Free Web 2.0 Gradients

Thu, 14 Apr 2011 14:52:00 +0300

This is my real first post and i would like to share with you this gradient pack! It’s totally free to download it and use it.

Its appropriate to speed up your productivity and and you can use it for buttons background or what you want.

Download

Hello world!

Tue, 12 Apr 2011 22:13:00 +0300

Hello World from my new blog!

This is my first post and i let you know that in future I will post a lot of simple and useful tutorials & freebies, to make your life easier and your work faster!

So keep in touch…
Goodbye