Request a tutorial or article!

Jan
22

11 Comments - LEAVE A COMMENT

What would you like to read about in the coming months? Let me know in the comments what type of articles, tutorials or collection of cool stuff you would like to read about!

Jump to Comments

11 Responses to Request a tutorial or article!

  1. Rob says:

    I’d be interested in your views on maintaining css files for very large sites. Especially legacy stuff (I.e. It’s a mess) and sites where less css and similar frameworks are not available.

  2. I would love to see more tutorials on how to slice a psd file and convert to html/css. I have found lots of tutorials but they do not explain why you do it, they just have you enter the code without explaining why you do it in that way.

    Hopefully this makes sense LOL. It’s late and need sleep. Thank you for asking our opinions.

  3. Lindsey says:

    I have long, long wanted to do such a tutorial. I’m going to work on a series of posts, and hopefully I can easily and clearly explain the process I go through taking a design provided to me and breaking it down into HTML/CSS that reflects the PSD as close as possible across all browsers! Thanks for your input, it is very much appreciated!

  4. Lindsey says:

    @Rob – that is such a deep subject, to this day on certain projects I still struggle with messy codes that were created either by me (yep, sometimes even I am not organized, :) ) or by previous project managers. Thanks for the suggestion!

  5. Hardik says:

    Hi Lindsey!! I must say you are really good at explaining difficult topics in a very easy way..Thanks for all the wonderful articles they are all really helpful!!

    I would like to learn more about cross browser compatibility, related to positioning of elements (margin,padding,adding extra div and span).How shall I go about designing? or If you have any link or basic steps which should be followed.
    As I face loads of issues and go mad googling about it.

    I would also like to know about commonly used plug-ins or libraries(effects which would make a page look more effective) which would save time while designing a page.

    Thanks!! :)

  6. K@rthik says:

    Hi Lindsey… Your blog is really awesome. Newbies can learn lot from your blog.

    I would like to know about how to integrate Google fonts locally in my website. Is that possible?

  7. Lindsey says:

    That is most definitely possible! If you visit the Google Webfonts repository, you can choose which fonts you want and google will provide you with a link to the font, and you can just pop in the font name they provide to you within your stylesheet. I will definitely work on a more in depth explanation of that possible later today or tomorrow!

  8. K@rthik says:

    Thanks you sis. Actually i would like those fonts in my directory and load those in my website. B’coz each and every time it send request to Google which may slow down my site performance. So i went in search how of downloading those fonts and i found this link Google Font Directory. Now i need to know how to load it from my local directory. Thanks in advance :)

  9. Lindsey says:

    I would have to disagree with you there. Using the Google provided links for web fonts would boost the performance since it’s calling the fonts from the Google servers instead of your own. Having the fonts load from your server may be slower, especially if you are going to be using multiple fonts. I used Google hosted files for a variety of things, from web fonts to linking to the latest jQuery libraries and have never had any performance issues. Not to mention CSSgirl uses Typekit to serve fonts, and I have never had an issue with load times. I also have worked on many sites using other outside font hosting services and again, I think it actually is better to do so since the server load and calls to the fonts are sent outside to a service that specializes in serving up those web fonts. Aside from the Google web fonts, check out Typekit, Fontdeck, WebINK or even Fonts.com which all specialize in these services. I would highly recommend that you use

    That being said, if you are really dead set on self hosting your fonts you first need to have the web font versions of these fonts. You can’t just call the one file that you will find in the link you posted above from the google repository. So none of those fonts will work like that. You may want to check out Font Squirrel – they don’t have all of the same fonts as the Google fonts directory, but they have downloadable kits of the files you will need if you choose their fonts.

    Anyway, once you have a font you like, you will need to upload those files. I generally like to house them in a folder named fonts if I am self-hosting. Font Squirrel provides you with the CSS you need to call the font in your stylesheet. For example Deutsch Gothic’s CSS looks like this:


    @font-face {
    font-family: 'DeutschGothicNormal';
    src: url('Deutsch-webfont.eot');
    src: url('Deutsch-webfont.eot?#iefix') format('embedded-opentype'),
    url('Deutsch-webfont.woff') format('woff'),
    url('Deutsch-webfont.ttf') format('truetype'),
    url('Deutsch-webfont.svg#DeutschGothicNormal') format('svg');
    font-weight: normal;
    font-style: normal;

    }

    Remember when using the code above if you do not have the fonts in the same directory as your CSS file you will have to change all of the urls to the correct ones.

    Now, once you call that in your CSS, you will need to call the font-family to whatever selectors/classes/etc you want to use them on – like so:

    h1, h2, .fancy-title {font-family:DeutschGothicNormal, arial, sans-serif;}

    Always remember to set up fall-back fonts just in case your font doesn’t load correctly. Also, never use too many web fonts and weights on a page – that will slow it down no matter where you host it. Font Squirrel also has a tool that lets you upload a font and it will generate a @font-face kit
    for you, but always remember that not all fonts are available to use for free and you may need to purchase a license.

    Smashing Magazine has a good in-depth article on this too.

  10. k@rthik says:

    Thank you sis, now I understand. This is really helpful for my website.

  11. Robbie says:

    Hi Lindsey,
    Great site and articles first off, but secondly, I would like to know how to properly have a background image that spans 100% width with a proportional height that will fully cover a header that spans 100% of the browser. Hopefully that makes sense, but I’m looking for a full-screen background image, just one that will work on a div for a full browser width. The caveat is that I want to know how to do it across all browsers even IE 8 and below if possible.
    Thanks for the opportunity to write :-)

Leave a Reply

Your email address will not be published. Required fields are marked *