janichkokov

[janichkokov]

Final Project Reflection

Doing the final project has given me a lot to think about. I was debating about trying to do a website from scratch to test out my HTML skills, but I opted to use the Wix editor instead. This was partly out of convenience, as I had used it before and would be simply easier than coding from scratch. But I also had ideas in mind of what kinds of features I could include in my site using Wix – things that were beyond my skill with HTML (like including a blog, animated background, and a mailing list). Another big thing was that Wix already include lots of images and graphics. I think when a lot of people talk about web design, they focus on coding. But creating good quality images requires a lot of time, skill, and expensive equipment and software. I used a lot of my own images, and they’re okay. But they are a far cry from the professionally photographed food blogs that I was trying to emulate.  

This time around with the Wix site though, I was able to apply what I learned regarding headings and alt text. I never worried or bothered with this stuff before, but now I made sure to choose them carefully. Wix builds in a lot of features though to encourage good design. It outlines clear headers and footers and has a sort of grid to encourage good mobile design. I have not optimized that part of the website yet, but that is the next step. I want to make my site as accessible as possible. I am really excited by this trend in web development. Not only is it the right thing to do in order to make the web more available for everyone, regardless of ability, but I think clean, efficient design makes things better for everyone.

[janichkokov]

I just finished this Wix site for my final project. I had been meaning to work on something like this for awhile, but now here it finally is. I’m really happy with how it turned out and I’m looking forward to tweaking details and actually using the site. For the sake of brevity, I kept a lot of the content, especially the blog content, very basic - some of it is more placeholder than anything. But I tested everything and it works well. I will note that I did NOT optimize it for mobile as of this writing, but that is coming soon. I linked my social media accounts and included a mailing list feature as well. 

[janichkokov]

Let’s talk about wireframes....

So...I was initially intrigued by the concept of wireframing, where one makes a mockup of their website or software.Check out this cool link shared by one of the articles from the lecture notes, which has pictures of different wireframing tools.  I like idea of planning ahead and a lot of these tools look really cool. But the first few I checked out require creating a login or paying for software, and frankly, I found that very tiresome for something that can be easily done with a pen and scratch paper. However, I think these tools will really become helpful when you work on a website with a lot of other people. In that case, an interactive mockup can be really useful for collaboration. But at this stage, its just me, so scratch paper it is. 

[janichkokov]

HTML & The Semantic Web

The HTML Essentials course really opened my eyes up to how much HTML has evolved since I played around with it over 15 years ago. The first thing that stood out was how headings are supposed to be conceptualized. I know before I used to do the exact thing they say not to do in the video, which is use a <h1> tag for bigger text and <h6> for smaller text. Those headings actually have meaning in terms of an outline. If I would have known that back then, I would have designed sites much differently. It also gives me a lot to think about in terms of crafting my personal website. I also appreciate the explanation of the difference between the <emphasis> / <it> and <strong> / <bold> tags. I know those have been around for a while, but now that I know they’re for screen readers, I feel kinda sheepish that I hadn’t thought about that. It’s really started to sink in how much accessibility is driving innovation in web design. It’s also made me think a lot about how I finally get what “the semantic web” means. I knew vaguely that it meant having the web correspond more closely to actual human understanding. I didn’t know how this was really accomplished though. I got a little bit of it in the Organization of Knowledge class, but here in a hands-on settting, I was happy it clicked. All of this has also helped me understand more about what the heck HTML5 actually is and how it’s different from earlier versions. Basically it’s the same HTML tags, but new best practices. There are new tags, but they build on the old ones. It’s just so interesting to see how the platform has become more sophisticated - not necessarily in a technological way (its still text files after all), but sophisticated in terms of inclusion and design. 

[janichkokov]

Brackets

The HTML Essentials tutorial introduced me to the program Brackets, which I’m now a huge fan of. It’s been a long time since I’ve done HTML, and I used to just use notepad - and that was great. But I found I’ve started to get a hang of the automatically generated tabs, and the flash preview is really nice. No more painstaking combing though code...it’ll just highlight it red for you. Oh and it’s open source & free, so win-win there too. I’m looking forward to learning more about the different plugins and other features. I downloaded the outliner plugin that the tutorial noted. I don’t feel knowledgeable enough to download other plugins or delve into some advanced features, but I am looking forward to getting there. Between FileZilla and Brackets, I’m pretty excited about building my toolbox of high quality opensource tools. 

[janichkokov]

HTML5 & Flash

There’s some overlap between this web design course and my Web Archiving course, which is always nice. I was writing my final paper in that course about Flash games and the effort to archive them. I read a lot about how Flash content was being migrated over to HTML5 format, but so far, I don’t really get how that happens. I’m looking forward to learning more about HTML5 and those interactive elements it allows for in order to see how this migration actually takes place.  

[janichkokov]

ePortfolios

I am in the fortunate position to be done with my ePortfolio (huzzah!). I chose to do a website for mine and you can see it here (https://janichkokov.wixsite.com/portfolio). I am graduating imminently and had to submit it earlier this semester. This actually caused me a tremendous amount of angst because I lost track of deadlines and hadn’t worked on it much throughout my program. Then, at the beginning of this semester, I thought the whole thing was due and put everything else on hold to finish it…only to find out the due date was much further out. The good news is that my scrambling at the beginning paid off later in the semester, but I got behind in a lot of other coursework early on…ugh. Long story short…I’d advise y’all to pay attention to the due dates throughout the program and you’ll be in much better shape before the end.

Once it was done though, I was very happy with the final product, and I think it will really help me with my job search. My advisor also liked it (and approved it), which also made me super happy. I took a lot of the projects I made throughout my courses and converted them into blog posts. I also posted some videos I made along the way on YouTube. I think the website format is probably the best format for this kind of thing since it is multimedia in nature. It allows me to show off the fancy technology skills that I learned (which are so desired in all these job postings I’m looking at), and it also allows me to use some creative flair.

One of the things that I found challenging, and, admittedly obnoxious, was relating all these assignments to competency goals and core classes. The technical solution I found was tagging each blog post with their corresponding competency goal and class and having different sections of the website. It’s a bit difficult to describe, but if you look at it you’ll know what I mean.  It turns out, I was probably overthinking this aspect, but the end result works. The narrative portion, in which you sort of justify why those projects helped you fulfill those competencies, helps round everything out. However, since this section is tied very specifically the USF LIS program, I will probably duplicate the site and redo it completely when I hit the job market. I think I will organize the artifacts by library topic (scholarly communication, reference, administration, etc.) instead of competency goals, since I suspect employers are not looking at Goal 2B or whatever. I also plan to populate it with other works that I’ve done from my previous M.A. in History, thus turning it into more of a holistic professional site.

Since I chose a web site for the platform of my ePortfolio, it directly meshes with this class. However, I used a WYSIWYG editor, Wix, which requires no use of HTML, JavaScript, or any other coding. The platform is so full featured, that just about any feature you can imagine is easy to plug in and use. Toward the end of the project though, I wanted to incorporate collapsible menus for my narrative, and I thought this would require JavaScript to do. I ended up finding a workaround (I modified the Wix’s FAQ feature), but it gave me a chance to explore the advanced options and see what one could do. These platforms (WordPress too), allow for an incredible degree of customization, but eventually you’ll want to do something there’s no template for. Here is where coding comes in.

Another thing I thought about a lot was “clean” design, design for mobility, and design for accessibility. I tried to mimic contemporary minimalist design in my portfolio, while also keeping my individual tastes and style. I chose a top navigation bar since that fits with mobile design much better. I also made a lot of modifications as a result of these tests. For example, the abovementioned collapsible menus came about when I realized how difficult it was to navigate my narrative on a phone. It was a really interesting project and has reignited my desire to explore web design deeper, possibly even for a career.

[janichkokov]

While my experience using FileZilla was not technically complete (I couldn’t connect with the USF server), I’m happy that the walkthrough in Module 3 at least got me acquainted with it. I’ve heard of FileZilla before, and I know FTP has been a standard way of moving files on the web for years. But now I know how it’s actually used, what it looks like, how to move files, etc. I’m looking forward to using it with a real website, instead of the hosting environments like Wix where you just upload all your documents. 

[janichkokov]

LinkedIn Learning

I discovered LinkedIn Learning (formerly Lynda.com) recently and it’s a really awesome resource for learning tech skills quickly. I put the videos at 1.5x or 2x speed and cruise through them. I went through some of them this summer before class. thought I already did the HTML Essentials one that was assigned, but I double checked and I just went through part of it when I was exploring a lot of different courses one day. I completed the Introduction to Web Design and Development course and I recommend it as a starter. It basically gives you an overview of the web design profession and gives a primer to the basic skills you need (HTML, CSS, and JavaScript - in that order). I’m looking forward to finishing off the HTML Essentials course, and I plan on moving on to CSS, JavaScript, and HTML5 courses over the break. 

[janichkokov]

After working on the web evaluation project, I was left with both harsh criticism and new respect for my library’s website. It is super basic... barely any images at all and clunky old-school functionality. It looks kinda like a web site from 15 years ago. I was prepared to bestow it scathing criticism. But once I evaluated it according to the criteria I set up, it actually fared pretty well. It’s super-basic design means that it was friendlier for mobile and accessibility. And while it lacks fancy features and graphics, it has TONS of information. All the basic information a user needs (hours, phone numbers, contact emails, etc.) can be found fairly easily. The OPAC is in need of an overhaul, and there needs to be discovery layer, but that’s actually in the works, so...good news there.

[janichkokov]

Website Evaluation Checklist

For my website evaluation checklist, I decided to choose some things that I wouldn’t have initially thought of before taking this class

Use the “Bite-Snack-Meal” approach to articles and posts. One of the things I wrote about was surprising information I got from the Manzo (2015) article about Buzzfeed. This was what stuck in my head most from how we can evaluate library design, mostly because I had dismissed websites like Buzzfeed before. I still think we should use some caution with adopting the “clickbait” or “listicle” models, because I think people are getting tired of it. I know when I see a Buzzfeed-esque title, my mental spam-radar goes off and I scrutinize the article more. Nonetheless, there’s a lot we can take from some of their models, and one that I agree with is the bite-snack-meal approach to articles. This is already something that we use in an academic setting (subtitles and abstracts), so it seems tested and true. It also seems well formed to helping library users find information they need quickly.

Website is mobile and tablet friendly. I knew about this already, but I didn’t quite realize some of the design subtleties until this module. I thought EBSCO’s webinar (EBSCO Information Services, 2017) was especially helpful at giving examples of how to tweak the design between platforms to not only optimize the site’s functionality, but also just enhance the user experience. I especially encourage the reader to check out the middle part of the webinar by Kevin Horek (approx. 20:00 minute mark). For example, mobile users tend to seek different information than desktop users, so the content may need to change slightly.

Website should be accessible to people of all abilities. Henry’s (2018) advice on this was particularly helpful, as it reminds us that accessible websites are just better all around. For example, close captioning is great for those who are deaf, but also for those who can’t turn up the volume that moment. It’s a win-win, and it’s becoming increasingly easier to make one’s website accessible with lots of handy tools.

Website has “clean” design that also has unique colors or graphic elements. This became apparent after looking at all the examples listed in the “The 25 Best Library Websites for 2019” article (2019). One of the consistent things between all of these sites was the so-called “clean” design inspired by a lot of blogs and mobile design. This includes a small menu at the top, as opposed to say, 15 years ago when the menu was typically on the left. Another element I noted was simple, modern iconography. I’m thinking of how 5-10 years ago or so, every icon had this weird little fake glare over it. Steeber (2018) shows you more of what I mean. The best websites had crisp, consistent branding and weren’t cluttered at all. One thing I liked was the websites that avoided the all-white, banal, focus-grouped colors and chose bold, high contrast designs for their websites. This may feed into the “persona” concept that Manzo discussed. The bold colors give their websites an edge, a personality. A few examples of this are the Salt Lake City Library, Newport Public Library, and the Central Arkansas Library System websites.

Website includes a sitemap. This may not be a chart-topper for most people, but I included it because I was partial to the old-school solution. This has been a consistent feature of websites since they started, and I like that it’s still around. I think it’s a counterpart to the clean design idea noted above. Too many pretty, modern websites are so “clean” that I can’t find the content I’m looking for. The search bar is great, but what if I’m not sure what to search for? Sometimes you need to be able to browse all content, or you want to make sure that you’re not missing anything. The sitemap takes care of that for you (Rand, 2014).

All of the above items are discussed in multiple sources from our readings, but these are the resources I found most helpful, and the ones that showed me new angles. I’m looking forward to putting some of these principles into practice.

References

EBSCO Information Services. (2017, March 1). Secrets to creating a wow worthy library website WEBINAR. Retrieved fromSecrets to Creating a Wow Worthy Library Website WEBINAR

Henry, S.L., ed. (2018, September 20). Evaluating web accessibility overview. Retrieved from https://www.w3.org/WAI/test-evaluate/

Manzo, C. (2015). 5 lessons library websites can learn from Buzzfeed. Weave, 1(3). Retrieved from http://dx.doi.org/10.3998/weave.12535642.0001.302

Rand, S. (2014, March 6). 24 things to consider when designing and developing a website. Retrieved from https://www.socialmediatoday.com/content/24-things-consider-when-designing-and-developing-website

Steeber, M. (2018, July 10).  10 years of the App Store: The design evolution of the earliest apps. Retrieved from https://9to5mac.com/2018/07/10/app-store-10-years-design-evolution/

The 25 Best Library Websites for 2019. (2019, May 2). Retrieved from https://meetpiola.com/the-25-best-library-websites-for-2019/

[janichkokov]

[janichkokov]

A lot of the internet history content in the course reminded me of hypercards. For those of you able to play on a Mac in the 80′s and early 90′s, hypercards were like digital note cards. You could combine text and images into a “stack” and click on text and areas of pictures to link to different cards. I remember making some stacks in elementary school. I had completely forgot about them, but a coworker and I were talking about web archiving and he brought up the fact that hypercards are considered sort-of endangered technology. This is a big shame because a lot of how the web is designed and functions was based in part on the experiences of using hypercards. This article was fun and helps put a little more historical context around the medium.

[janichkokov]

Thank God we don’t have that stupid glare around anymore. 

[janichkokov]

This is a website I made for my friend’s band, Ouch! Me Arse back in 2004. Its still here on the internet! The site popups are so frequent that it’s almost unnavigable, but I’m actually really proud of this thing. I built it from scratch with HTML code and made most of the images. My friend gave me a bunch of pictures and doodles he did for their album covers and I just went with it.

[janichkokov]

Looking back at Module 1, I thought about these videos and how much I liked them. I think they’re super user-friendly and helpful. I’m surprised at how many websites about the history of web design are either old-looking or out-of-date. I thought about that with the Internet Hall of Fame Timeline. 

I looked a little bit deeper into Code.org and found that it’s a whole big initiative to get people, especially kids, to code. There was even a video from President Obama encouraging kids to study computer science. This is great and all, but I’m a bit skeptical of the huge STEM push nowadays. I think its important, but it’s definitely having an impact on the liberal arts/humanities, which is hugely problematic. Imagine if there was a big national push to get people to study history, take art classes, or study anthropology? This would be amazing and would probably yield a lot of interested benefits that we couldn’t even imagine. But STEM fields are easily marketed towards well-paying jobs. That’s part of what I’m doing the Library Science degree for. Ah, that’s a whole other rant...

[janichkokov]

Marketing and Web Design

There was a lot to think about from the readings and the videos this module that demonstrated how interwoven marketing practices have become in web design. I know that for a long time now, marketing departments have known that websites are important, but now it seems that marketing is a whole subfield of web design itself. In all honesty, most marketing jargon makes me feel icky, but I get it. I thought the Buzzfeed article was surprisingly helpful. I rolled my eyes a bit when I saw the title (oh God, Buzzfeed, really?), but it’s true that Buzzfeed has subtly revolutionized the internet. I just looked at the website and started counting how many words were in each title (it’s gotta be under 8!). I’m not sure if they’re counting the numbers in all the listicles that seem to completely populate the front page, but whatever.  I’m not sure that’s something we would like library websites to emulate. I think there’s already a fatigue to the listicles and click-bait articles that have flooded the internet. It’s difficult to suss out what is spam and what is legitimate and what is a mixture of both. 

That said...

...the “bite-snack-meal” approach to the blog post/web article is a great idea. I think in many ways it’s just a new form of newspaper subtitles or...dare I say...abstracts from academic articles. Let the reader know what the article’s about before they waste their time.