New design launched for ScienceLeadership.org

Posted by Chris Alfano on

Following a couple months of tweaking and tuning, a new design for ScienceLeadership.org has come out of beta and landed for all to use!

The main impetus for creating this whole new design was taking advantage of a new trend in web development called responsive design. With a responsive design, a website can change how it looks and how it's laid out on your screen based on the size and type of the screen you're viewing it on. This should make it easier to use the site from a phone or tablet without having to scroll and zoom all over a page intended for big computer screens.

Use the comments section under this blog post to let us know what you think, especially if you've spotted any problems or have ideas for improvements. If you need to get to anything urgently and are having trouble finding it with the new design, the old design will remain archived here.

Comments (8)

Sarah Stuart (Staff)
Sarah Stuart

A couple of suggestions for the calendar: 1) Dates for the end and start of quarters & and when grades are due. 2) Would it be possible for HSA to submit calendar items, such as meetings, etc.? 3) How about a month to month view? So, parents can view spring break, or last day of school, etc.?

Gamal Sherif 
Gamal Sherif

As for pictures, it might be nice to have a feed that students/teachers can drop images into — and the photos would appear on the website.

Maybe a yearbook photo editor and/or teacher can sift through and rotate them every month.

Chris Alfano (Administrator)
Chris Alfano

Thanks for the feedback everyone, these are valuable suggestions, keep it coming!

In-page login - We will look at restoring login without leaving the page, probably through an in-page popup.

Pictures - We'd also love to add some pictures to the home page, similar to how the Beeber campus homepage. Does anyone have a picture they'd like to nominate that represents SLA well?

Text Size - We think the larger text size is for the best for making the site easiest for everyone to read. We will keep an eye on ongoing feedback though and consider reducing it a point or two if there seems to be a concensus.

Calendar - The calendar is setup to show the next 12 events. Normally, it won't be this long, but winter break is one event that spans 9 days, and then EduCon takes up 3. We've taken note for a future version to enhance the calendar so that when there is a string of days with a single all-day event, they'll be collapsed into one row and we'll just show the date range. We're also thinking about doing something to break up weeks.

Colors - We tried to stick to the school colors for the base design, with the hope that pages would be made vibrant by the content within them like blog posts with pictures and videos. We're going to look for opportunities though to incorporate more color into the base design.

Extra pixels in border - Great catch Wilson, this in indeed a mistake caused by the line intended to separate blog posts showing up where it shouldn't.

Morgan Caswell (Student 2016)
Morgan Caswell

Overall, the coding is very nice and its very responsive, and mobile layout looks nice. I agree with Wilson, that everything is really big. I would make things smaller and I don't really like how you took the login bar off the top and now how you have to go to another page to go sign in with your SLA account. Also, the color scheme is very very very cold, and its awful boring. The calendar on the side is way to big, it takes up like a quarter of the page. But then and again, its okay,

Wilson Biggs (Student 2016)
Wilson Biggs

To be honest, it just seems too /big/. Also, there are a few creases that need to be ironed out, like the extra pixels in the border below the logo (http://gyazo.com/f8e7fc46b87e8e0a246f2e353a162068.png). Also, the coloring is kinda weary on the eyes- not because of extra color, but because of a lack of color. It needs more complimentary or warmer colors; not just cold gray and blue. Also, the former navbar has been pushed into the corner; it's less accessible there and harder to find. The calendar sidebar also adds a ton of unnecessary space to the page; you don't want to have to scroll past 3000 pixels of nothing to get to the footer. I'd replace it with something smaller. Also, it takes up a lot more horizontal space than it needs to. Content only takes up about 2/3 of the page with this setup. Overall, I like the old design better; this design would be better off as a mobile-only interface, which would automatically be triggered when accessed via a mobile device. That's about all I see. Thanks for reading, I guess.