The time finally came conquer the responsive design monster. I decided to redo my affiliate site Costume-Depot.com to make it friendly across ALL devices. I choose the Twitter Bootstrap CSS “framework” to accomplish this task. All the experience and philosophy stuff is after the pictures.
@media (min-width: 979px)
Displays all features and images.
Some Tablets/Smaller screen version
@media (max-width: 767px)
Top Nav collapses
main header background image changes to a flat color.
Most small phone screens
@media (max-width: 480px)
Left column is hidden
Top logo and credit card images are gone
All the span(x) divs are thrown on top of each other. I didn’t know what to think of this at first. In the end I decided a REALLY easy thumb flicking up and down experience was best.
What have I learned?
Learning the beginning ins-n-outs of responsive design wasn’t nearly as scary as I thought it would be. I put it off for a long time and all I had to do was spend ONE day with Bootstrap. Now I have the beginnings of a very valuable and marketable skill.
@media queries seem to be the bread and butter here. Using specific CSS for the screen size is what this is all about.
Twitter Bootstrap is a great framework for people like me who are more gifted in the code parts of projects than the artsy parts. If I am going to be completely transparent -the original Costume-Depot template was actually generated in Artisteer.
I know that Bootstrap has been around the block for a while now but honestly things aren’t moving as fast as people think in this industry. Aside from a few new CSS tricks that aren’t supported or some reworking of already done scripts to make them more efficient -CSS frameworks have been one of the only major additions to the web development process. Some people hate them because they are purists and think that you must retain 100% control over what is going on in your code. I would agree with them but with the caveat that the end result is what your customer is going to see. They don’t give even the slightest “crap” about your ego massage from building something pure. You don’t have to write all the code yourself but you should be able to READ AND UNDERSTAND IT COMPLETELY.
Responsive design is something you should make the decision to use before you start the project. It needs to be part of the thought stream so you can imagine all of your little Divs and modules floating on the surface of a pool and decide what happens to them as the sides of the pool close in forcing them together.
Is responsive design faster/better than detecting a user agent and serving up a mobile version of your website?
No. In my opinion, no. But it all depends on who you ask. Some would argue that it doesn’t matter anymore. The cellular networks are fast enough and the data-plans are cheap enough that it shouldn’t matter if the user loads a little extra. I don’t think this is the case just yet but it is all moving fast enough that a responsive design is a very REAL option for presenting your content. Responsive design is a nice catchall to ensure the presentation of your data is controlled as much as possible without having to create multiple versions of your website (ie mobile.yourdomain.com). However I do not think there is enough thought going into the fine details of controlling every element to make it optimized for a mobile browser. Pictures are still loading big and displaying small. The full versions of your scripts and css files are usually all still being loaded. The div style may now be set to “display: none” but the html is still loading. Your site ends up looking tiny and nice but inside it can still be a giant fat beast.
All that being said, “I love it!” I love that it makes you think about every part of the site in more detail and I love that no matter what device I view the site on I know exactly how it will operate and look.
Twitter Bootstrap – Honestly the ONLY link you will need. The documentation is so good that I didn’t really need to look anywhere else on how to use it properly.