Interactive Llama

Right now, responsive pretty much all about the width of your website–although it may not always be that way. Responsive design is an approach though and not a specific technology (media queries, etc.). It’s about responding to the device the website is being displayed upon. For example, the appropriate design may change for touchscreens by making buttons larger.

People are used to scrolling up and down, so matching the width of your document to the width the browser is often the main goal. Although most of the tips below are related to CSS and media queries AND focus on informational sites (not web applications), I believe that JavaScript has a significant place to play in behavioral changes and touch implementations in responsive design. The following list is intended for front-end developers and designers that work with CSS regularly, but are just starting to build responsive sites.

Note: I am not going to use the term mobile, but small-screen. Using mobile implies that you are moving–not that you are viewing the site on a small screen. (via Zeldman)

The decision trees of your layout multiplies with responsive design. Where should this item if the screen resolution is…? This adds complexity to the project due to the multiple (or continous with fluid layout) layouts. Be sure to plan out how many layouts you will create from the beginning. Small, medium, and large? Two small layours (landscape and portrait?) Start with a media query boilerplate and add or subtract the media queries you need. (more…)

Update 06/11: PostRank appears to still work, but they have been bought by Google (not a big surprise…). We are waiting to see if the Social First top-down strategy that Page is implementing will cause PostRank to atrophy or shut down anytime soon. There is a Chrome/Safari plugin that works with Google Reader, too.

Update: FeedHub is dead. It’s been deceased for almost a year now. Their parent company mSpoke shut the free news feed authority weighing system. I have replaced FeedHub with another free feed weighing service, PostRank. It’s not as convenient to use. All your feeds are not combined into one feed. If you have over one hundred feeds that you subscribe to, you will want to export an OPML file (collection of feed URLs) and import that file into your feed reader. You do however have the option within each feed to allow either all, good, great, or only the best ranked news feed articles. (more…)

There is an army of spiders out there.  Some, like GoogleBot, you want scanning your site to be listed in their search engine. Many however have a devious purpose–to collect email addresses to add to spam email lists. If your email address is already out there, then there is no pulling it back in. The only way to eliminate spam is to create a different address and inform all your contacts that you have changed email addresses.

Ways to combat email spam:

• A non-linked image
• HTML entity encoding
• Client-side obfuscation/abstraction (via JavaScript)
• Server-side redirect
• Contact form (no email address listed)

If your email address, is spelled out with any client viewable code, it is possible to obtain. Now that search engines can read PDF documents, including your email within a PDF as text may be suspect. I have not gone into great depth on any of them below but have provided a short description of each method with advantages and disadvantages listed. (more…)

The writer, Stewart O’Nan, once said “The two hardest things about writing are starting and not stopping.” Programming at its essentials is writing. When I’m wearing my web developer hat, it seems that I spend over a quarter of my time browsing around the OS-X Finder. So what better way to start programming then having a file framework. Not only can you start more quickly, but your structure will stay consistent. Think of the last time you edited someone else’s project and that person placed all their files in one folder. Oh, the horror!

Introduction to my file framework

The guiding principle for my file framework is:

Either precisely title all files with hierarchical prefixes or create sub folders to categorize your files.

With video projects and print projects that output to one file, file organization isn’t as essential. With web design, you do not want the files you publish getting mixed up with your source files. Yes, we all have at least once uploaded a 100MB Photoshop file to the online server and wondered why it was taking so long. This file framework focuses on web production and output. (more…)

I enjoy reading books. Most of the time, I read non-fiction. I don’t have anything against fiction. My wife reads fiction, but it’s not my cup of tea, unless its a classic. Whatever you read, you would probably like to share it with your friends. Now it’s easy. With these steps you can tweet about your latest book by simply adding the book to an Amazon Wishlist. No figuring out how much of the title you can post within the 140 character limit. No creating a TinyURL for the Amazon product page. A few hours later your twitter account will tweet your book addition! (more…)

If you are interested in the open-source image gallery web application, Gallery, you have probably read the Thirteen Ways To Add SEO To Gallery2. If you haven’t, then read that tutorial first. Within that tutorial, I mention a bulk renaming script that I have used for years with Gallery2 to change titles and keywords. This post is about that title and keyword generating bulk script. It removes some common naming conventions from the titles and removes common words from the keyword list. Do people really want to see all the photographs that contain the articles, “a,” “an” and “the.” I certainly wouldn’t.

The default title for Gallery2 item uploads is the file name of the image. It easier to name your files well from the beginning from the safety of either than edit the URL, titles, and keywords for your item after they are uploaded. My naming convention for a file name is photo_set-photo_subset-people_or_objects. For a photo of my parents, my bride and myself at my wedding, I used “wedding-party-parents-rachel-stephen.jpg” (more…)

The need

Professional web developers have been aware of CSS sprites or CSS rollovers/hovers since 2004 (The rollover term is taken from JavaScript and the hover term is taken from CSS). They are the background graphics that change position based on mouse hover thus eliminating the need for JavaScript image swaps and image caching since the “mouse on” and “mouse off” are one image. I have been using sprites for years. It is a more tedious process than clicking Swap image on a DreamWeaver drop down menu, but it produces more accessible and more clean code. The most tedious part of creating CSS sprites for menu navigation is aligning the static (in-active) and hover (active) images. This script solves this problem by taking two images and merging them into one. I hope this increases your productivity and creates a more standards-compliant web.

(more…)

This isn’t about Chrome, for me it’s really about using a second browser. A second browser to only use for web applications. Honestly, I admit I haven’t been using Google Chrome for months now. I’ve been using Safari. It is my understanding that Google’s Chrome browser uses WebKit as it’s rendering engine with the advantage of starting each window/tab in a separate process (which Internet Explorer 8b2 also does) to increase stability. The general idea is if your Google Docs crashes, then your Gmail doesn’t crash–just how desktop applications work. Your web applications are sand-boxed and protected from other web pages. Safari/WebKit/Chrome: What’s the difference? (more…)

I read many books from the library. I don’t finished reading many books though. First of all, they are free, since they are from the library, and second my attention span doesn’t last that long. I believe browsing the web daily from age 14 (circa 1996) will do that to someone (read the latest cover story in The Atlantic Monthly, is Google Making Us Stoopid). Most of the books I read come from the magazines I read (The Atlantic, Books & Culture: A Christian Review) or from the podcasts I listen to (Diane Rehm, This Week in Tech).

Either way, I want to share my latest reading endeavors across my blogs. But how? (more…)

If you have ever wanted to turn a plain text link, http://www.smjdesign.com, into a "linked" HTML version, http://www.smjdesign.com, you can now. Pass the following function your entire text field and it will find all your links and return tagged HTML.

function replace_plain_text_link($plain_text) {
$url_html = preg_replace(
'/(?<!S)((http(s?):\/\/)|(www.))+([\w.1-9\&=#?\-~%;\/]+)/',
'<a href="http$3://$4$5">http$3://$4$5</a>', $plain_text);
return ($url_html);
}
echo replace_plain_text_link("hi this is dummy text before
http://www.smjdesign.com hi this is dummy text after")

(more...)