When you want to fill the space…CSS Grid it!

Graduation is upon us once again in higher education, and for another year, it is taking place online (though there are some in-person ceremonies for those that would like to attend – while social distancing of course). What does an online graduation celebration look like? For the College of Natural Science, along with many of the other colleges on campus, it looks a lot like a custom website. Let’s take a look at one specific feature of the NatSci graduation site, the use of CSS Grid.

Screenshot of the NatSci graduation website Student Highlights page
Screenshot of the NatSci graduation website Student Highlights page
Continue reading “When you want to fill the space…CSS Grid it!”

Daughter

You’re the joy of my life,

You’re the sparkle in my eye.

When I’m feeling down, mad or upset,

Your laugh, your smile and your hugs brighten my day.

You amaze me with your intelligence, curiosity and wonder,

And your personality is one all it’s own.

Daughter, you’re the greatest gift I could have ever asked for,

I love you with every fiber of my being, with every ounce of my heart.

My daughter and I
My daughter and I

Finding a Santa

A few weeks before, Thanksgiving we started to get into the holiday spirit by bringing our Christmas tree up from the basement. We didn’t decorate it right away though. With RIley now crawling, we wanted her to grow accustom to it so that she didn’t crawl over to it every moment we set her down on the floor. A week before it was turkey time, we decide to go ahead and decorate the tree, hang the wreath that Meghan made, and get our stockings up. During that time we talked about trying to find a Santa Clause for RIley to meet and take pictures with. A quick Internet search showed that wasn’t going to be cheap!

Continue reading “Finding a Santa”

The Website Redesign Process: Part 5 – Rounding out the pages

In Part 1 of this Website Redesign Series, we took a look back at the old web design for the College of Natural Science at MSU , and where I was able to bring the design to during a redesign that began in 2016. In Part 2, we looked at some data points that analytics were showing us, and talked about how those would affect the redesign of the college homepage, and then sketched out what a proposed homepage redesign would look like. In Part 3, we took a look at the technology I’d be using to build the new design. In Part 4, we took a look at the work in progress for the homepage design, along with some issues that were encountered and how those were remedied. Here in Part 5 we will be taking a look at the remaining page designs, and the thought behind them.

As noted in Part 4, in addition to the homepage design, I needed to come up with designs for:

  • Section Front page – a page devoted to the primary areas/categories/buckets of the website. Generally speaking, these are the pages that appear in the primary (top) navigation bar.
  • Secondary page – a page devoted to providing information. Generally speaking, the majority of pages on the website will be of this page type.
  • News Article page – a page devoted entirely to news articles

Each of these pages will have a hero image/banner at the top, and the content area will be split into two columns for desktop view (left column for content, and right column for secondary navigation or any related content), and a single column for mobile view (content first, followed by secondary navigation/related content below it).

Continue reading “The Website Redesign Process: Part 5 – Rounding out the pages”

The Website Redesign Process: Part 4 – A work in-progress

In Part 1 of this Website Redesign Series, we took a look back at the old web design for the College of Natural Science at MSU , and where I was able to bring the design to during a redesign that began in 2016. In Part 2, we looked at some data points that analytics were showing us, and talked about how those would affect the redesign of the college homepage, and then sketched out what a proposed homepage redesign would look like. In Part 3, we took a look at the technology I’d be using to build the new design. Now here in Part 4, we will be taking a look at the work in-progress, issues I’ve encountered, and what some resolutions have been to those issues.

Just to recap from Part 3, I decided to go with CSS Grid over a front-end framework. Now you might be thinking to yourself, “But Jesse, IE doesn’t fully support grid!”. And you’d be right, but based on our analytics, less that 3% of our website visitors are using IE. In fact, over 90% are using Chrome or Safari.

Continue reading “The Website Redesign Process: Part 4 – A work in-progress”