Redesigning a High School Website

For this project, I looked up school websites, and then using the same color-scheme and content, recreated the home page based on a company site. Below is the original school website, the company I am basing it on, and then my creation of the website. Then I go into the minor things I did.

Original School Website

Company website

My Website

Okay, So now I will show you different aspects of my website. I will show you the hover colors, the logo difference and responsiveness of my site. However, I did not add a translate button, as the school  did.

My Site is responsive, but the school's was not.

The hover color is red, with a background of blue, to keep the color scheme of the website.

I kept the blue color in the eyes. But I didn't know what their logo was until I saw the address of "RedHawk"

In Summary: I would like to show you a side by side of my website and theirs, and let you know I kept the color scheme, and content (except for the translate), changed logos, and also made it responsive.

To see the model of the new website's home-page (only the home page!!), click HERE

The need for mobile sites.

  Think about how many websites you visit a day...Theres probably more than you think. Food,maps,shopping, school work, pictures, Facebook, any social media. With millions of websites out there, why would you not? The information is at your fingertips! But, how many of those sites did you use the internet on a phone or mobile device.

Each year the percentage of mobile users compared to desktop users are increasing significantly. With 4G internet, easy access, and many needs, people are constantly researching and looking online. However, with the sites so convenient and recognizable, people go directly to the page they need and exit. There is no need to log onto a computer and sit down for something that you only need for a couple seconds to minutes. We always have our phones with us, so why not?

Don't believe it's true?

Well, taking my school site "onwravens.net" statistics, you can see the change. In 2013 to 2015, the number of desktop users dropped around 23%, and mobile usage doubled to 35%, not to mention tablet usage also increased 3%. Now this is a school site, so of course people are not checking this everyday, like they would maybe Facebook. For this site the bounce rate, which is visiting a website for one page and then exiting, was high. More than fifty percent of people visited one page on a mobile device before leaving in 2012, and this continued, and increased, in 2015. Compared to desktop with people viewing more sites and less of a bounce rate, it shows that people use there phones a lot more for quick, one page looks, before leaving to do something else. I predict by next year the numbers will keep going up, and the only need for desktop is for more "efficient and longer" task, but to just to check the weekly announcements, stick to your phone.

Is this true for other sites?

Smart in sights

First take a look at how the global usage of data compares. Now looking at this chart from Smartinsites, shows us that mobile users has surpassed desktop, and continues to grow. It was predicted in 2010, that this would happen, and they were right! Think about why this would happen? Technology has grown significantly and is constantly improving. It's like when the new iphone comes out. As soon as you get that new phone, a new one is going to come out next month that all your friends have or you see advertised. People adapt with the technology. 

Clickz

Now for specific sites, here is Amazon.com. There was more desktop usage in 2014. However, with amazon, people are using credit cards and shopping, so maybe they want to be more careful...OR maybe they haven't seen the more "convenient" way.

clickz

If you don't know, amazon has an app! During June of 2014, hardly anybody was using the app, but by November the chart sky rockets. The app is advertised, people are informed, its easy, it's quick, it's on the edge of your fingertips on click a way. And thus, the mobile percentage of users increases. This really makes you think about if your building a website. It should be responsive and work on a mobile device!

Improving the Blog

Things I Did To Improve My Blog

Adding My Logo

The first thing I did was add my own logo in the header. By adding your own logo, it  gets your "brand" or "company", or your personal icon out there to the world. It helps establish a more personalized blog. 

You can also use this as a favicon!

Favicon

I added my logo as the favicon in order to show it in the tabs. This helps people remember your logo, and as a bookmark, or app, it will appear with your icon.

Customized CSS

By customizing the CSS in your blog, like I did, you can make changes to fit your style and color scheme. It allows you to make customized changes, and add your logo in the header! I also adjusted the position of my header H1 to make more centered and not floating awkwardly in the upper corner.

Customized Gadget

A  customized gadget allows you to add gadgets that are not already available. You can title and customize these in any ways. For mine I did "About this Blog", however I could of done anything I wanted.  There are many side gadgets all ready prepared to use, but this was something I didn't have in my blog, and later I can go back and change this if I choose to.

Adding Pages

A page can be added to your blog to help organize it and make sure important post don't get lost. It's different than just posting it because it's on a separate page by itself, that can be customized to anything the user wants. I did a photography page, for an example. It didn't relate to web design, so I didn't make a blog post, but a page instead!

Adding Labels

By adding labels or "tags" to your blogs, more people can find your post easier. I labeled mine "Browse by Topics" because that is basically what your doing. This is sort of like hashtags on Instagram. People can find your post and blog by these key words. Add words that relate to each blog and blogger compiles them for you to add in a gadget. Then users can go on your blog and click the topic or subject they want to see blog post about.

Customizing the layout

 You can customize your blogger with different color schemes, backgrounds, logos, images, headers, and more! I personally used one of the templates and customized from their using their other background options. However, you can choose to upload your own images for a background. Also if you go to advanced settings,  you can edit the color choices and images. I chose to do a pink color scheme to match my background. I chose header options, link options and text editor to make them pink and the title Turquoise.

Adding Social Media buttons

With a social media gadget, people can pin you, find your youtube, twitter,facebook, and other social media gadgets. This spreads your name!!

What is displayed?

I customized by blog post to only show one post on the main page because if not you would be scrolling and scrolling. You can customize this to make however many post you would like to show and choose how they are displayed and what text will be shown to get readers to see your other post.