This site has been live since about July 8th but ever since I’ve been making little tweaks and changes to improve the content, layout and user experience. There came a point a few weeks after I launched that I just didn’t want to look at the site any longer. I knew there were problems but I had been looking at the site everyday for the past few months and just didn’t want to deal with them and were focusing on other projects.
After reading the Steve Jobs book and repeatedly hearing about Steve’s attention to every single little detail, it occurred to me that I had to get back to the site, make a list of all the things that weren’t right and get back in there and fix them. Many of the changes were related to how the site reacted when being scaled down to different resolutions. It’s still not perfect and even as I check items off my list, new items also get added.
The Big Problem
After purchasing an iPhone back in October, I was excited to test my site on the new device. First I checked it out in landscape and it looked great, then again in portrait also great, then I flipped it back to landscape and everything had been pushed out, so that you had to scroll to the right to see the rest of the content.
My first thought was that something in my updated theme had caused this, so I reverted back to an older theme, but it was doing the same thing with the older theme. Why did it work the first time the site rendered, but after going to portrait then back to landscape it didn’t? I went and checked it out on my iPad and sure enough it did the same exact thing. I went into my theme and started stripping out margins and changing widths to “auto,” but nothing was fixing the problem.
Reading is Fundamental
I broke out my copy of Responsive Web Design by Ethan Marcotte and tried to see if there was something that I was doing wrong. Based on how my viewport and media queries were set up, everything should’ve been working correctly. Next, I went to the website that was associated with the book responsivewebdesign.com/robot and put it through the same test on my iPad.
It did the same thing as my site!
In Tweet We Trust
This made me extremely happy because if Ethan’s website was screwing up in on the iPad, my site was in good company. To double-check, I went to another respsonive site that I know is set up correctly – simplebits.com, the site of Dan Cedarholm. It also had the same problems as my and Ethan’s site so I was sure that the problem wasn’t in my code. I knew it was now time to go to Twitter.
My first tweet just reiterated the problems I was having, while in the second one, I tweeted at @rwd and @simplebits that their sites were having the same problems. When I awoke the next morning I was pleasantly surprised to see a respsonse from @rwd. The response pointed me to the report of a known iOS scaling bug posted by the Filament Group.
The bug states that when switching from portrait to landscape, the viewport zooms past the 1.0 (100%) causing the content to be too large and require scrolling.
Twitter is a tool that so many people just don’t understand. In the web design/development community it is such an invaluable tool that allows to connect and tap into the wisdom of so many amazing professionals who are often so kind and willing to help you out. Thanks to @rwd for their help in pointing me to a solution!