Watkins Web 3: Blog

Posts tagged with “resources”

Wordcamp Nashville 2012

Thought I would post a link to the slides for the SEO talk. The lady that gave the talk is from Vanderbilt. She's been doing this pretty much since the web started. You don't get the talk, but the slides have lots of really great information on SEO.

Happy Web Diva SEO slides

There Is No Mobile Use Case

Nice article by Josh Clark on .Net Magazine on the problem with building separate “desktop” and “mobile” websites.

First, a growing number of people are using mobile as the only way they access the web. A pair of studies late last year from Pew and from On Device Research showed that over 25 per cent of people in the US who browse the web on smartphones almost never use any other platform. That’s north of 11 per cent of adults in the US, or about 25 million people, who only see the web on small screens. There’s a digital-divide issue here. People who can afford only one screen or internet connection are choosing the phone. If you want to reach them at all, you have to reach them on mobile. We can’t settle for serving such a huge audience a stripped-down experience or force them to swim through a desktop layout in a small screen.

We’ve all had the experience of going to a website on our phones and getting bumped to the mobile version. It looks great except, wait a minute, they’ve removed the exact feature or piece of content that I’m looking for.

This is the problem responsive design is trying to solve. Read the whole thing.

Some Interesting New Articles About Web Design

  1. CSS border refresher and new techniques
  2. A List Apart: Responsive Frameworks
  3. Smashing Magazine: Interesting Article on Drop Caps

Wordcamp is April 21

Watkins is hosting the Nashville WordCamp on Saturday, April 21st. More info at http://2012.nashville.wordcamp.org

Steve Wilkison has 20 free tickets for students, but you need to email him ASAP if you want to go. The deadline for the free tickets is this Friday.

Read more on the Wordcamp site.

CSS Transitions Module

Pretty nice. CSS transitions allow for changes like :hover and :focus to occur over a specified time rather than being instant.

More info here

Also, just discovered that you can use multiple background-images on the same container

Examples


Here are some fancy examples of animation created with just CSS. Further proof that Flash has no value anymore.

HTML5 Canvas Pixelator

I found this really interesting HTML5 tool. Based on some javascript canvas libraries by David DeSandro that was then created into a site by someone else. Very cool, lot's of options. You can add layer after layer and then save the pixelated image.

The Pixelator

Starter Kit Structure

I should have posted something like this a few weeks ago, but anyway here’s a chart of the primary templates you’re using for your blog, and the way the includes get pulled in. Remember that there’s no requirement to use PHP includes in this particular way — the code in them could have been inserted directly into their parent templates. It’s just that since the code for “output a post” or “output a link to a post” is the kind of thing you tend to do on multiple templates, it makes sense to consolidate them into the files I’ve called “snippets.”

Finally, you’re of course free to tinker with any and all of the files; this just shows how Starter Kit was structured when you installed it:

Starter Kit diagram

Download Starter Kit

PHP 5.4 released March 1st

PHP5.4 Banner
PHP 5.4 is here

Newly released PHP 5.4 is here with some new features. The most interesting one to me is the new CLI virtual server. Some other interesting features include: Default character set changed from ISO-8859-1 to UTF-8, shorter array syntax and traits for classes.

Paper.js

You might be interested in this if you like interactive design and animation. Otherwise, you may just not want to click this link

Note that you can click the button in the top right corner and edit the, very short, code right there.

Hardware Pixels vs Reference (Optical) Pixels

I saw this really interesting article on A List Apart. I thought it was a really good read. It has lots of information if you're planning on making responsive sites that look consistent on many devices. It talks about the difference between how pixels are rendered on different devices and how to target them better. It suggests using ems as the measurement for everything you would have previously used a pixel for. This way the whole site will be viewed properly no matter the device, zooming, etc. Informative read.

example 1: standard
example 2: normalized
"A developer might look up information on these two devices and think that if the screens are the same and they both use the Webkit rendering engine their website will look the same. Sadly this is not the case; as far as a website is concerned, the Galaxy Tab is 400px × 683px and the Kindle Fire is 600px × 1024px "

Pea.rs

This is pretty cool: Pea.rs is a set of “design patterns” with sample HTML and CSS for you to borrow. So if you’re making a thumbnail grid or other common design element, take a look here to see if it will speed up your process.

The whole site is a Wordpress theme, so you could take it and construct your own set of design patterns that you use often or want to share.

CSS selecting: nth-child()

Found this other CSS selector for targeting children. It's called nth-child() and it's pretty cool. Inside the parenthesis you can put a 2 or 3 or whatever you like. To target the child. Also, some mathematical formulas can go inside the parenthesis for targeting multiple children. nth-child(3n+0) would target children that are a multiple of 3. Even using nth-child(odd) and nth-child(even) works. Just thought that was pretty interesting and handy.

CSS: nth-child()

Web Hosting

For those of you looking to sign up for your own personal domain and web hosting, take a look at this post from Web 1 for info and recommendations. The only thing I would add is I have heard good things about Webfaction, which has a $9.50/month plan.

Learn jQuery in 30 days (Video Tutorials)

I suggest everyone interested in learning jQuery sign up for this as soon as possible. Every day for 30 days he will send you a 10-15 minute video teaching you jQuery. It sounds promising and I've been learning a lot from the Net Tuts site. This series you have to sign up and you will get the video lessons sent to your e-mail address.

Learn jQuery in 30 Days (Video Tutorials)

Here's another quick link. This is a tool that allows you to make gradients (like you would in Adobe Illustrator) and it gives you the CSS code for all browsers. If any one is interested in using CSS gradients.

CSS 3 Gradient Creation Tool.

css_gradient_tool

Interesting Article about Images and Responsive Design

alistapart.com

Ran across this article on A List Apart today and thought it quite interesting. It talks about responsive design and the problems around having a single large image that works for desktop uses, but scales down. Using too much bandwidth and slowing down the mobile version. It uses the example of the Boston Globe site that is quite interesting. Using the new HTML5 custom data attribute, which you can access via javascript. I thought it was really interesting. The methods they used did break. I think the new markup ideas for allowing multiple images sources is intriguing.

HTML5/CSS3 Which features you should and shouldn't use

html5css3

HTML5 Please

Found this somewhat interesting and somewhat useful site. You can look up new features of HTML5 and CSS3 and see if they are features that are supported by a number of browsers/devices. Should you be using them now? It tells you if it's okay, good with fallbacks or polyfills or whether you should avoid using such features right now. Just a quick little reference tool. It seems as though it's still pretty new. I'm sure they'll continue adding information.

Live HTML and CSS + livereload.js

Found this interesting video tutorial linked from nettuts. It's mostly CSS and HTML with a little javascript/jQuery. It's a good little exercise and pretty informative. It wasn't difficult to understand anything he was talking about. It has to do with creating an iframe to dynamic add CSS and HTML in the browser.

One thing that may be even more useful is to check out this livereload.js. It's a mac app. that automatically reloads everything you do with the CSS and HTML. So, you can have a window open with the page you're working on and another with a text editor and you don't have to keep moving around reloading the page to see the changes. Pretty cool!

Also worth noting the use of the HTML5 attribute contenteditable and the CSS webkit property box-sizing.

Custom CSS and HTML with iframes

.htaccess article

Apache Logo
Apache Logo

I thought this was interesting. It's not very in depth, but it did show me a few neat little tricks with .htaccess. It's worth a glance.

Interesting ways to think about web design

api_centric_logo

I'm really interested in this idea of designing sites that are controlled using API's. I found this article really interesting. What do you guys think?

Would it be possible to add comments to students posts? Maybe it could help us communicate and learn from each other.

  1. Here is an article about The Increasing Importance of Web API's
  2. Another article on The Basic Principles of Web API Usage
  3. And here is the API-Centric tutorial