Archives for posts with tag: CSS

Today I learned that to give an element “ignore the cursor” status, drop this bad boy in your stylesheet:

pointer-events: none;

What a pleasant surprise, my hovering div became ‘invisible’ to the cursor, allowing me to click the image link below, THROUGH the div!

Pointer-events: none; is my new favorite line of CSS.

Pointer-events: none; is my new favorite line of CSS.

Magic.

 

Advertisements

Chrome extensions are simpler than you think. They’re written with web languages and can be as simple as pure HTML, CSS, and a few lines of Javascript. Right now we’re going to make a ‘browser_action’ extension.

Download this .zip file and follow along! Extensions are fun and easy!

An extension is entirely based on one file called manifest.json. The manifest.json file contains your extension’s information and tells Chrome what the extension will do. The necessary elements for browser_action are default_icon, which links to the icon you see in the corner of your browser, and default_popup, which is the ‘page’ that opens when the icon is clicked. But enough babbling, let’s get started on your first extension!

1. Create a folder for your extension!

(Or download this .zip file and follow along!)

2. Create your manifest.json!

Create up a new text file in your extension’s folder and name it manifest.json, then add the following code:

{
 "manifest_version": 2,
 "name": "My First Chrome Extension",
 "description": "Description of your extension goes here.",
 "version": "1.0",
 "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
 }
}

3. Create your popup.html!

Next, create your popup.html file. In this file, put whatever you want to be in your pop up! Here’s what mine looks like:

<!doctype html>
<html>
  Hey there!
</html>

4. Every great extension needs an icon.png!

icon

Finally you need an icon. Download this one for our demo! browser_action icons need to be 19×19 pixels, and should use alpha transparency so they look good on different themes.

Got your manifest.json, popup.html, and icon.png files? That’s it! You’re extension is ready to be installed!

Unpacked Extension Installation

Screen Shot 2013-05-12 at 4.27.55 PMGo to chrome://extensions, check that you’re in Developer Mode, and click Load Unpacked Extension. Select the directory containing your manifest.json, popup.html, and icon.png files and presto! Your extension lives! Wasn’t that easy?

Imagine the possibilities. Anything you can build on a website, you can build in a Chrome extension. We’ve barely scratched the surface of what’s possible with extensions. If you’re thirsty for more, check out this fun and informative post on Lifehacker, and the extremely helpful official Google Chrome Developer Documentation.

I hope you had as much fun making your first Chrome extension as I did writing this. Don’t be shy, let me know if you write any sweet extensions!

Don’t forget to follow me on Twitter & Dribbble, happy extensioning!

Here are some things I consider when building landing pages for my apps and products.

All you need is some Photoshop skills and basic HTML & CSS knowledge in order to copy/paste find/replace your way to a kickass landing page.

First let’s dissect the essentials of a landing page. Here’s one of mine.

Example Landing Page Annotated

1. Use a beautiful screenshot

One that shows the main mechanic of the app. What does the user see most of the time while using your app? Show off how great that looks! To show off your app, you have options:

—Use a stock photo

Pros:

  • You can usually find *exactly* what you’re looking for
  • Allows for the most page customization

Cons:

  • Cost can range between $10-$50 for the right photo, sometimes up to $100
  • May be difficult for a photoshop novice to convincingly place the screenshot into the phone

—Use this .png of an iPhone to create your own image in photoshop

Pros:

  • Takes a much shorter amount of time, just drag & resize your app screenshot
  • Still allows for a large amount of page customization

Cons:

  • Looks a little boring next to a person holding your app in their hand

—Use placeit by breezi (recommended!)

Pros:

Cons:

  • Large image size
  • Limited environments, only a several per phone type

2. Clear Description of Product

What is this thing? Why should I care? In this example, we are looking at the official app for an event. You may have heard the phrase, “You only have 8 seconds to get someone’s attention.” I believe it’s even less. Maximize your one shot for the user’s attention by directing what they look at first. Use big typography to capture attention. I used Helvetica Bold with -2 letter spacing and a slight drop shadow for an elegant letterpress effect. Protip— Here’s the CSS:

.calloutText {
 text-shadow:1px 0px 1px #fff;
 color:#333;
 max-width:580px;
 line-height:72px;
 letter-spacing:-2px;
 font-weight:bold;
 font-size:80px;
 font-family: Helvetica, sans-serif;
}

Need to convince people your app is worthwhile? Write a snippet about the main benefit it gives the user. Don't ramble about features, just state plainly why using your app good for them.

3. Highly Visible Call to Action

So the visitor understands the product is beautiful and worth their time, but now what? We want them to download it! Purchase it! Sign up! We want them to do something. Don’t make them work to figure it out. Use a large, contrasting, clickable element to capture the user’s eye next.

I used the following CSS code for my orange buttons (with a nested image inside):

.downloadButton {
 width: 230px;
 margin-right:34px;
 margin-top:10px;
 height:79px;
 background:#FF7D2D;
 background-position: center top;
 background-size:100% 100%;
 background-repeat: no-repeat;
 display:inline-block;
 position:relative;
 border-radius:10px;
}

Now that we know what we want to put in our landing page, let’s get into some design specifics.

Use a framework.

Nobody likes writing robust cross-browser responsive layouts from scratch. Bootstrap is always a good starting point. There’s also Skeleton. With these frameworks, you can copy the base example.html pages that fit the style you want and replace the content to get 80% of the way done.

Make it sexy.

Seriously. Begin with the screenshot(s) you use for the page, and pick your color elements from there. In my example I have pulled dark grey, beige, and orange from the screenshot. Make your buttons and text these colors— your page will have a unified and slick look.

Use subtlepatterns.com instead of flat colors to make your page interesting to look at. Copy the pattern out of the .png and paste it into your own new file, then you can freely add color or lighten/darken the pattern file.

Use 1px box-shadow on buttons and div elements and a 1px text-shadow on your copy to make it pop. Yeah, I went there.

Short & Sweet

Hit them right in the face with why downloading your app is a great idea, and present them with a big shiny download button! That’s all you need to do. Practice makes perfect, so volunteer to whip up some basic landing pages for your friends! You’ll be surprised how fast you improve!

Check out land-book for some amazing landing page inspiration.

Thanks for reading! Good luck selling your product!

Follow me on dribbble and twitter!

Anything I left out? Email me at william@coolkidsdesign.com

Last week we finished off our group lectures and got our first assignment.

Brent gave an incredibly interesting lesson on coding- I got a great review of basic html and learned some of the finer points of css.

Take home points include:

Firebug is a very useful application that allows you to inspect elements of a web page and see the various code it is composed of.

“@font-face” is a trick used to download fonts to the client browser cache- so that you can use non-web fonts in layouts. It is awesome not only because it loads faster than an image, but it counts as body text, improving SEO for the page as well.

Search Engine Optimization is like doing your taxes. You’re encouraged to ‘optimize’ as much as possible- but ‘cheating’ is strictly prohibited. If caught ‘cheating’ (hidden tags, excessive self-promo, etc.) a site suffers a huge penalty from Google.

Our project is to create a web layout using the 960 pixel grid system. Basically the page needs to be 960 pixels across- including 5 pixel margins and 10 pixel gaps between columns. There’s a great explanation of how this system works here.

I’m planning on creating a new layout for The Gainesvillains. I want to have a maintain the minimalist design but integrate better design elements. My home page’s layout will be able to be constantly updated- keeping the main page fresh, not only keeping fans updated with the latest of Villainous activity but also contributing to SEO.

Stay tuned to see my designs and comments on the critique next week!