Well that was a long title! Here’s the deal. I finished up a website for a client yesterday and was doing a last minute check in Internet Explorer to make sure there were no problems. Well that would be too easy, wouldn’t it?! Unless you’ve been under a rock the last few months you know about the Google Font API. They host fonts and give you the code to embed them onto your website. A great solution, and free, unlike Type Kit.
Well since it’s a Google product I figured it was obviously cross browser safe. So I was surprised (and not pleasantly) when I opened my clients site in Internet Explorer and saw that instead of the font Josefin Sans Std Light showing up, (I am using it for headings and navigation items on the website), the browser was showing Arial. WTF? Popped open Safari, no problem. Looked in Chrome, and again, Arial was showing! So I went to the source, the page right on the Google Font API website where you can preview the font. And after looking at that page in the browsers, I realized something important: The fonts in the Google Font API are NOT cross-browser compliant! Keep reading to see what I’m talking about (screenshots), and the solution I came up with to solve this problem. Continue reading
A 404 error is what happens when you try to access a page on a website that doesn’t exist. We’ve all gotten them; due to typos, a moved file, whatever the case. As designers / developers we need to make sure we help the users of our websites should this happen to them. The last thing we want is for them to get an ugly 404 error, get discouraged, and exit your website.
Instead, you want to create a custom 404 webpage, and redirect the user to this page should the error happen to them. This is done by uploading a .htaccess page to the root of your website. Continue reading
Designing a realistic stainless steel background in Photoshop for use in print or web design is a rather painless process. In this tutorial I’ll show you how to make your own stainless steel effect in a few simple steps.
In Photoshop, create a new layer and name it Stainless. Select this layer and fill with a gray color. I used RGB #bebdbd Continue reading
Need a nice looking product slider for you website?
Introducing FancyMoves, a new jQuery Product slider for your website or blog. This slider is built off the Moving Boxes slider, with FancyBox for expanding images.
Slider features:
Images shrink as they leave the slider
Keyboard Navigation (use your keyboard arrows to move to the last / next product)
Click on images to navigate
CSS opacity for rollover effect on buttons
FancyBox built in for expanding images (left / right buttons on rollover for other image views)
If you’re going to use PHP on a website the server needs to be running PHP right? Well duuh! If you work on a variety of websites for a lot of clients, you’re going to deal with different hosts and servers. Before you hook up a form to PHP or whatever else you are planning on doing, you better make sure the server can run PHP if it isn’t.
The quickest way to test servers for PHP is to create a testing PHP file that you can upload to a clients website to see if PHP is running. The good thing about this is you can reuse it for every site. You simply upload this to the server, and try to open it in your web browser. If it works, you’ll see an html page with the info about the PHP running on the server. If it isn’t running PHP, well you won’t see anything!
Keep reading for the code to make your own. I also provide mine as a download to save you time.
I was making a product slider for a clients website; and was using the CSS-Tricks Moving Boxes slider. I chose this slider because it had an effect that most other jQuery sliders don’t have, the main image is larger than the images leaving or entering the screen.
The one problem I found with it was that there is no setting for autoplay, so the user always needs to manually press the arrow to navigate to the next photo. I wanted it to autoplay, so it starts to play as soon as you load the webpage. I found the code to make this work however, check out the demo to see the slider autoplay, and keep reading for the code / instructions.
Recently I was creating a contact form for a client’s website. Due to the fact that the form was in a rather small area, I didn’t have very much room for the text and inputs. See my solution below.
Usually I would write the name of the input followed by the input like this:
First Name:
Since I didn’t have room for that I had to come up with a solution.
I was coding a page the other day and needed to have a button that could refresh the webpage when pressed. Turns out jQuery can take care of this rather easily. Check out the demo below, and keep reading for the code.
So you know how to embed a YouTube video onto your site right? Well good for you! Copy and paste the code YouTube gives you, easy enough. But what if you want to set the video to autoplay? What I mean by that is have it start playing as soon as the user opens your webpage. By default the user would need to click Play on the video to start the play cycle. It’s easy enough to set the video to autoplay however, check out the demo and keep reading for the code.
I was laying out a form the other day and needed to have a drop down selection to choose your state, and another to choose your country. A very common thing on forms, but I didn’t have the code for this anywhere. So I decided to put it online for anyone else that needs this.
Here are the examples of the form dropdowns, keep reading for the code to create this in your form.
So often I’ll be working on a website that somebody else coded and have to strip out junk styling. There are a lot of different ways to accomplish the same thing with CSS, but so many people have no idea how much time they are wasting by coding something in a “hacky” manner.
Example. I was working on a site the other day and noticed that every single paragraph in the main content area of every page of the site had a class of “first-paragraph” on it. So I looked in the external sheet and saw that this was simply to remove the top margin on the first paragraph on every page. Ok, so that method worked..great. Except that manually adding a class to every paragraph tag is such a waste of time. Check out the demo where I show an example of targeting the first paragraph in a content area without adding any classes or IDs paragraph tag in the XHTML. Then keep reading to see how to properly code the example above.
Websites need to have the copyrights on them. Usually this is found in the footer of the site. As I was updating a client’s site the other day I noticed his copyright info was still 2009; so I updated it in the template, applied it to the pages, and re-uploaded everything to the live site.
One of the worst things you can do with your website is to not make updates once it’s live. Fresh content is the only thing that will keep your users AND search engines returning. One of the best ways to let users know that you never update your website (saaarcasm), is to have a copyright in the footer of your website from 2003. It really is a pain to have to go in at the first of every year to update all of your client’s websites though. Luckily, Javascript can save us. Using Javascript we can add a copyright to the webpage that will automatically update with the current year. Check out the demo, and then keep reading to grab the code.
Recent Comments