Cool, Easily Customizable Map Resources

Lately on many B2B websites and company websites that have been redesigned within the past year or so, there has been a rash of large map areas that are in custom colors to match the branding of the website. These maps may be used next to contact information or even as a background on the contact page itself. This is a really cool idea because it really makes the contact information stand out and helps someone who is looking for directions to find you quickly and easily.

 

The first one I am going to go over is called MapBox. http://www.mapbox.com

MapBox is a website that allows you to completely customize maps to exactly the colors and styles you want. They have premium plans and free ones, and they offer mapbox.js, and some API’s for developers so you can insert your map directly into your website. I am not entirely sure of the range of use of this program, but it is definitely easier to implement than taking a Google Map and altering it to your desired colors and exactly your specifications.  I have not used it (as of yet) but i plan on trying it out as soon as I get a project that it will work within!

*Please note that this platform does not use Google Maps service, so there may be variations from a map through MapBox and a map through Google Maps.

 

Another custom map website that I found while perusing the internet is SnazzyMaps http://snazzymaps.com/

SnazzyMaps is a repository for Google Maps that have already been modified to different color schemes. Check through the large library of pre-customized maps and if any work for you, they are easily implemented using Google Maps API and the code snippets that are found with each color theme. IF you want to include a custom Google Mapp on your website, this is definitely a great place to look to cut off some time in production!

Advertisements

30 CSS Selectors you Must Keep in your Head

Couldn’t write this information on CSS selectors any better. Kudos Raghavendra, well said. Good information and easy for the beginner to understand.

Raghavendra Prasad

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in November, 2010.

So you learned the base idclass, and descendant selectors – and then called it a day? If so, you’re missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory.

1. *

* {
margin: 0;
padding: 0;
}

Let’s knock the obvious ones out, for the beginners, before we move onto the more advanced selectors.

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I’d advise you…

View original post 3,098 more words

QuirkTools: Great Free Web Development Resource

I stumbled upon this website and thought that it may be of use to others in the development realm as I have found it very useful. The website is

http://www.quirktools.com

There are four different tools that can be used on the website, each offering an easy to use interface for different stages of development.

SMAPS: Quick and easy “drag and drop” style site map tool that you can use right in your browser. This is very useful in the beginning stages of your development to figure out where you will have links lead to and how you want the flow of your website to go.

You can have up to 3 active projects until you have to pay for QuirkTools premium plan. (Pretty solid deal!)

WIRES: Create interactive wireframes to your specified grid and layout directly in your browser. Really cool idea and, just like SMAPS, you can have up to 3 saved projects until they will make you purchase the membership.

SCREENFLY: This tool is phenominal. This is to test the responsiveness of your website. Simply enter the URL, and it will give you the option to view your website in multiple different size and resolution screens, right in your browser! You can use this tool for free anytime, as there is nothing that QuirkTools needs to save for you so this tool ranks up there with the best free resources for development that I have found so far online.

RETRO: This tool is cool as it will show you the exact dimensions, resolution, pixel ratio, viewport size, and IP address for the machine that you are developing on. This is also completely free to use and can come in handy at times.

QurkTools is a pretty awesome resource for the web developer to hone their skills on. If you’re weary on checking it out, I would say the screenfly feature would be the onre that would make you love QuirkTools.

I hope this was a help to developers out there, I’ll keep my eye out for any other cool tools and resources like this to pass along to you guys. Happy Developing!

HTML5

Good quick read on HTML5 and different applications that it has been developed for. Very informative and to the point. Check it out.

Real World Software

HTML5 is a specification which is used for developing web browsers like Internet Explorer.  It helps to define what the browser should do.

What is the point of HTML5?

Compatibility Issues

The problem with web development is that there are significant differences between various web browsers.  This includes differences between newer versions of a specific browsers such as Internet Explorer and differences between rival browsers.  Also there are a number of plug-in tools (e.g. Flash) which may need to be installed.

View original post 357 more words

Website Background Shifted to Left on Iphone5 / 4S (FIX)

Recently while developing a website for a local restaurant, I began testing on my Iphone 5 and found that although the content of the website was aligned center in the Safari browser viewport, the background seemed to be shifted over to the left, leaving a white block all the way down the right hand size of the website. After searching for a fix to this issue for a few hours I stumbled across an easy solution to the problem.

The Iphone 5 and, Iphone 4S both render a 1250px wide viewport. We must set this in our CSS using a @media query. We call our @media query at the end of our CSS page below our styles for desktop browsers. Anything that we put in the media query, depending on the size of media we specify, the @media query CSS will replace the original CSS. Thyis is  the basic framework for responsive development.

The Iphone 5 / 4S @media query to fix your background and center it in your mobile browser looks like this:

@media only screen and (max-device-width: 480px) {
        body{width:1280px;}
    }

This will center your background in your Iphone browser viewport and make your website look good, even on the go!

Change Opacity of Background Only

With the emergence of CSS3, many developers have stumbled across the CSS style for changing the opacity:

.lowOpacityDiv {
    opacity: .5;
}

It is very easy to institute as it accepts any number between .1 and 1 from lowest opacity to highest opacity. The unfortunate flaw of this method however, is that any content inside your <div> with the class of lowOpacityDiv will also be a lower opacity.

In many cases this is a problem because we may want the have a semi-transparent background on our <div>, but still want the content to be legible and have a 100% opacity.

The old fix for this was to upload a small .png file that had the desired opacity and set it as the background for the selected <div>. But there are a couple ways to use CSS3 to achieve this without using any image files. The first syntax uses RGBA (Red, Green, Blue, Alpha). The mark-up is simple and straight forward:

.lowOpacityDiv {
    background-color: RGBA(12, 13, 134, .5)
}

The above will output the RGB color code that you selected, with an opacity, or alpha channel, of 50%. There are many ways to find RGB color codes using hosted color pickers on various websites. Some easy to use color pickers for RGB syntax are:

http://www.colorpicker.com/

http://www.rapidtables.com/web/color/RGB_Color.htm

The second way to create a low opacity background in a <div> while keeping your content at a higher opacity is to use the HSLA method (Hue, Saturation, Light, Alpha). This syntax is put in the CSS just like the RGBA syntax:

.lowOpacityDiv {
    background-color: HSLA(126, 13%, 24%, .5)
}

The above will output the HSL color code that you selected, with an opacity, or alpha channel, of 50%. There are many ways to find HSL color codes using hosted color pickers on various websites. Some easy to use color pickers for HSL colors are:

http://www.hslpicker.com/

http://www.workwithcolor.com/hsl-color-picker-01.htm

Benefit

Using the methods mentioned above as opposed to using an image to achieve the same effect will help to decrease the load time of your page and in turn, having more people stay on your website. The longer the load time, the larger change you have of driving traffic away so this is definitely a great method to adopt for rendering lowered opacity backgrounds.

Browser Compatibility

The browser support for using this syntax on your projects is relatively high with FireFox, Opera, Safari, Chrome and IE 9 and above supporting it.

Thank you for stopping by!

Customize Font on the Web using Free Google Webfonts

One of the things that you may be looking to do is add a particular style font face to your website to complete the look and feel you are designing for. If none of the fonts that are preloaded into the browser seem to complete the look, there is a very simple API that has been developed by Google that allows you to choose from hundreds of different fonts to use in your website.

There are other sources that have similar API’s but Google will most likely stay around for the duration that you are using their hosted files while I cannot say the same about any other company as easily.

In order to include a font from Google’s web font library, go to http://www.google.com/fonts. Choose a font that you want to use and click the Quick-Use button in the bottom right hand corner of the chosen fonts section on the page. Scroll to the bottom of the page and copy the

<link href='http://fonts.googleapis.com/css?family=Orbitron:400,500' rel='stylesheet' type='text/css' />

and paste it into the head of your document between your <head> </head> tags.

This tells your browser to load that font from the Google web fonts library. Now you just need to tell the browser where to use the font in your page. We do this in our CSS file. We can put it in our body tag, p tag, h1 tag, etc.

body {
    font-family:'Orbitron', sans-serif;
    font-weight: 400;
}

You can copy and paste this code directly from the font’s page on the Google API website as well.

This will allow you to complete the feel of your website with custom typography.