Bureau of Indian Education (BIE) Responsive Design

Moving to a Responsive Design

Before working on this project, I didn't know much about responsive design. It's implementation, level of effort, and difficulties were all a mystery to me. After this project, I had a newfound respect for well designed mobile sites and the confidence to implement one.

The Bureau of Indian Education website serves many functions. From providing report cards to posting new school jobs, it's mission is fairly diverse. I had to make sure that a responsive version of the site would keep all that data visible, while accommodating smaller screen real estate. Below you'll see the current version of the website as seen on a large screen.

Full version of the BIE website

Now keeping that three column layout for the homepage is darn near out of the question for anything but some larger tablets, so I made sure that it would move the rightmost parts down to the bottom of the page as the News & Events section were more important to the customer. For the most part, the sub-pages weren't too difficult to deal with as you could dynamically size the main column and sidebar column with percentage based sizes. The biggest kink came from the Jobs page which had an image map that needed to be dynamically sized as well. With a bit of math and jQuery I was able to accommodate that. Another difficult aspect was the menubar which I wanted to keep in place as long as possible before switching to a drop-down menu. In keeping with cross-browser compatibility, I needed to do some more jQuery magic to keep IE users happy. Below, on the left, you can see the BIE homepage on a fairly small screen, while the one on the right hand side is the same size screen with the menus expanded.

BIE website on a mobile phoneBIE website on a mobile phone with menus

With larger tablets, the design can largely stay the same as it does for desktops and laptops. However, with phablets or smaller tablets there is a little more real-estate than mobile phones, but not too much more. So the homepage needed to move to two columns. Below you can see what it looks like with a small tablet screen.

BIE website on a small tablet