Posts tagged css
I recently sold Responsive Design to management at work and, excitedly, we will begin working on transitioning one of our sites within the coming weeks. As I read more and more into the responsive design process and bring developers up to speed with the new user interface, I began to pose some questions to myself. I feel it just resulted in even more questions but perhaps some other people in the great Internet universe may have some answers for me.
How do you maintain a DRY code base?
After I tried a couple different approaches to a responsive design, I finally landed on Twitter’s Bootstrap to putter around with. While it’s great to *cough* bootstrap with, it’s in no fashion to be the be-all end-all user interface CSS — you will end up hijacking the code and inserting crazy stuff in it and you would be much better off just starting from scratch for your own web-app.
We did a huge overhaul to just one section of our website, and when the project started I wrote a clean piece of Sass for the developers to use, and by the time the project was done, it was cluttered with repeated and unnecessary styles. I can only imagine it will be 10x worse with a responsive designed website.
How do you organize your code for the multiple experiences?
That being said, how ARE you supposed to organize your code then for these multiple experiences? As far as IDEs go, there are not many (if any) options for CSS out there that can deconstruct your CSS and find duplicated styles and tell you where you can optimizer your code. (If there are, I haven’t used any.)
How to debug with multiple experiences?
We only have 2 people in our QA department and it already sucks time away from them when they need to test features in all the major web browsers and their major versions. Which devices should they be testing on? How much complexity is added with each new screen resolution that you add to the code base?
When I developed my proof of concept, I developed on a Mac with Chrome, Firefox and Safari. I never even took a look at it in Internet Explorer. When do you say “I am only going to support until version X?” You could easily dismiss browser eccentricities and say you should only design for resolutions, but that’s hard to explain to a client when they go to use the website on their respective computer/mobile device and finds out it doesn’t work.
How do you instruct developers not as familiar with front-end development?
As stated above, we had a fairly small development team and after a couple of months of development, even though I had instructed my teammates that they didn’t need to condense the styles into one-liners because we had the Sass compiler do it for us, I was still finding unreadable code in the code base. How do you bring everyone up to speed? It seems with responsive design and more complicated design methodologies, it’s harder for the everyday “coder” to be up-to-speed on all the new jazz with front-end development too.
So those are my current gripes. It’s not going to prevent me from using responsive mobile design at all, but I imagine it will cause some headaches down the road while everyone is still trying to figure out exactly the definition of what responsive design really means.
After my previous battle with Internet Explorer 6 & 7 I ran in to yet another z-index bungle. This time it was with the advertising banners on our site. Our drop-down menus from our navigation were getting overridden by a few pesky advertisements. I increased the z-indexes on the elements conservatively and didn’t see a change. I then thought it was something imbedded within the flash and asked our resident flash expert for her opinion and she found an obscure fix that would keep SWFs from overlapping HTML.
To keep a swf from overlapping html, set the wmode parameter to “transparent”.
Example: recipe-widget at http://www.foodandwine.com/holiday-guide
<param name=”wmode” value=”transparent”>
See how the New Year’s dropdown overlays the widget.
Other examples and discussion:
This wouldn’t be something we could easily fix as the advertisements are served from an advertising partner and we would have to have the partners contact the advertisers to fix their flash advertisements. We were about to give up and deploy without a fix, as the advertisement only showed up very ocassionally on a few pages, when someone from the marketing side sent an email asking us to bump up the z-index even higher and see how that worked.
I bumped them up to about z-index: 9999; but no dice. Finally, I did what I probably should have done at the beginning and just did into the gabillion lines of code of the offending advertisement and look for z-indexes being specified. And ‘lo and behold, they were setting their ad to 1000000. Hmm. Thanks, guys!
Obviously, they wanted their advertisement to show up above anything else on the page, but that becomes a problem for us when our users wouldn’t be able to navigate the site.
I decided that so this doesn’t happen again, why not just set the z-index to the largest z-index possible? After playing with Firebug in Firefox, I found that yes, indeed there is a maximum z-index and Firefox will automatically truncate the value if the maximum is exceeded. After a little more research, the maxmum is different and what happens when you exceed the maximum depends on which browser you use.
It seems Eric Puidokas did all of the research for us and came up with this nice table explaining the maxmum values and what happens if you exceed those values.
I made a simple test page to find these limits and figure out what happens when you exceed them.
Browser Max z-index value When exceeded, value changes to: Internet Explorer 6 2147483647 2147483647 Internet Explorer 7 2147483647 2147483647 Internet Explorer 8 2147483647 2147483647 Firefox 2 2147483647 *element disappears* Firefox 3 2147483647 0 Safari 3 16777271 16777271 Safari 4 2147483647 2147483647 Opera 9 2147483647 2147483647
The “lowest” maximum value is “16777271″ but as it’s a outdated browser, I went with the common value of “2147483647″ and then “2147483646″ for the child element per my previous post.
I’m not sure if there is etiquette when it comes to using z-indexes on a page, and that’s why I was originally hesitant to make the z-index some outrageous number like “1000″ (only to find out other people seem to yawn at “1000000″) but I hope with this change, we won’t have to deal with drop-down menu z-index problems ever again.
Another annoying issue today.
After fiddling with the z-index of the menu element itself, I finally did a cursory search on Google and found quite the peculiar fix for this problem. I’m sure this is old news to the web gurus out there but I’ve been out of the loop for a few years on recent IE hacks and workarounds since I’ve mostly dove into Ruby on Rails coding full-time.
The trick to this fix is to make the parent element’s z-index higher than the child element that is having the problem. And not just the immediate parent of the child element, but the closest parent that has the relative positioning attribute defined. For me, this was 3 or 4 levels higher than my absolutely positioned child element.
Can I stop supporting IE 6 & 7 yet?
More information on the fix: Relative, z-index, and IE
Then with the recent update I noticed that this weird CSS bug kept showing up around my right side panel’s boxes that made the content huge and was majorly pissing me off. After some muddling around in the code, playing with the CSS myself and checking out DigitalNature’s support, I decided to cut my losses and discovered that DigitalNature recently released a new theme called “Mystique” that was just gorgeous. And now it’s applied here! I especially like the build-in widgets for Twitter and blog-specific stats on the side. Now, if only they had a widget for Tumblr too and then I would be set with my social media feeds!