It happens more often than we like to think. Maintenance of existing assets demands a chunk of our time. It happened to me early in the week when a Zendesk help desk issue came in. The startup-I-volunteer-with experimented with a mechanism for getting business news stories submitted. Part of that mechanism is based on the wonderful facilities at Wufoo.com. (If you don’t know, Wufoo is an excellent web-form building and managing site. Awesome interface, service, and support (as you will shortly see) - Highly Recommended!) We (at the startup) embed a Wufoo form into a page to collect “static” information about a company. We then use a bit of PHP and Wufoo’s wonderful API to retrieve any prior submissions and pre-populate the form - very sweet!
Until it doesn’t work…
The form in question has space for LOTS of data. So much so, in fact, that when re-submitted to Wufoo to pre-populate the form, we appeared to over-run a “GET” buffer in the software on their server. Thanks to Andrew on their support team, this was quickly diagnosed, and while there was nothing they could do about it, Andrew suggested that I download the form, host it’s HTML, etc. on our server, and POST the data back to them. Awesome! The form was soon “back online” and working better than ever! Thanks Wufoo and Andrew!
In the redevelopment department, I have been plagued by an alignment issue in the shell for the startup’s next website. The header has an image with the title just to the right of it. As one scales down the viewport - say for a mobile phone, it would be “nice” for the title to move down below the image and wrap appropriately. For the life of me, I couldn’t get that to work “simply”. I had put it down as something I would have to come back to and write media-query wrapped CSS for, when I had more time. Until I did a little searching on StackOverflow… It took a little “tinkering” to get what I wanted, but the technique described here worked wonderfully. You should read the answer and try it yourself. A short description of the technique is that two “inline” elements who both have “height” and “vertical-align: middle” set, will, in fact, be centered vertically in their container. (Like I said - read the answer on StackOverflow…) Now the header “collapses” wonderfully as the screen size gets smaller.
This week ended with another trip to JAX - it’s great to live close to family and “run down to JAX” for a week!
While in JAX, I have been experimenting with making the site I’m redeveloping for my startup friends look good “on the small screen” (as I mentioned above). The “responsive design” additions to Bootstrap have been a great pleasure to use while making the changes. This is a learning process for me, actually. Adding the responsive elements to Bootstrap is as easy as adding “bootstrap-responsive.css” to your page (instead of “bootstrap.css”). Or if you are using LESS, include “responsive.less” after “bootstrap.less” in your project’s main “less” file. This may be all you need to make your site look great on everything from smartphones to tablets to the desktop. But probably not…
What I soon discovered is that a desktop-sized site puts a TON of stuff at the top of the page - stuff the user must scroll past to get to the content you actually want them to see. While we who have smartphones have become accustomed to doing that - after all, “most” websites are designed with desktop browsers in mind, that’s not the experience I wanted for the sites I am redeveloping. I wound up reading Bootstrap’s documentation on responsive design, particularly for “how to leave stuff out” on smaller screens. I also chose to use the “collapse" plugin to make the menu bars "get out of the way" into nice buttons on smaller screens. Take a look at Bootstrap’s example for more inspiration.
So far, I am quite pleased with the result. The little extra effort is making a huge difference in the look of the site on the smaller screen. Highly Recommended!