Final Blog Post- Web Design

Index Page: 

My index page includes links to my most profound websites. It also features different links to websites that are important to Olathe Northwest and the eComm program. I am very proud of the websites I have made this year, and glad I can share my hard work with others. You can visit my index page http://eravensonline.net/students/129emb10/

Favorite Project

My favorite project this semester had to have been when we made the family div. I really enjoyed finding different backgrounds that described each of my family members personality. I also enjoyed making the different slides fade in and fade out. The biggest reason on why its my favorite project has to be watching the members of my family see the website for the first time. Visit my Family apDiv! http://eravensonline.net/students/129emb10/ApDiv/family.html

Summer

Some plans for Summer 2015 are surprising my cousin in Colorado at his graduation next week. My parents also surprised my family with a trip to Aruba, and a trip to California to visit my brother. I plan to follow Photo Composition rules while taking a ton of pictures on vacation! The biggest thing that is happening to me this summer, is getting cleared to play soccer. I tore my ACL last August and since then I have been rehabbing from surgery for 9 months. June 1st is the day I hope to get cleared to play! I pan on hanging out with my sister a lot this summer because next fall she will be attending University of Arkansas. 

eComm 2015-2016

Convergence Journalism is the focus I chose to go into for my junior year. I was drawn into this area because I was really successful when we did this unit in video class. I can also take my creative writing skills and tell a story that has a meaning: a beginning, middle, and end. I look forward to next years eComm class, and will still continue to make websites and short films. Hopefully, all my eComm skills will help me in the future, and I am excited to carry on in the eCommunications program.

Responsive Web Design

Definitions

Responsive web design: An approach that suggests the design and development should respond to the user's behavior and environment based on screen size, platform and orientation.

Why has responsive web design become so important? Responsive web design has became very important because it makes navigating through websites simple on any device, and allows the viewer to see the whole web site instead of zooming in and out.

Media Queries: It allows content rendering to adapt to conditions such as screen resolution.

Breakpoints: The point at which your sites content will respond to provide the user with the best possible layout to consume the information.

Responsive Websites

 On the wide responsive website, there is a sidebar with a column with 5 drop down options. The main message is centered on the web site with a gif of someone on an iPad working the website.  (desktop)

                 
 The medium responsive site brought the drop down menu to the bottom of the page and turned it into 5 different rows. The size of the main message gets bigger and the gif of the person on the iPad turns into a solid picture. (tablet)

The small responsive website pushed the menu 

further down the page, and shrunk the main 

picture. More news is posted the more the viewer

scrolls down. 

Desktop vs Mobile

Definitions/ ONW website data: 

A bounce rate the percentage of visitors to a particular website who navigate away from the site after viewing only one page.

The mobile bounce rate of the Olathe Northwest web site is the highest percentage out of mobile, desktop, and tablet. Page rate session shows the desktop and tablet percentage is consistently higher. The average session rate shows that desktop percentage is higher but decreasing throughout the year.

When looking at something on my phone I am most likely looking for an email or an address/ phone number. When on a desktop I spend more time looking at articles and browsing for different things. 

Comparing Data:

According to Rebecca Murtagh, Internet usage on mobile devices exceeded PC desktop usage. In another article by Sarah Perez, a chart is picture which shows from March 2013 to June 2014 desktop usage has decreased by 13%. During those years mobile usage as increased by 13%.  Another article by Peter Peckarsky, shows us that mobile usage is increasing at a high rate while desktop usage is decreasing at a low rate, and mobile will soon pass desktop on most used internet devise. Our data from the ONW website shows a steady increase rate of mobile devises and a decrease rate on desktops which supports all three articles that I viewed.

Links:

http://searchenginewatch.com/sew/opinion/2353616/mobile-now-exceeds-pc-the-biggest-shift-since-the-internet-began

http://techcrunch.com/2014/08/21/majority-of-digital-media-consumption-now-takes-place-in-mobile-apps/

http://www.engeniusweb.com/blog/mobile-exceeds-desktop-internet-usage/

Blog Improvements

   This past week I have been updating and changing my blog. Creating and organizing a blog takes a lot of work and can be challenging at times. Through this process I had to use the method of CARP and change css. When using the CARP method I changed the colors on my blog; I now have 3 different colors of blue that are similar but still very different. I changed the font of headings, dates, and text. Going into the css was the most difficult part. I had to open firefox and figure out how to add boxes around everything in the sidebar. In the sidebar I added an 'about me' section which gives a very brief summary about who I am and what my blog is about. I created a tag 'cloud' and went back to all my posts and added tags to them. There is also a new drop down menu where the user can search by date to see a post. Below you can view images on the different font, color, and sidebar. 

Website Biography- Project 8

Home Page

Link Page

                                 

The picture above is a screenshot of my home web page and Link page. I used CARP in this by changing the font of the title and the font of the text to be different. I also change the color of my background so it contrasts with my red text. The purpose of the "wrapper div" is to group things together. It also seperates headings and body paragraphs from side bars, headers, and footers. The new way we included the CSS is by making a whole new page for just css and deleted it from our home page and link page. We then attached the CSS page in the code in both the link page and home page. For our photo we cut out our photo in photoshop by using the pen tool. We also color corrected it by changing how light or dark sections in our picture were. For making our seamless background we opened it in photo shop and began using the clone stamp and smudge tool to make it look seamless. We also changed the color of the photo to our own personal style.