The Emma Eccles Jones College of Education and Human Services is committed to quality teaching, outreach and research. It is home to eight departments. Graduate and undergraduate programs are strengthened by an on-campus elementary school and three stand-alone centers.
I had been serving primarily as the graphic designer for the College of Education and Human Services at USU for a few months before I merged into the web development field. I had taken multiple classes on web development and needed some way to break into front-end development. I knew redesigning the homepage was my chance to knock this out of the park, even more so than with other projects.
To be honest, even though I had been asked to create an image for the banner before the redesign, I never liked how it looked and functioned. This was my first area to redesign. Essentially it was an image with text and pictures. There was a faux button that the user would click to go to the main story. This was a problem because, first off, it wasn’t actually text, and second, the button wasn’t really a button. The image itself was a link. The “button” didn’t actually change or indicate that it was something clickable besides the idea of the shape and visual appearance. With most buttons, you can tell you can click on it because of a hover effect with CSS.
The second flaw I worked on was the footer. With all the websites within USU, the footer content was not effectively responsive on mobile. When viewed on an iPhone, the content became crowded and even cut off. I needed to find a new way for this to stand out from all the other websites on a mobile screen, even if I had to do away with the template provided.
I first began with the overall design of the website. I wanted there to be one main story as a jumbotron, where there could be a background image, and text overlaying the image in a readable manner. I used Sketch, a program that I was just learning, to design the website with a new interface.
After Sketching ideas and going through an approval process, I tested my ideas using Brackets and GitHub Pages. When I achieved the look I wanted, I went to a test website within the web development framework we use called OU Campus. I soon learned that not everything transfers over well. The biggest drawback is that we do not have access to the head tag, and are only allowed to work within the container or wrapper. The design I chose to implement broke the container. If it were within the container, it would look boxy; visually just as boring. I wasn’t about to let that stop me. I was determined to make it happen, even if I had to cheat the parameters a bit.
Really, what it came down to with breaking the container was using negative margins. It wasn’t too complicated to do, except that because we didn’t have access to the header file, we couldn’t add CSS, and if we tried a workaround for that, it would get erased on publishing. Lots of bugs, right? So I moved to jQuery. I had originally designed for the container to span the entire window, but after looking at the page on a 27” screen, you started to loose the background image. So I gave it a maximum width. On a laptop or smaller desktop, the image would span from side to side, but it will cut off at a certain width on a large screen. I had seen Microsoft do something similar on their website. Then I included some area for text, and a button. This looked great on a desktop, and worked very well.
Another little thing I don’t think that anyone on campus even had worked out was having the jumbotron text on a mobile screen. On USU’s current site, if you look at it on a smartphone you will notice that the text is really small, and covers the image, which doesn’t allow you to view it well. I knew I could type this out twice and hide/show on mobile, but I don’t want to type out the jumbotron text twice every time. So I went back to jQuery. With simple scripting, you can take the text from one div, and throw it in another. Then you type it once, and jQuery writes it the second the page is loaded.
Next for the footer, I had seen many examples of websites that have a lot of information in the footer condense it to be only what people really need. Microsoft and Apple both collapsed the information into an accordion. I liked the idea, so I did the same thing. Because we didn’t have access to the CSS, I did a lot of inline CSS and added minor jQuery for some basic functionality. I left the default section for tablets and larger, and the phone will show only the accordion. The “+” and “-” icon change on collapse and expansion which helps visually for people to see what is expandable, and what is simply a link. The issue with this is that you do need to type the information twice. However, we don’t change the footer content that much, so it would only be tedious for about 5 minutes every 2 months or so to update.
As a result to the redesign, we have received a lot of extremely positive feedback, even to the extent of having the top website between all the colleges at USU. I have even had someone say how excited that “the guy who designed CEHS” is working on their website. I learned a lot about requirements and restrictions for working within a development framework on a university level. Not every project will I have full access to the code, but it doesn’t mean that what you want to do is impossible.