Skip to content

Posts from the ‘Design and Development’ Category

22
Apr
fontstruct

Making Fonts Made Easy With FontStruct

We all love fonts, don’t we? Stylish designs in which we can write our text. Ever thought about creating fonts of your own, with your designs? FontStruct will make it easy.

FontShop.com recently launched its new web 2.0 service called FontStruct. FontStruct is a free font-building tool.
FontStruct allows you to quickly construct fonts by using geometrical identities arranged in a grid base.

fontstruct

FontStruct’s custom font making feature is powered by its inline graphic tool which helps adding geometrical figures, shapes etc. to lower and upper case of the font you are making. While drawing font figures, in FontStruct referred as ‘FontStructions’, the tool lets the user see adjacent figures and relating shapes to make the font creation easy.

fontstruct1

FontStruct also allows the user to refer to some pre-made fonts for shape or mods suggestion. The drawback here is that the pre-made fonts are not listed in categories, making it hard for the user to check the correct pre-made font.
When its done, your ‘fontstruction’ created by the so called ‘fontstructor’ tool is saved and a high quality True-Type font is generated ready to be used.

FontStruct

About Rishi

Me? A Social-Web Enthusiast and Freelance Blogger.

24
Mar
statcounterglobalstats.jpg

Fed up of IE6? Tell your visitors to upgrade with sevenup

I really liked Internet Explorer 7 and love Internet Explorer 8 (yes you Firefox lovers, I love FF as well :) ). But, being a web designer since mid 2000, I’ve had the opportunity to design several sites for several browsers and it has always been a pain to support them all.

One really really really really painful browser is the infamous Internet Explorer 6. I have a strong feeling it is also one of the reason why IE has gained such a bad name among developers.

According to StatCounter Global Stats, IE6 is still being used by about 25% of the users, which is a sizable number and cannot be ignored.

StatCounterGlobalStats

Jason Clarke suggests that Microsoft release an update for IE6 for Windows 2000. I don’t think that will ever happen.

Hence, for web developers this still continues to be a painful experience in trying to ensure that their sites work in IE6. You can also check it for other versions of Internet Explorer if you are interested.

Or, you can prompt out a message to your users suggesting that it is high time they upgraded their Internet Explorer 6 to IE7 or even IE8.

This is where sevenup comes into play. SevenUp is a tiny JavaScript that you can embed in your page / site. Whenever a visitor using IE6 lands up on your site he / she will see a window like this.

SevenUp_0.2_Triggered_IE6

This is much better message that the really irritating buttons you see all over telling users to stop using Internet Explorer and switch to Firefox. (rant begins) I don’t see why I should stop using Internet Explorer 7 or IE8, just because you can’t code a site properly for the browser! (rant ends).

Another benefit of sevenup is that it is so tiny that users won’t even feel the impact while browsing through your site. Anyone who is not using IE6 will never see a message.

To implement this, download sevenup from the link below or from the Google Code page and add the following lines to any webpage you design. You’ll need to specify the source for the .js file correctly.

<script type="text/javascript" src="sevenup.0.2.min.js"></script>

<body onload="sevenUp.test()">

This is still very much in its infancy so expect a few bugs here and there. You may need to update at regular intervals as the author releases updates. But, it is a good start :)

- Download sevenup.0.2.js
- Download sevenup.0.2.min.js

About Ajay

A die-hard blogger, web developer, biker, singer, geek, non-stop talker, foodie, movie freak are just some of the words that begin to describe me.

11
Mar

Speed up your site with Scriptalizer.com

Aren’t we all trying very hard to speed up our websites. You’ll find several tips to speed up your site, but one thing that really works is using a single CSS and a single JS.

Whenever you have multiple CSS and JavaScript files, to download each file, your browser makes a separate request to the web server for each of these files. This entire process increases the time to load your file. Hence, by converting all the CSS files to a single file and all the JS files to a single file, you cut down the number of requests.

This is where Scriptalizer.com comes in.

What does it do?

Turn this…

<script type="text/javascript" src="/js/jquery/jquery.js"></script> <script type="text/javascript" src="/js/jquery/jquery.form.js"></script> <script type="text/javascript" src="/js/myOwnScriptFile.js"></script>
<link rel="stylesheet" href="/style/longstylesheet.css" type="text/css" /> <link rel="stylesheet" href="/style/anotherlongstylesheet.css" type="text/css" />

Into this…

<script type="text/javascript" src="/js/scriptalizer.js" ></script>
<link rel="stylesheet" href="/style/scriptalizer.css" type="text/css" />

Using Scriptalizer.com is really simple. All you need to do is upload your JS and CSS files to Scriptalizer and it will combine these into a single JS and a single CSS file respectively.

As an additional feature, it even minifies the resultant JS and CSS file to further reduce the total file size. Thus, the resultant is an extra speed boost to your site.

Sadly, the problem is that you need to upload your files, which is a manual process. So, it won’t work automatically with all the files on your site. However, on the plus side is that you need to do this only once.

Via: Andy Jarrett

About Ajay

A die-hard blogger, web developer, biker, singer, geek, non-stop talker, foodie, movie freak are just some of the words that begin to describe me.

31
Jan

Dynamic JavaScript with PHP

Early this morning, I released Top 10 – A Page Counter and Popular Posts plugin for WordPress. I detailed my experience while designing this plugin. The major problem that I faced while working with this plugin was with WP Super Cache. WP Super Cache creates a static file of your post and displays this to the viewer. As a result, any PHP code that is present in your WordPress blog template is executed only once and the cached file is then served to your visitor.

The initial version of Top 10 used PHP to record the page views as well as display them and so using WP Super Cache ensured that both of these would never increment.

This is where JavaScript with PHP comes in. I ended up using AJAX to record the page views. However, for displaying the count I chose to do so by serving the PHP file as a JavaScript file.

Here’s how you go about it.

Read more »

About Ajay

A die-hard blogger, web developer, biker, singer, geek, non-stop talker, foodie, movie freak are just some of the words that begin to describe me.

26
Jan
css3

CSS 3 – Making our life easier, one line of code at a time…

css3

There are plenty of articles out there written by great CSS masters that will tell you about what’s, why’s and who’s of CSS. So if you want an in-depth analysis of CSS you’d better off reading an article by Eric Meyer or by some of the other CSS greats out there.

This article is about bringing you up to speed with CSS 3 and how it makes the life of an average graphic designer who has to deal with css on a daily basis, easier.

In truth, I’m no CSS wizard. My CSS programming skills are just a little better than average, at best. I have no problems with converting a design into basic html and CSS and can even hack it for IE6, but that’s about it.

However, CSS 3 has made life a lot easier for most of us designers. And hopefully with the introduction of IE 8, IE 6 will gracefully go to its resting place and the internet will become a better place.

Here are some of the features of CSS 3, for more information you can always check out w3schools or css3.info.

  • You can now have rounded corners without having to use images. This is by far the most exciting feature of css 3, for me. You now don’t have to worry about creating images for all the rounded corners in your design. You can just program it in.
  • You can now have multiple background images for a single element. You no longer require multiple divs just for your backgrounds; you can have different images separated just by commas.
  • You can now have an image as a border. That’s right; you can now use an image as a border style. This should definitely make for some interesting designs.
  • You can now adjust the transparency of your images or elements using CSS. You no longer have to create transparent gifs or pngs to place in your design. Not to mention, soon enough you won’t have to write a separate style sheet for IE6 to fix your transparent pngs.
  • You can now use a drop shadow effect using CSS. This has to be one of the coolest features of CSS 3. Being able to use a drop shadow effect just using a couple of extra lines of code is so much easier than rendering your images, slicing them up and then worrying about how your pngs will display in different browsers.

And finally,

  • You can use custom fonts in your design and have css call the font in from an online font directory using @Font-Face. This will make for some new an interesting designs and sites. You’re no longer restricted to that handful of fonts that are used all over the internet.

Some downsides: Not to spoil everyone’s fun, but as things stand right now, not all of the new CSS 3 features are supported by all the browsers. For the IE users, most of these features will work only with IE 8. Even for the others, there’s still a short wait until all browsers are CSS 3 compliant.

Not to mention, with all these new features there’s a chance that people will overuse the preset effects.

To quote Chris Spooner from the popular BlogSpoonGraphics,

Just as is done with traditional Photoshop filters, the use of these new styling features could result in some eye-wrenching designs. Drop shadows in particular ring warning bells for us; we’re not looking forward to seeing the Marketing Department’s choices with that one!

About Nikhil

I'm a 23 year old Web & Graphic designer, currently living in Mumbai, India. Most of my time is spent on the internet browsing through new ways and means of betting myself at what I like to do. As a big guitar enthusiast, I enjoy listening to a lot of Blues, Jazz and a few select rock and roll bands. Classical, if I'm in the mood.