Written on September 5th, 2012 by Joe about css
, responsive without comments
I’m sharing the slides from my talk at South Bay Mobile User Group this week hosted at Honda on Responsive Web Design.
Responsive Websites on SlideShare. A quick introduction to developing responsive websites including best practices, testing tools, and a sample project by Joe Seifi
You can also download and play with the code for this presentation on Github at
The sample code uses LESS to make calculations easier in flexible layouts.
You can start the app with Node.js very simply. From the root folder just run > node app.js and browse to http://localhost:3000
For a more detailed step by step approach, go to http://localhost:3000/html/
Written on March 5th, 2009 by Joe about design with 3 comments
Since Gmail is so powerful and easy to use, and is accessible from any web browser, you might be thinking about making it your primary account. Although it would be nice if you could have all your old emails in your Gmail account for your reference going forward. Also it would be great if you could have them imported so that the date stamps, and all other email headers could be preserved.
It turns out, it is really simple to do. The trick is using the IMAP feature of Gmail. Here is how to import your emails from your current email client to Gmail. These steps assume you are using Outlook, but they should be pretty much the same for any other email client including Thunderbird, Entourage, Mac Mail etc. So let’s just get to the steps.
- Turn on IMAP in your Gmail account: In your Gmail account go to Settinngs > Forwarding and POP/IMAP > IMAP Access > Enable IMAP > Save Changes
- Using the settings for Gmail IMAP for your Email Client, connect to your Gmail account using a new IMAP account. Once you’ve this done, you will see your Gmail account with labels listed as folders in your email client.
- Now just highlight the emails you want to migrate to Gmail in your Personal folders and drag and drop them from your local account to the Gmail IMAP folders.
That’s it! The emails get moved to Gmail with all the header in tact. It might take some time for the action to take place, if you have tons of email to migrate.
You can drag them to any folder (label you want) and you can also create new folders as you wish, which will become labels in Gmail. If you don’t want your old email to clutter your inbox, you can just drag them to the Gmail/All Mail folder which basically archives them and removes the Inbox label.
Another cool feature in Gmail is support for POP3 downloads from other accounts and additional SMTP accounts for sending emails. These can be configured under Settings > Accounts and can be good if you want to combine and consolidate other existing emails into your Gmail account. If you want to go all the way there is even a labs feature called Multiple Inboxes that can add a new column with configurable filters to the right side of your Gmail Inbox.
Written on September 19th, 2008 by Joe about design with 2 comments
It was a very lucky night for me last night at the Carcass reunion tour at the House of Blues.
The night started out with Finnish guys Rotten Sound which put on a solid performance. Next Aborted picked up and man those fellas really sounded good live, one heck of a pit frenzy. Chatted with some old school and new school fans in and around the show during the breaks. Saw Shane from Napalm hanging out at a T-shirt booth with a sign behind him saying “Don’t Ask Stupid Questions” which was pretty hilarious.
After Aborted 1349 went on which I had never seen live before. They use face makeup and are pretty fast for a black metal band. Suffocation presented a nice change in the pace of the pit and I have to say that was the only band that I actually understood what the singer was saying when talking to the audience between songs. They really grinded up the crowd when the played Infecting the Crypts.
Then finally the moment of truth, after a 30 minute setup period. CAR CASS CAR CASS chants started. There was a very creative intro with a formal sounding lady’s voice with a British accent reading a very morbid script. Really cool stuff, I wish I had that script or hear it again. Then for the first time in more than 15 years Carcass came out and they played one heck of show. Last time I had seen them was with Death (RIP) and Pestilence back on 10/05/1990 at the legendary Country Club (used in the Boogie Nights movie) in Reseda, which is no more. I can’t say enough about how truly good Carcass was last night. Truly a legendary band with a classy performance. Bill Steer, Michael Amott, Jeffery Walker, and Daniel Erlandsson (deep resume) subbing in for Ken Owen who is out due to a brain hemorrhage. My prayers and best wishes go out to Ken. They played lots of their classics like “Incarnated Solvent Abuse” and “Exhume To Consume” and amazingly done. I would say the sounded even better than they did last time I saw them live.
So the lucky part was at the end when Daniel came out and threw out his drum sticks and one landed almost perfectly vertically and between my two feet. This was with about 50 other people trying to get it with their hands up in the air. I was so happy!! I will cherish it for ever.
Long live the English Death Grind core Kings Carcass. I’m predicting this tour will somehow influence them to create a new album once they get back home. They are playing tonight at the Grand Ballroom in San Francisco. Don’t miss it! It might be the last.
More old school death metal is on the way, Obituary are set to play HOB next Wednesday 9/24/08. I will try to make it there.
Written on September 18th, 2008 by Joe about business
, design with 2 comments
I don’t know about you, but I’m really tired of trying to read those reCaptcha messages when going through TicketMaster sales screens. But hey at least they are helping a non-profit build an internet library which is great right?
As if it is not bad enough that they have a pretty annoying and unusable multi-step, multi-page ticket sales process, recently they are starting to give out some borderline non-sense captcha validation images. How many people would just say “forget it” and leave? Well not many, since TM is an undocumented Monopoly for ticket sales in my opinion. Pretty bad user experience overall. I would love if they at least put the reCaptcha page on the same page as the ticket search form to cut down page loads. Better yet, make the whole process an ajax based system so you never have to leave the order page. It sucks to go through a blinding reCaptcha page and then get the dreaded “You’re Screwed” all sold out page. Just tell me right upfront: “Hey Don’t bother, no seats are available mr!” and don’t waste my time. I mean I have to pay an inflated ticket price + order processing fees + convenience fees + delivery fees. Can we at least get a convenient to use website?
I went ahead and did a 2 minute reshuffling of the order form for TicketMaster and this is what I came up with. Just put all forms on one page and got rid of the clutter. Progress bar and search results would appear on the same page.
I noticed also that there are now TicketMaster hosted auctions and scalping services on site. Wonder how far they have to push the envelope before regulators are forced to step in.
Written on July 31st, 2008 by Joe about css
, web2.0 with 2 comments
Looks like the long awaited web 2.0izing of the del.icio.us website is finally here. Very sleek and sexy is my first impression.
Take a look at some of the older user interfaces to get a sense for how del.icio.us has evolved until now. Aside from the new look there are new features as well. The delicious dev team has supposedly completely rewritten the code base, to allow for a more scalable and spry tool.
Navigation: New simple CSS tabs with onclick drop down menus make is simple to find your tasty bookmarks. The navigation structures seems to borrow from Flickr. Search also comes with a simple drop down option list to find stuff in your bookmarks, network or everyone.
Bookmarks: You have Title view, regular view and Full View options here. View your popular bookmarks to filter the good stuff and filter down more by choosing fresh only.
Sidebar: is updated to show a relative set of tags related to your left content pane.
Action Box: This light blue box in the sidebar shows the common tasks for the given page.
Search URL: This is a reverse search for bookmarks and pulls in the ones with the given URL along with tags used for that URL by each user, broken down in chronological order. You can also view the notes added by each user to the given URL.
Settings: The settings page is laid out with all the actions listed on one page, similar to a sitemap.
Forums: There is a support forum that looks more like a categorized list of links than a forum. I like the non-cluttered design. Reminds me of Drupal.
As in the past their API is still available for developer consumption.