Category: Web Development

Getting Responsive With My Web Design

Web Development

responsive-web-designOver the next few months, TechyDad.com, TheAngelForever.com, and FollowerHQ.com will be getting facelifts.  You see, I’ve recently caught the Responsive Web Design bug and can’t wait to rewrite these sites with these principles in mind.

Responsive Web Design primarily refers to the use of certain CSS3 media queries to evaluate the browser’s size and adjusting the design appropriately.  (There’s more, but I’m trying to keep the Geek Level to a minimum.)  This means that the same website will serve as a mobile site, a tablet site, and as a desktop web site while (at times) looking drastically different in each.

For an example of Responsive Web Design, go to the Boston Globe’s website.  Make sure your browser is resized to the biggest your screen will allow (but don’t maximize it).  Now, slowly resize your browser to make it smaller and smaller.  You’ll see elements shrink until the three column layout becomes a two column layout and the long top menu gets hidden behind a “Sections” heading.  As your browser gets even smaller, the layout will shift again to a one column design.  Finally, the design will shift one more time to orient elements so as to best display on a smartphone.

Responsive Web Design isn’t hard, but it isn’t quick either.  You must consider the entire design across multiple browser sizes and how to best re-arrange the content in each case.  This can be time consuming, but it is well worth it.  After all, more and more people are browsing sites on non-desktop/laptop computers.  Smartphone and tablet use is rising and if your site is unable to accommodate these users, you stand to lose traffic.

What have you done to make your site available to smartphone and tablet users?

NOTE: The "webpage" image above is by mantasmagorical and is available via morgueFile.

Speed Up That Site

Internet, Web Development

Being a web developer, I’m used to learning new things.  If I didn’t, my skills would quickly become useless as technology passed me by.  The latest new set of skills I’ve picked up on is site speed optimization.

Now, don’t get me wrong, I’ve understood the basic principles of making your site run faster for awhile now.  Larger files means longer download times.  Images should be scaled down with sizes specified (so the browser doesn’t have to guess at the size).  JavaScript should be minified.  Unneeded code should be removed instead of just commented out.

Still, there was a lot I didn’t know how to do.  My education began with the infographic at this site.  Intrigued, I checked out HeadJS.  This is a small JavaScript library designed to load other JavaScript files.  The problem with having many JavaScript files is that they download one at a time.  This means they can become a serious drag on page load times.  HeadJS, instead, loads many script files together to that the load times drop.  I put it into place on a project at work and was amazed at how quick it became.

After HeadJS, I found a hidden (to me) gem on Google’s website: PageSpeed Insights.  Enter your URL into this tool and it will analyze your web page.  The resulting report will tell you how fast your page is (using a score from 0 to 100) and how you can make it run faster.  (There are extensions for Chrome and Firefox as well.  These are useful if your site isn’t accessible to the outside world.  For example, if you must log in to view it.)

Using this, I took the latest beta of FollowerHQ from a score of 60 to 91.  I didn’t record before and after load times, but the application certainly feels snappier.  In fact, at this point, the main drag on the site is the fact that the Twitter avatars that it loads aren’t optimized.  (This is obviously something that isn’t under my control.)

I’m going to turn this tool loose on TechyDad.com and TheAngelForever.com next.  Using the recommendations here, I should be able to get the two blogs running much faster.

What steps have you taken to ensure that your blog or other website is running as fast as possible?

Slumbering Inspiration

Dreams, Holidays, Judaism, Twitter, Web Development

nicubunu_Emoticons_Sleeping_face"It came to me in a dream, and I forgot it in another dream." – Professor Hubert Farnsworth (Futurama)

I’ve had a few times when ideas came to me when I couldn’t write them down.  At one point, this might have been when I was out and about.  Of course, since the advent of texting (and, later, Smartphones), this isn’t a problem.  A quick text or e-mail to myself and I’m good to go.

Recently, ideas seem to come to me on the Jewish holidays.  You see, during certain holidays, I refrain from "working at my occupation."  I take this to mean that anything that I could use to do work for my job is off-limits.  I’m a web developer, so computers are no-nos as are pen and paper (could write down code/designs to type up later) and phones (could call in to discuss work issues).  (NOTE: I’ll carry a phone with me in case of emergencies, but it is set to vibrate and everyone knows not to call unless it is a matter of life or death.)

So what happens when I get an idea in the middle of a Jewish holiday?  That is, during a time when I can’t write it down, type it up, or use my smartphone to send a reminder to myself?  That’s when I’ve got to exercise that brain of mine to remember it myself.  Kind of like how people used to remember things before computers were all-but-grafted onto us.

A couple of nights ago, I had a weird dream.  In it, I had built a very popular Twitter application.  I was showing it to someone to demonstrate how it worked.  I’m going to leave off the "how it works" details for obvious reasons, but suffice it to say that my dream was quite descriptive.  When I woke up, I remembered it perfectly and realized that this was an application that I could actually develop.  One that people might use.

Of course, the past three days have been Jewish holidays.  (Shabbat followed by two days of Shavuot.)  Since I couldn’t record it in any other manner, I kept it in my mind up until the Jewish holiday ended.  Luckily, by then, it hadn’t been forgotten.  If anything, it’s taken root and expanded.

Now if I only had more free time to work on Twitter applications.

Have you ever had an idea come to you in a dream?

Disclaimer: The "sleeping face" image above comes from OpenClipArt.org.

Introducing Rout… Again

Rout, Social Media, Twitter, Web Development

Remember this blog post back in October?  That was a joke post of mine intended to parody a popular social media ranking website as well as to whet my readers’ appetites before I released my real Twitter application. Then, last week, I happened to see an interchange between CuteMonsterDad and Chris Brogan.  I was inspired.  A few quick codings later, I had a full Rout application.  Now, I could give everything from a +A in Awesome Alliteration to a +Z in Zombie Defense.

Yes, this new version of Rout will actually tweet these random pluses.  You don’t even need to give me access to your Twitter account.  The text is passed to Twitter, which puts it into a tweet ready for you to submit.  In addition, virtually no tracking of these tweets is done.  They don’t contribute to an overall score or anything.  The two “tracking” exceptions are Google Analytics and a recording of the categories “routed.”  The former is to give me an idea of how many people are using it.  The purpose of the latter is to find interesting new categories to highlight on Rout.  (NOTE: These categories have to be approved by me.  This keeps topics that are inappropriate or limited in usefulness from appearing.)

So, go have some fun and give out some Rout: http://www.PlusRout.com/

My No-Longer Super Secret Twitter Application: FollowerHQ

FollowerHQ, Internet, Social Media, Twitter, Web Development

For quite awhile, I’ve teased on Twitter that I was working on a big Twitter application.  I didn’t reveal the name except to a select group of beta testers.  Well, today that “select group” is widening.  Today, FollowerHQ launches.

First, some history.  As I gained followers on Twitter, I would get e-mails that Twitter would send to me letting me know about my new follows.  Some people decide to automatically follow back, but I’m not of the opinion that this is useful.  I tend to be more selective in who’s tweets appear in my timeline.  So I would open up each e-mail, open up the link to the person’s profile page, examine the last few tweets as well as the person’s information, decide whether or not to follow the person, and then move on to the next person.  This was fine when I’d get 20 new followers in a week.

Unfortunately for this process, though, I began getting more and more people following me.  It became more and more of a pain to manage these new followers and I fell further and further behind.  Of course, the more people I needed to go through, the less I wanted to spend the time pouring through page after page.  I wondered if there was an easier way.  Being a programmer, I decided to build an easier way.

Thus, FollowerHQ was born.

NotFollowingScreenWhat FollowerHQ Does:

FollowerHQ will, after you authorize it, check who is following you.  It will compare this list to the people you are following.  You will then see 4 tabs: You Aren’t Following Back, Not Following You Back, Dropped Friends, and Ignored.  There is also a fifth tab called Export.

  • You Aren’t Following Back – These are people who follow you, but you aren’t following back.  You can choose to follow these users or ignore them on a case-by-case basis.
  • Not Following You Back – These are people you follow, but who don’t follow you back.  You can keep following them or stop following them.
  • Dropped Friends – I’ve seen this happen quite a few times.  Someone realizes that they aren’t following someone anymore.  They didn’t unfollow the person.  It just happened.  FollowerHQ will compare your following list against the list of people you were following the last time you logged in.  Any dropped follows will be listed here.  These might be people you decided to stop following or they might be mistaken drops.  You can re-follow these people or continue to not follow them.
  • Ignored – These are people from the first queue who you’ve chosen to ignore.  You can stop ignoring them or just leave them in the listing.
  • Export – I’m a big fan of keeping your data yours so this tab lets you export your user lists to import into your favorite spreadsheet program.

In each tab (except for Export), you can search and sort through the listings.  You can even take actions on multiple users at once.  For example, if you spot a bunch of spam bots following you, simply check them all and click the “Ignore Checked” button.  They will all be moved to the Ignore queue.

FollowerHQ Pricing

For now, FollowerHQ will be free.  I’m not going to rule out setting up some pricing scheme in the future.  Should FollowerHQ become popular and/or require more time and effort to maintain, I would need to offset the time/money spent on it, of course.  (Let’s face it, I’m *hoping* this becomes popular.)  However, even if there is some sort of payment plan in the future, I’ll always keep a free version around.

Enough talking, though.  It’s time for everyone to go play with FollowerHQ.  In case you haven’t already guessed, you can find it here: http://www.FollowerHQ.com/.  I’ve also registered the @FollowerHQ Twitter account.

Enjoy and let me know what you think of it in the comments below!

NOTE: I also want to thank my beta testers for all of their work finding bugs, suggesting new features and putting the application through its paces: Alena29, blogdangerously, CutestKidEver, dadofdivas, DadStreet, geekbabe, Kissyfur19, LindaCarmical, SandraFoyt, simplycathi, slpowell, and TheAngelForever.

1 2 3 4