Best Practices for Web Navigation Design

The navigation design of a website may not seem like a very important part, but it is actually one of the most important pieces of a website because it allows the user to easily get through to certain pages and navigate through the site. Chad Johnson states, “It is the portal to important content and can drastically increase (or decrease) site click-through”, in his article “Best Practices for Modern Website Navigation”. He also points out a few tips to help make your site’s navigation more user friendly. A few of these tips are to limit the number of top-level navigation items, keep dropdown menus to one level if possible, limit the height of the header, and to denote dropdowns with visual cues.

These are some really great tips for creating navigation menus, but it is also important to stay up to date on the current navigation trends. In the article, “3 Essential Navigation Trends for 2015,” Patrick McNeil shares a few trends that he says will dominate this year. The three trends that he discusses are the navicon, full screen navigation, and the perfection of the super-sized menu. The use of mega dropdown menus is nothing new, but the space inside of the menu is now being used for actually content and not just navigation lists. This content can be used to direct the user to the most important content.

Another thing that is really important when designing website navigation is to make it responsive for different size devices. The navicon is one thing that has been very helpful in doing this and has become the main go to system. Tim Cross discusses some ways to build a proper, responsive website, in his article “15 Best Practices for Responsible Responsive Web Design,” including a few navigation tips. For navigation, he suggests using hidden navigation menus that use a navicon to indicate where the menu is or horizontal swipeable menus that lets the content overflow off of the screen and cutting off part of the text to indicate that you can swipe to see more of the navigation. ESPN does a great job of using the hidden navigation menu with the navicon. Once you click the navicon there is a dropdown menu that pops out.

image1

“Best Practices for Modern Website Navigation,” Duo Consulting, http://thoughts.duoconsulting.com/blog/best-practices-modern-website-navigation

“15 Best Practices for Responsible Responsive Web Design,” Income Diary, http://www.incomediary.com/best-practices-responsible-responsive-web-design

“3 Essential Navigation Trends for 2015,” Web Designer Depot, http://www.webdesignerdepot.com/2015/01/3-essential-navigation-trends-for-2015/

Advertisements

Why You Should Comment Your Code

Taking a look at any type of code can be a bit terrifying for beginners, but if there are comments in the code it makes it a little easier. Comments can help point out which section is which and what is what. Using comments throughout your code is not only helpful to others who are looking at it, but it can also be helpful to you. If you have hundreds of lines of code and are trying to go back through it all to make a correction or change, it is much easier to find that certain section if you have placed comments throughout.  There are many other reasons why comments can be helpful besides keeping track of where sections are. Comments can also be used to keep track of information, such as the author, date the code was created, and the date it was last updated. This is all information that you want in the document, but don’t want to display on the webpage. Another way that comments can be helpful is if you are trying to see how a webpage would look without a certain section. For doing this you could simply just add the comment codes around the section that you want to take out and if you decide later to keep the section, then you just have to erase the comment codes instead of having to retype the whole section of code. WordPress.org explains really well how to add comments into your code for these different reasons and shows you exactly how to type them out. I will point out the two that I use most, but WordPress also shows you how to do  comments with PHP.

Comments in HTML look like this:

<!– Comment Here –>

Comments in CSS look like this:

/* Comment Here */

 

“Commenting Code,” WordPress, http://codex.wordpress.org/Commenting_CodeCode

My Ultimate Adventure

If I was able to jump in to any show and be a part of it, I would definitely be the girl who waited. I would love to travel through time and space in a blue police box that is much bigger on the inside. Of course, I am talking about Dr. Who and my favorite companion, Amy Pond! It would be a blast to get to go anywhere that you want and in any time period that you want. Also, who wouldn’t want to help The Doctor fight against the Daleks, Cybermen, and The Master?? I would personally like to stay away from the Weeping Angels and The Silence because they are quite terrifying, but I think I could handle the rest! I would also love to travel with the 10th Doctor (and I wouldn’t complain if they brought him back on the show!). Out of all 12 doctors, he is definitely my favorite. So Doctor, if you’re out there, I need you!

Introduction

Hello! I am a Senior at Pittsburg State University studying Graphic Communications with an emphasis in Web & Interactive Media. I have a white husky named Juneau and a cat named Django. My hobbies include reading, crocheting, watching TV marathons on Netflix, fishing, camping, and doing crafts. Currently I am reading The Fellowship of the Ring (Lord of the Rings trilogy), crocheting a slouchy beanie and a huge blanket, and watching Friends, since the entire series was just put on Netflix!

I had never even thought about having a blog until we were required to start one for one of my classes last summer, but once we started using it I realized just how useful it could be. After the class was over I basically stopped writing anything for my blog because I didn’t know what to write. Then, a few months later I tried to start writing again, but I couldn’t get the hand of it. I’m hoping that I can learn a lot from this Blogging 101 course and will be able to continue my blog even after it is over! The topics that I will write about will mostly be any of my hobbies listed above, my pets, or anything that I learn in school. I would love to connect with anyone interested in the same things as me, anyone that is also new to blogging, or anyone that finds my blog interesting! If I blog successfully throughout the next year, I hope that I have connected with many new people, learned how to maintain my blog and create new posts without a prompt, and improved my writing along the way.

Thank you for taking the time to read all about me, and feel free to comment a little about yourself as well! 🙂

Web Design Trends of 2014

Trends in web design always seem to be a popular topic because they are always changing. Just Creative points out some of the hottest trends of 2014, along with some of the trends that we would all probably like to see less of. A few trends discussed in their article (http://justcreative.com/2014/04/28/hottest-web-design-trends-2014/) that I am a big fan of are Big Content Blocks, Bold Typography, Fresh Colors, One Page Websites, Flat Design, Parallax Scrolling, Sticky or Fixed Position Headers & Navigation, and Minimalist. Okay, maybe eight trends isn’t “a few,” but I really do love them all! Using these trends together (a few of them at least) can make a really great website that is simple to navigate. One website that I think does a fantastic job of incorporating some of these trends is the Wanda Print website (http://wandaprint.com/home/).  Elegant Themes predicts that some of these trends will continue to grow in 2015 in their article “Web Design Trends to Look Out For in 2015” (http://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015). I hope these trends do stick around and continue to become more popular because they really are great!

Untitled

Golden Key

If I were given a key that could open anything, I would use it to open up an amazing career opportunity for my future. It sure would be nice to know exactly what my dream company is looking for in an employee and know exactly what to do/say in order to get their attention and make them want to hire me. I know that there are many things that I can do to open these career opportunities for myself, but a little help from the golden key sure wouldn’t hurt! Currently, I am in the process of applying for internships for next summer in order to graduate next December, so I could definitely use this golden key right now, but sadly, I have not found it. Until I find it I will be working as hard as I can, learning as many new things as possible, and connecting with as many companies as possible in order to open up amazing opportunities for myself. Hopefully the hard work pays off!

If Juneau Could Talk

I absolutely love my dog and would not trade her for the world! There are many things that I would to say to her or ask her, even if she could only talk for a day. I would tell her how much I love her, but I would also tell her that it drives me crazy that she doesn’t listen to me as well in the winter. Also, why does you have to bite your brother (Django, the cat) all the time, even if you are only playing?? Why do you like to tear holes in the carpet now that you’re 2 1/2 years old, but you didn’t chew very much at all when you were a baby? Why does you love every person and dog that you meets, except that ONE dog that walks by the house every day? Please don’t act like you need to go outside right after I bring you back inside! Stop eating the cat toys! Ok, ok…I got a bit carried away. Anyways, there are many things that I would like to ask her if she could talk for a day, but most of all I would tell her that I love her and that she is the best dog I could ever imagine.

Juneau2

About Me

Hello! My name is Kylee Hayes and I am a student at Pittsburg State University. I am majoring in Graphic Communication with an emphasis in Web & Interactive Media. I am also a complete animal lover with a dog and cat of my own, who are both spoiled. My dog is a white Husky, named Juneau, and my cat’s name is Django. My hobbies include reading, crocheting, listening to podcasts, kayaking, fishing, and watching TV series’ like Sherlock and Doctor Who.

Originally this blog started out as an assignment for one of my courses, but I have decided to give it another shot. Mostly I will probably write about topics that I am interested in, such as my major, animals, or any of my hobbies, but there could also be some really random posts! I would love to connect with others who are interested in any of the same topics as me or anyone who would be able to give suggestions on improving my blog.

1095013_10200835360544795_1300775065_n

Feel free to contact me with any questions, comments, or general feedback! 🙂

Web Graphics Software Course Reflection

Even though taking classes during the summer isn’t the most exciting thing, I have actually really enjoyed this course. Throughout the summer I had multiple “firsts” of things I had never done before. Building a drag and drop website, creating a blog, and coding a brand new website are a few examples of things I had never done until this class. Learning how to code a website was one thing that was really hard, but it is so cool to look at all that crazy coding and then open it in a web browser and see the website you created. I can’t wait to learn more and practice to make better websites! I also really liked that we did these blogs. I thought it was kind of weird at first, but it really helps to put what you’ve learned in to words to share with others. The blogs also made us explore things for ourselves like how to use Pinterest for business purposes, what current web design trends are, or even what not to do when creating a website. I don’t think there is anything that I would really change about this course. The only thing that I might change is that I would take it in class instead of online, but I still thought it was great!

Untitled

Navigation Design

One of the most important components of a website is the navigation menu. According to Smashing Magazine, “Navigation gives you a window onto the website designer’s creative ability to produce a functional yet visually impressive element that’s fundamental to most websites” (http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/#more-22959). A few current trends in navigation design are 3-D Navigation, Speech Balloons, Rounded Corners, JavaScript Animation, and Unusual Shapes. “Navigation is a big focal point because you need to handle the shift between desktop to mobile in a usable manner” (http://blog.teamtreehouse.com/popular-web-design-trends-for-responsive-navigation). A few trends that deal with the shift between desktop to mobile are Re-sizing and Positioning, Select Menus, Overlay Dropdowns, Block Dropdowns, and Hidden Shelf Sliding Menus. One website that I believe has a good navigation design is SproutBox. This website has good navigation design because the menus are a light green box with rounded corners and dark green writing, but once you click on a menu it changes to a dark green speech bubble so you know which page you are on. Another website that has good navigation design is The Crazy Love Campaign. The navigation design in this website works really well because it is placed at the top of the page with the same background pattern as the rest of the website, but in a lighter shade. Also, the font is very different and gives it a unique look. One more website that I think has good navigation design is Think Up. The navigation links for this website are very cool and unique. They are crumpled post-it notes and when you hover over one it changes colors and when you click on one it brings it forward to see the whole note.

Untitled