Skip to main content

Thoughts on Responsive Web Design

As part of our core initiatives to make ABC more user-friendly, I've redone the homepage (landing on master very soon) to be more mobile-friendly and gives a clearer perspective to the end user on the value that our suite of tools provide. Incidentally,  this included using common patterns found in Responsive Web Design practices. After working through a 6+ month old site, I've come to realize that media queries can be an absolute nightmare for older sites -- but none the less, there is always a solution: find the highest value pages and give them a responsive interface.

In our particular case, our primary goal was to increase conversion of user registrations (I think most startups have this as a common goal). That said, we've RWD'd the homepage and I'm currently moving towards the product pages now including CodeStorm (devops social network) and Amazing Insights (real-time logging and analytics for Windows Azure). 

With lessons learned, when starting a new project, I'd look at Twitter's Bootstrap project. It is an amazing UI library that comes with grids and reusable components. Additionally, as long as you set the viewport meta element and include its responsive stylesheet, you can get a fully responsive website in a matter of minutes. That said, this comes with assumptions. The assumption is that you're using the same grid system as Bootstrap. Adding to that, Bootstrap's documentation is fantastic: it is full of examples and provides notes on limitations/caveats/gotchas.

At the end of this effort, I ended up just rewriting the company front-end to be in line with Twitter Bootstrap's examples. The out-of-the-box responsive web design you get from following the markup structure is extremely valuable in that you can continue to RWD all your pages with the least amount of worries for specific use cases. 

Comments

Popular posts from this blog

TextMate Tutorial: How to add a Strikethrough keybind to your Markdown bundle

Markdown is awesome for quickly generating Readme's on Github. After looking at other projects using the strike tag, I've decided to create a custom keybind for it in my TextMate Markdown bundle. Here's how:

1) Click the + sign on the bottom left and click New Command.
2) Paste this into the editbox and make sure you name your command "Strikethrough".

For the input field, select WORD in the drop down.
For the output field, select "insert as snippet".
As for the keybind, you can totally map it to whatever you're comfortable with but I chose Command-D as it is the same thing in Microsoft Word.

Cheers,
Jaime

World of Warcraft Ninjalist addon: version 0.1 coming along quite nicely

After toying around with more GUI related issues in World of Warcraft's API, I've decided to take a totally different direction. Originally when I architected this addon, I knew in my mind it would be a super simple Console application that a user could easily paste in a name and add it to the database; however, why stop there?

After discovering AceGUI, I can easily start developing UI components in no time! As of right now, I've got it saving data in between game sessions--the interesting part will come when I'll have to develop the web service that will parse the SavedVariable.lua, eliminate duplicate entries, as well as, do a huge merge between their copy and whats on the server's (per realm basis of course).

Here's a screen shot of the responses when adding new Ninjas to your list:
When a user clicks add after entering a name in the textbox, it'll go ahead and add that person to the ninjalist tagging the user's realm and current date/time. Someday, I…

Plenty of Fish - Lessons Learned Meetup

Today, I had the fantastic opportunity of going to a retrospective by Plenty of Fish. As you may know, Plenty of Fish is the largest online dating site and it was all started by a local BCIT graduate named Markus Frind.





Below are notes that were taken on my iPhone. I do apologize as I am continually editing this blogpost.


What is Plenty of Fish? An online dating site.
Why enter the dating market? Back in 2003, it was the only thing that was interesting to build. Markus already knew ASP but wanted to learn more about building web applications with ASP.NET and improve his skills on his resume. 
How do you deal with the network effects problem? In the early days, Plenty of Fish gained traction through Vancouver and Toronto.  There wasn't any silver bullet or magic around it -- Plenty of Fish heavily relied on organic user growth and SEO. The focus was to retain users more than go out and acquire new ones.
What are some early challenges you faced? Markus actually ended up doing every…