How to Use Firefox for Mobile and Responsive Web Design

Today I found a nice trick that I wish I would of realized years ago. I figured I’d post it here in case anyone else is missing out on this great Firefox feature for mobile developers and responsive web design. Firefox as a mobile screen display which you can get by using the shortcut:

CTRL + SHIFT + M

It’s that easy.

To use this feature of Firefox, simply open the browser, hit the key combo, control+shift+m and type in any web address in the address bar like normal. Here’s what it looks like:

Snap 2014-11-20 at 21.39.23…and what’s really nice is that you can use developer tools while at this size and be able to read them easily with little scrolling. I used to try to use the tools while the browser window was very small and I couldn’t read more than a line at a time but now it is easy. Here’s a picture of the same website as above with developer tools opened:

Snap 2014-11-20 at 21.39.45Nice huh? By the way, there is an icon in the top right corner of the tools window that allows you to reposition the toolbox in the side of the window instead of at the bottom as it is by default.

How to Include .mp4 Video in Webpage

Including a .mp4 video in a webpage has become very easy with recent advances. Here is the simplest way to do it:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<video width=”320″ height=”240″ controls autoplay>
  <source src=”video.mp4″ type=”video/mp4″>
</video>
</body>
</html>

You can make the above HTML code work without making changes to it if you save it a video.html inside the same folder as your .mp4 video file. rename the video file to video.mp4 and open the page in a browser to test it and you should see the video in a blank webpage. Simple.

Insert .mp4 Video in a WordPress Post or Page

The same basic method also works quite well in WordPress I discovered today. The only difference is you only need the video part of the HTML to paste into the WYSIWYG editor. Make sure you click the “Text” tab in the upper right corner of your editor to put it in text mode and copy and paste the following code into your post or page from the WordPress admin:
<video width=”320″ height=”240″ controls autoplay>
  <source src=”video.mp4″ type=”video/mp4″>
</video>

Summary

As you can plainly see, it is very simple to include a video in any webpage with this method even in WordPress! Be sure to include the correct path to where you saved the video when using WordPress however. I like to use the current template folder myself, but you may use the uploads folder or any other folder you wish that you know the complete path to.

Building a Responsive Navigation Menu

In today’s blog post, I’m going to demonstrate how to make a horizontal responsive navigation menu anywhere on your webpage. This tutorial also demonstrates how to make a completely responsive web site if you follow it through. Here is a link to the final product:

http://jafty.com/ResponsiveSite.html

If you want a vertical responsive menu, you can adapt the code accordingly yourself. I am posting this here for reference because it seems like every time I have to do this for a responsive website, I have to relearn it. Now myself and anyone else that needs the technique can find it right here. Another appropriate title for this tutorial could have been how to make a responsive image map since that is what led me to doing this in the first place.

Using Divs Instead of Image Maps

While this tutorial is technically about doing a navigation menu, this exact same method can be used in place of image maps because, if you’ve tried to make a responsive page that has an image map in it, you know it doesn’t work well.

Building a Responsive Nav

First, lets’ build our HTML:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="page">
<div id="header-menu-overlay">
<img src="topnav0map.png" style="width:100%;"  border="0" alt="top navigation menu"/>
<div>
    <div>
        <div><a href=""></a></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</div>
</div>
</body>
</html>

To follow along with the tutorial, copy and paste the above code into a new notepad document and save it as test.html. The first div includes an img tag in it as you can see above. Here is the actual image to give you a better idea of what I have done here. So “topnav0map.png” refers to the following image:

topnav0map.png:
topnav0map

Again, if you’re following along, right click on the above image and save it to the same directory as your test.html file. I put the image in a blue background here so you can see it because it is mostly white over a transparent layer done in Photoshop. The reason I use an image here is because it is responsive when you set the width to 100% and height to auto. This is about when I got the idea for an image map to link the items in the nav as you see them in the above image, but quickly found out that image maps do not resize well when changing either the page size or the zoom level when looking at the page live. therefore I used divs as they are more responsive when used properly with percentages as you’ll see below when I get to the CSS part.

Responsive CSS Layout

The most important part is probably the responsive CSS code. Here is what I used:

#page{
position:relative;
width:100%;
max-width:900px;
background-color:#222288;
margin:0 auto;
min-height:1200px;
margin-top:25px;
}

.header_menu_overlay{
position: absolute;
top: 100px;
left:0px;
width: 100%;
min-height: 30px;
text-align: center;
z-index: 99999;
}
.navwrap{
top:-20px;
min-height:27px;
position: relative;
}

.nav_item_wrap{
position:relative;
width:100%;
max-width:1125px;
height:27px;
border: 1px solid brown;
margin:0 auto;
}

.nav_item{
position: relative;
border: 1px solid red;
height: 33px;
display: block;
float: left;
z-index: 999;
}

.nav_item a{
width: 100%;
height: 100%;
position: relative;
display: block;
}

.nav1{
width: 7%;
margin-left: 9%;
}

.nav2{
width: 10%;
margin-left: 1%;
}

.nav3{
width: 10%;
margin-left: 1%;
}

.nav4{
width: 20%;
margin-left: 1%;
}

.nav5{
width: 19%;
margin-left: 1%;
}

.nav6{
width: 10%;
margin-left: 1%;
}

.pg{
position:relative;
width:100%;
max-width:900px;
min-width: 225px;
background-color:#8a1734;
margin:0 auto;
min-height:600px;
margin-top:125px;
}

First, I used the “page” div as a page wrapper by setting a standard 900px width which you may adjust to your needs. I also set width to 100% which is very important for responsive designs, but also notice the max-width is set to 900px this is so your page won’t go crazy-wide when you open a large browser window on a PC. If you want to always cover the width of the screen regardless, then you could remove this, but I recommend using a maximum width myself for most scenarios. Next I’ll include a short description for each CSS declararation after “page” which I just explained:

  • header_menu_overlay – is used to position the overall navigation menu where you want. You’ll see I decided to put it a hundred pixels from the top of the page, but you can put yours wherever you need it even at the bottom of the page for a footer menu if that’s what you need. the header-menu-overlay div is the one that holds the image as well as the rest of navigation divs. Be sure to set the width only of the image in this div and set that width to 100% so it is responsive.
  • navwrap – is the div that wraps the other divs we will use for our links. we set it’s position to relative and top to a negative number to force it on top of the image above it.
  • nav_item_wrap – wraps around the individual menu items and has a margin of “0 auto” so it centers the group of menu items to the rest of the page nicely.
  • nav_item – this class is set to all of the navigation item divs and is used to set their height, display and to float them left which is important for responsiveness.
  • nav_item a – is a style definition for the anchor/link tags inside of the nav_item div. Without this the links will not work. It sets the width and height to 100% of the containing element. You have to set “position: relative”, width and height for this to work.
  • nav1 – nav6 – the next six CSS declarations are used to set each individual menu item’s width and margin-left properties since they can all be different.

Add CSS Classes & Content to HTML:

Okay now we just need to add the classes above in the proper spots in our original HTML code and add some content for each page so that your new HTML page  looks like this:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<div id=”page”>
<div id=”header_menu_overlay”>
<img src=”topnav0map.png” style=”width:100%;”  border=”0″ alt=”top navigation menu”/>
<div class=”navwrap”>
<div class=”nav_item_wrap”>
<div class=”nav_item nav1″><a href=”#pg1″></a></div>
<div class=”nav_item nav2″><a href=”#pg2″></a></div>
<div class=”nav_item nav3″><a href=”#pg3″></a></div>
<div class=”nav_item nav4″><a href=”#pg4″></a></div>
<div class=”nav_item nav5″><a href=”#pg5″></a></div>
<div class=”nav_item nav6″><a href=”#pg6″></a></div>
</div>
</div>
</div>

<div class=”pg”><a name=”pg1″>page 1</a>
<h1>Place all of your page 1 content here…</h1>
</div>

<div class=”pg”><a name=”pg2″>page 2</a>
<h1>Place all of your page 2 content here…</h1>
</div>

<div class=”pg”><a name=”pg3″>page 3</a>
<h1>Place all of your page 3 content here…</h1>
</div>

<div class=”pg”><a name=”pg4″>page 4</a>
<h1>Place all of your page 4 content here…</h1>
</div>

<div class=”pg”><a name=”pg5″>page 5</a>
<h1>Place all of your page 5 content here…</h1>
</div>

<div class=”pg”><a name=”pg6″>page 6</a>
<h1>Place all of your page 6 content here…</h1>
</div>
</div>
</body>
</html>

Now you should be done and you have a completely responsive website in no time at all! You should go back and remove the borders from the navigation menu’s CSS as those were just for demonstration.

Summary

So if you followed this tutorial, you should have learned quite a bit about responsive design. Not only should you be able to grasp how to develop a navigation menu from this article, but you should now be able to understand how to replace an inline image map with responsive divs and even how to make an entire responsive website using the techniques demonstrated here. Remember to use percentages instead of pixels for widths and even heights wherever you can and your design will be responsive and evenly laid out for all devices. Congratulations, you are now a responsive developer if you understood all of this. Good Luck!

View outcome of tutorial here:

http://jafty.com/ResponsiveSite.html

 

 

How to Identify a Font

Today I was challenged with figuring out what a font was that a client wanted. He had sent me an image of some text with the font he wanted, but no name and no example HTML code to look at. So what did I do? It wasn’t easy at first until I found some helpful sites on the internet.

Identify Font From Image

A site to help you discover what a font is from an image:

http://www.myfonts.com/WhatTheFont/

The above website allows you to idenfy a font by uploading an image of the font then asking a series of questions about what letter is what. A tip is to take an image of the font that is about 14 characters long and save it as a .jpg before uploading to that site.

Identify Font by Answering Questions

Here is another site that will help you figure out what a font is just by answering a series of multiple choice questions about the font in question:

http://www.identifont.com/

Just answer the first question on that page on the left site and keep on going until it gives you the answer you were seeking with several alternative fonts from which your font will most likely be one of.

Summary

I used both above methods successfully after years of having issues identifying fonts, so I thought I should share them.

How to Add Custom Fonts to Windows

Here we discuss how to add fonts to your Windows OS. You may find this necessary to use new fonts in Photoshop or any other program running under the Windows OS.

Here are the simple steps:

  1. download the .ttf file from any free fonts website such as one I found here: http://www.dafont.com/
  2. unzip the file you download from dafont.com and from your Windows desktop, simply double click on the .ttf file(s) one at a time and Windows will know what to do with them. You’ll only have to click the “Install” option in the pop up window that opens when you double click on the .ttf file.

Summary

Yes, that’s really all there is to do! Now open your Photoshop or other program you wanted to use a custom font in and it will be there now! Just like magic!

How to Add Custom Fonts to Any Website

Today we are exploring how to add custom fonts to any website including WordPress. First let’s take a quick look at the basic available font formats:

Font Formats:

TTF – Works in Firefox and most decent browsers but does NOT work IE and iPhone.
EOT – IE only because they have to be difficult.  EOT is an acronym for Embedded Open Type. The format was created by Microsoft (the creator of @font-face) over 15 years ago. It’s the only format that IE8 and below will recognize when using @font-face.
WOFF – Web Open Font Format. Created for use on the web, and developed by Mozilla, it is the compressed, emerging standard. Should soon work with ALL modern browsers!
SVG – SVG or Scalable Vector Graphics fonts are For iPhone/iPad. Its the only format allowed by Safari version 4.1 and below. iPhoneSVG fonts are basically for older versions of iOS Safari (3.2-4.1).

Here is how to embed custom fonts on your website using the @font-face property of CSS:

  1. First be sure to have at least a true type font file and a .woff file because .woff is for modern browsers including Firefox while true type fonts are for some versions of Firefox, safari, android, etc. browsers. so if you only have a .ttf file for your new font, use an online file converter to convert the .ttf file to a .woff file like the one found HERE: http://everythingfonts.com/ttf-to-woff
  2. find your site’s main CSS style sheet and add the following code to the start of the file:
      @font-face{
    font-family: ‘shapefont’;
    src:  url(‘fonts/OptimusPrinceps.woff’) format(‘woff’), /* Modern Browsers */
    url(‘fonts/OptimusPrinceps.ttf’)  format(‘truetype’);/* Safari, Android, iOS */
    }
  3. Then simply declare your font wherever needed in the site’s css sytles using the new font-family you created so an example CSS delaration for the above font which I named “shapefont” would be:
    font-family: shapefont;

NOTE: if you copy and paste, you’ll need to replace all quotes, single and double because this site uses fancy ones that don’t work with CSS code.

Using Free Web Font Kits from FontSquirrel.com

A quick and easy way to make sure that you have fonts that will work in all browsers and devices is to include all four basic font types, tff, wof, eot and svg. An easy way to assure that you can get all four in a nicely wrapped font kit is to use Font Squirrel. Here are the simple instructions for geting a complete free font kit from Font Squirrel:

  1. Go to http://www.fontsquirrel.com/fonts/list/find_fonts and you’ll see a list of the fonts available through Font Squirrel.
  2. Click on one of the fonts(not on the download button because that is for one font type only).
  3. Then select the “webfont kit” tab on that font’s page.
  4. Make sure that all 4 file types are checked then click on the button that reads “DOWNLAD @FONTFACE KIT” and click “ok” to download to your computer.
  5. Unzip the zip file on your desktop and open it. You’ll see a file named “How_to_use_webfonts.html” which will have step by step instructions on how to install the fonts from here.

A Sure-Fire Method to Make your Font Work

I understand that the instructions from Font Squirell can be a little vague, so here is my sure-fire method for installing a web font kit and this method will work with fonts from anywhere by the way.

  1. After you have your font files(steps 1-5 above). Make a new folder on your desktop named “mysite”.
  2. put your HTML page or a test HTML page into your “mysite” folder.
  3. Inside of the head tags in your HTML page, add:      <!–Custom fonts:–>
        <link rel=”stylesheet” href=”font.css” type=”text/css” charset=”utf-8″ />
  4. Create a new CSS file called font.css and paste the following code into it: @font-face{
    font-family: ‘MyFont’;
    src: url(‘WebFont.eot’);
    src: url(‘WebFont.eot?iefix’) format(‘eot’), url(‘WebFont.woff’) format(‘woff’), url(‘WebFont.ttf’) format(‘truetype’), url(‘WebFont.svg#webfont’) format(‘svg’);
    }
  5. In line two of the above code, where font-family is declared, change “MyFont” to whatever you want to call your new font. This is the name you will use to call your font by in your regular style sheet.
  6. Save the font.css file and put it inside your “mysite” folder with your HTML page.
  7. Move your .wott, .eot, .ttf and .svg font files into the same “mysite” folder as the HTML and CSS files. If you are using a Font Squirrel kit, open the folder you unzipped earlier, find the “web fonts” folder inside and select the one you want. There are different types such as light, medium, bold etc. for most fonts. You may choose to install more than one type. If so, simply repeat the process for each type and give it a unique font-family name. If you’re not sure which folder has your font files, use the one that ends with “regular_macroman” and open it. copy the .svg, .eot, .wott and .ttf files into your “mysite directory.”
  8. Take the name you named your custom font(originally MyFont”) in steps 4 & 5 above and use it in your web page’s CSS style sheet. If you don’t have one yet, create a new file called style.css and add the following code to it:

    body{
    font-family: “MyFont”;
    }

  9. Save your style sheet as style.css if you made a new one. If you had an existing CSS file already, modify the font-family declarations you want to include the custom font name you created for “MyFont”. Simply replace whatever comes after “font-family:” with the name of your new font wherever you want to use it and you are done!

 Summary

That’s really all there is to it. The Font Squirrel method just described was made simple by putting everything in the same folder. You’ll probably desire a different structure, so be sure to change any file paths accordingly if you do so. If you’re doing this to a WordPress website, just locate your current theme’s style.css file and add the @font-type declaration shown above to the top of the file then add the font you named wherever you like in the site using the font-family declaration. It’s easy as pie! Good Luck!

Buy Scripts, Applications and Web Tools at Jafty.com/products

Yes, I finally am starting to sell some of my products that I have been developing for over 12 years now. I am only putting together the best tools I have made and remaking certain ones I find the most useful for sale on my website, Jafty.com/products

Types of Products for sale on Jafty.com/products

  • Email Marketing tools
  • Domain name tools
  • DNS tools
  • Server administration tools
  • webmaster tools
  • PHP tools
  • Customized tools for business
  • Have me build one custom for you if you don’t see what you need

CLICK HERE TO VISIT Jafty.com/products/ and see what’s listed for sale now. However, I do not have them all listed yet, so drop me an email or give me a phone call at 330-903-6074 or 330-417-3617 to find out how I can help you.

jafty0

Want to learn more about SEO? Check out these relative books from Amazon:

EmployWorkers.com Virtual Work

Need to hire the perfect coder, designer, developer or graphics specialist? EmployWorkers has all areas of Information technology covered and more.

Virtual employment agency
Where work that needs done, gets done.

Need to find work in the Information Technology field, EmployWorkers.com is for you! We employ all skilled workers in a vast array of areas including, but not limited to graphic design, logo design, Photoshop, web design, web development, application development, special needs coding, PHP, HTML, CSS, SEO, writing of all types, programming of all types and much more. If you need work, visit employworkers.com today and sign up for free. Finding work online has never been easier!

I, Ian L. of Jafty.com have created employworkers.com to fill a niche left open by the buyout of Vworker.com. They had a simpley to use website for posting jobs and finding work. I have expanded on the idea by making it even easier to sign up, post jobs and find work all for free. You never pay a cent, we collect a small percentage of the project price only in cases where a job was completed satisfactory and accepted by the employer. We have a zero risk policy where you don’t pay anything until you are satisfied with our services. Money for projects is held in escrow so the worker knows he will be paid once he fulfils his contract with the employer, but employers can dispute at any time they feel there is a breech in the contract and get their escrowed funds returned to them hassle free. Most times you will find that satisfaction is standard however because employworkers.com uses a skilled pool of workers and expertly matches the most qualified workers with your project.

Go ahead and visit EmployWorkers.com today and give it a try whether you are an employer seeking assistance on a project or a worker looking for your next project, we have got you in mind!

Hiring Virtual Workers

When you need a project done, there is nothing more discouraging sometimes than finding the perfect person for the job. Virtual workers are in abundance, but finding the right one is often a trick that takes time and trial and error to to get right.

The best site out there in my opinion was Vworker.com. Unfortunately, they were recently bought out by freelancer.com who doesn’t quite meet up to the standards Vworker did as far as ease of use of their site and reliability of their worker pool.

The above are two main reasons I decided to start a site called employworkers.com that will facilitiate employers and workers both seeking to work virtually from the home or office. I modeled the site, not after Vworker, but with the same principals in mind. I concentrated foremost of ease of use and allowing only quality workers into the worker pool. The workers will be tested on every category they would like to work under, so employers are sure to get a worker who knows the subject matter at hand.

How to scale down images using Gimp

I did some experiments today on taking a larger image and converting it to an icon image that was 16px by 16px when the original image was 128px by 128px. There are different ways to re-size an image and I will discuss some of the pros and cons of each way and show you the results of what I found to be the best method for scaling down an image.

picex

Method 1 – using the width and/or height attribute of the img tag. This method produced the 3rd question mark icon in the above image.

Pros

  • You don’t have to open the image and re-size it in an image editor such as Gimp or Photoshop.
  • Saves time

Cons

  • Take up more disk space on your website because obviously a smaller image will take up less memory on your server, so by leaving it large and scaling down in the img tag, you still have to load the larger image into memory.
  • Longer page load times – since it has to load the larger file size into memory to show the webpage in the browser, it does effect the page load time negatively.
  • More code – it may not add much, but if you like to use a minimalist strategy when it comes to HTML code, you do have an extra attribute or two in the img tag when using this method.

Method 2 – re-size the image in Gimp or another image editor to the size you want to display the image on the web page. The 1st question mark in the above image was done with this method.

Pros

  • Saves disk space on your server because smaller images equal smaller file sizes in general
  • Faster page load time because of smaller file size.

Cons

  • More work and time to develop because you have to open the image in the image editor and scale it down which I will discuss later on in the tutorial if you choose this or the next method described.
  • Loses a little clarity in many cases, but if you are good with an image editor, you can compensate for much of this. read on to learn more.

Method 3 – Re-size the image about half way to the size you need or depending on the original image size. For example if your original image was 500px by 500 px, you will want to scale it down more than half way. If I wanted a 16px by 16px icon, I would scale it down to 50 by 50px. The last or 4th question mark in the above image was done using this method and looks the best to me.

Pros

  • Probably overall, the best method because it saves a reasonable amount of disk space and load time while looking better than method 2 and almost as good if not better than method 1.
  • Looks clearer than when you scale down to small.

Cons

  • As with method 2, you still have to open the image in an image editor like Gimp or Photoshop to scale it down, but that only takes a few minutes and saves you valuable page load time and disk space especially when you have too many images on your web pages.

Best Method

So as you can probably deduce from my writing above, I recommend method three described above. But let me elaborate on how to do it so that the image looks good using Gimp to scale down the image size.

How to scale down an image with Gimp

  1. Open the original larger file using Gimp.
  2. Click on “Image” in the top tool bar.
  3. Click on “Scale Image” from the “Image” drop down.
  4. For an end result of a 16px square icon, scale down the width and height to 50px in the resulting “Scale Image” pop up that appears.
  5. Make sure the x and y resolution are set to 72 pixels/inch as that is what looks good on a webpage from the experiments I did and from what I have read elsewhere.
  6. Change the “Interpolation” to “linear”. I did this because the default setting of cubic didn’t produce as good of results, but you might want to try both because it may depend on the image and the amount you are scaling it down. If you look at the example image with the question mark icons above, the second question mark was done using “cubic” and the fourth was done using “linear”, so you can see a minor improvement in my opinion.
  7. Export the image and save it as a .png. I have found the the .png format works best for smaller images. It also is great for transparent backgrounds.
  8. Now install the image in your webpage using the img HTML tag and the width attribute to scale it down to the final size of 16px square. You do not have to set both width and height. If you set one or the other, the corresponding opposite setting will scale accordingly so save some code and only set one or the other unless you want to skew the image for some reason by giving them different values.

Summary

That’s it, I hope you learned something here. I spent a good hour or two learning the beset practice, so thought I would document it for future reference here for anyone who needs it.

 

Fixing Jagged Image Edges with Gimp

In this post, I am going to show you how to fix those annoying jagged edges in transparent images using Gimp, a free open source drawing program comparable to Photoshop in many aspects.

  1. use the fuzzy select tool to select your drawing.
  2. Click “Select” then “border” and select border by 2 px.
  3. Click “Filters” then “blur” then “Gaussian Blur” and give it a 4px Gaussian blur.
  4. Make sure the image is selected and click “Select” then “grow” and grow by 1px.
  5. with the image still selected, click “select” then “to path” and click delete.
  6. If you had a path to select, this should be done. if not or id still doesn’t look write, undo last step and click “filter” then “blur” and apply another Gaussian blur starting at 4px and experiment until it looks good, this will blur out the jagged edges when you export the image.

That is all there is to it. Practice with some of these techniques until you perfect the process and you will be golden.