Posts tagged: ICM505 – Web Techniques

I think the ‘big reveal’ of the semester, where it all came together for me was just in the last two weeks or so. I came into the course with experience forging through code and editing templates in WordPress before, but it really wasn’t until recently that I really began to understand with a certain level of ease how all of the working parts create the whole page. I also really enjoyed and appreciated the module on image optimization, because even with the amount of photo work do, I’ve never been in a position where it was important to go through the process.

I appreciated that all of the HTML was split up into digestible pieces across the weeks, even if at first I thought that the beginning was a bit rudimentary. Having a bit of a refresher is always a good thing and something I think I eventually valued.

The final template was the most challenging. What started as some simple changes quickly became a playground of experimentation on my page. I decided to change the page name to ‘Exercises’ because it felt like it was no longer fulfilling the assignment objective. It was a good experience though because while playing with all of the code, something finally clicked in my head and the editing process became much less complicated to discern as I continued.

My proper final page named ‘Template’ came together in a very short amount of time. I took photos from an event that I had worked recently and information from my freelance page and plugged everything into where it needed to be. I had a bit of trouble with the Google Map, but fortunately, I was able to work that out with little issue. I’m pretty happy with the end result.

One thing that is minor, is that I wish that there had been a textbook for the class…or maybe just some suggested reading for all of the coding assignments. W3 is a great resource, but I’m a book person…and I need to see things spelled out a few different ways sometimes in order to understand it completely. I think I’ll be looking for some reading on some more advanced techniques in the near future.

Going forward, I really feel like I have a better grasp to be able to design something from scratch and wouldn’t feel shy about speaking up and offering help if a friend needed some website work done. I’m much more comfortable talking about and describing how different elements work together and how to apply it all to a finished product. Before this class, I really wouldn’t have been comfortable doing anything like that for anyone but myself. CSS still baffles me a bit but I think I’m closer to making my own personal breakthrough with it. I can work with it, but I don’t understand it the same way I do HTML.

all in all, I really enjoyed this class and I’m looking forward to growing these skills through other classes in this program.

These are the browser images:

Safari:

Opera:

Firefox:

Chrome:

and these are the images from my mobile devices:

iPhone:

iPad:

I’m kinda disappointed that there weren’t more obvious differences between the different browsers. All of the text, color and layout match from one image to the next. The image from the Opera browser looks slightly skewed due to the toolbar on the lefthand side and the image from Safari includes the user toolbar since I was logged into WordPress at the time. The one minor difference which could be noted is that the title of the video in the Safari image is shortened by one letter in comparison to the others.

The mobile devices offered an equally dull result. Minor changes in layout are evident between the browser and mobile views such as the ability to open and close the sidebar of the page as shown in the images above. Also, the iPad includes strips of the dark background on either side of the main column but does not on the iPhone version. However, the text, colors, and image quality are all same across all platforms.

I attribute this to the specific layout that I chose from the WordPress options. Even while going through the setup options, I made comparisons and chose one that exhibited the least amount of change across platforms. I have noticed minor changes between browsers and devices on other sites in the past, and particularly when it comes to sites that do not utilize a responsive design.

Analog Media: Molly Maid

Molly Maid is a company that took out a tradition advertising spot in a weekly print publication. In addition to have an eye-catching design, they make sure that their web address stands out from the rest of their contact info, which should alert the reader that more information about there services can be found there. This type of in-print advertising is always going to work because it only gives you enough information to get your attention. If you find yourself wanting more (as I did), you will direct yourself to their website to get those details. Honestly, I wasn’t on there very long before I started filling out their “free estimate” form.

Social Media Ad: Sticker Mule

I chose this particular ad because it pops up in the sidebar of my facebook feed every single day. This is most likely due to the fact that I have a current open shopping cart that has been sitting untouched for months, just waiting to take advantage of this particular promotion. This type of ad works, because almost every time I see it, I go back and re-examine my shopping cart, only to decide that this isn’t the day that I need to spend frivolously on stickers that I don’t actually have a purpose for. But, they did get me back onto their site, didn’t they?

SEO/Keywords: Best Worcester Restaurants

Who hasn’t turned to the internet to find someplace to eat? In Worcester, we are becoming overwhelmed with our dining options as new establishments open every month or two. One restaurant that has been around the longest has harnessed the power of keywords so as not to be left behind in the restaurant revolution. By adding the word “best” into their site title, it gets indexed differently than all the other restaurants that haven’t. So, while they may not be newest, or “the best” that is out there right now, they know that they will show up at the top of the results when you want to search for a dining experience that is above average.

Email Sign Up: Old Navy

This may be one of the most common methods of inbox advertising. I’m not sure that I can even think of an online retailer that I’ve visited that hasn’t offered deals and discounts for signing up for their online mailing list. Like some of the other methods, this really boils down to the power of suggestion. You’ll most likely see their email in your inbox, and whether or not you intend on shopping, you kinda want to follow that “20% off your purchase” link just to see what kind of savings you are capable of getting. Everyone likes getting a deal, and online shopping is pretty much window shopping for the 21st century. I’m guilty of falling prey to this tactic often, but just as frequently leave a full shopping cart behind know that I could have saved $13.68 on my purchase if I really needed all the things that I saw.

Influencer Ad: Oh Dear Drea Blog/Instagram

I went to school with Andrea, of Oh Dear Drea and while we weren’t close, I do enjoy watching her social media empire grow. She became a food/travel/lifestyle blogger with a heavy focus on veganism and all natural products, It is easy for a reader to come across someone on the internet and be let into their lives by way of blog posts, to allow the reader feel like they have a trusted confidant out in the interwebs. That trust is important when the blogger creates brand partnerships. In the example above, Drea is using the all natural, vegan makeup herself in order to imply that if SHE would use it, they should too. The post also utilizes hashtags and direct callouts to the product itself so the readers can easily find it online themselves.

This is all too simple NOT to work. In the example above, Drea is using the all natural, vegan makeup herself in order to imply that if SHE would use it, they should too. The post also utilizes hashtags and direct callouts to the product itself so the readers can easily find it online themselves. That personalized photo and the already existing trust between her and her readers should make the product an obvious choice for anyone who is (or didn’t yet realize that they were) in the market for it.

Optimized Image:

Original Image:

This was an interesting exercise because I’ve never spent much time thinking about load time when it comes to exporting web graphics. Basically, I’d just ‘save as’ a JPEG set to “high” and go with whatever the outcome of it was. Here, I found that achieving a decent file size to load time ratio was much more of a finely-tuned process, and not necessarily as easy as it seemed.

The original image was a whopping 3.09M…not exactly an optimal size for a web page. I used Photoshop (Export -> Save for Web) to lay out four options of varying quality in order to compare the difference between the size and load times of each optimized image. Because this image wasn’t employing a wide range of colors, I decided to save it as a JPEG rather than a PNG. Also, because of the limited color palette, I felt as if I would be able to air on the side of a lower quality optimization without suffering any major visual loss.

The only discernable quality loss is in the lower right-hand corner, around the bright orange-hued light. The edges of the light don’t appear to be as crisp as in the original. However, if the original was not present to compare the optimization against, I feel the viewer may not be quick to judge this imperfection.

The chosen optimization clocked in at 172.9k and 32 seconds at 56.6kbps. When I loaded both the original and the exported version to this blog, I didn’t see a huge difference in load time. This may just be due to the internet speed in the area I am, but I’d be interested in hearing if anyone else notices a difference. I’m pleased with the result, but I attribute much of that to the image itself, as it was already quite crisp. I imagine that this exercise on an image with a softer focus would be much more difficult to complete.

My web page assignment can be found here: http://mywebspace.quinnipiac.edu/mhardylavoie/web-techniques/

As per the instructions, I copied and pasted the code as it was formatted for us, but wasn’t sure if we we’re going to be encouraged to embellish some of the aesthetic qualities now, or in a different module. In an effort to not jump too far ahead, I left things as they were and as close as to what was outlined in the assignment instructions. If this should be changed, please let me know.

I had a difficulty getting things to work with Filezilla, and instead, downloaded CyberDuck. I felt CyberDuck was an easier and more intuitive program and found that it yielded the desired results immediately.

I’m looking forward to working with more code in the coming weeks!

My thoughts here were that I wanted to create a clean, simple site that would serve as (1: a launching board for the company’s entire portfolio, (2: a gallery for the senses, (3: a functional epi-center for people who work with the brand in a professional capacity.

So, the elements from the site map are included here in the top and bottom navigations. Note: Polar Link is a site that our national distributors use to place orders, only accessible by a URL that anything but easy to remember. I believe that distributors would benefit from being able to access from the main site when they are using a browser that doesn’t have the link saved within the history or ‘favorites’.

I’d like to see a strong “who we are” type of statement followed by a brief paragraph that speaks to the viewer and increases their interest in the brand. To the side, a polished video featuring the family, the plant, and the employees…a statement piece to complement the paragraph.

The geometric elements below should lead the viewer to the interactive content to the right and will include an animated transition into the content. I really want this area to spark some excitement and cross-intrest with lesser known areas of the product portfolio. Another note: the arrows above are meant to symbolize the animated transition and would not be visible on a live site.

I had assumed that this would be the most challenging section of the assignment but the site map proved to be much more difficult to organize than I had expected. This was the first time I went through the process of mapping and wire framing a site, (I’m a bit more build-as-go when I work) and I’m really happy with the way that it came out. Honestly, I’m not sure I’ll be able to go back to the other way and has really sparked an increased interest in UX design.

At the time in which Polar first designed their web site (around 2011), product development was pretty stagnant. This changed when the first line of limited edition flavors came out in 2014, and since then new flavors have been appearing once (if not more) every six months. At some point, Polar realized that their newly created products needed a place on the web, but due to the state of the company’s site (which saw no maintenance), their main webpage was not the place for them.

Instead, WordPress sites were created for EVERY SINGLE sub-category in the brand, subsequently dividing the product line across the web and across social medial channels. Unfortunately, the company page was never updated to link to any of the sub-category pages, nor do those pages link back to a main homepage. I truly believe that this is bad for the overall brand. There was an opportunity for the more popular subcategories (that receive higher amounts of traffic) to link back to other sub-categories for increased visibility. Unfortunately, the company does not share this sentiment.

Pages that currently exist:

http://www.polarbev.com

http://www.polarseltzer.com

http://www.polarseltzerade.com

http://www.polardry.com

http://www.polarclassics.com

http://www.polarmixers.com

http://www.polarfrost.com

Presently, neither the main company page nor any of the sub-pages include the ability for online ordering, product locators, detailed ingredient information, or many other standard pages on similar webpages. These are crucial elements to implement if Polar wants to keep up with online trends. Less imperative but equally as important is to create an area for employees to be able to log in to see their benefits or access their web mail – this would cut down on the number of links and log-ins required to access this information.

I believe that a redesign would be an opportunity to re-unite the company’s product portfolio under its flagship brand and provide consumers with detailed information about the company and an opportunity to search out product in their area. This would also allow certain redundancies to be eliminated on each sub-site and render them on the main webpage.

Many, if not all of Polar’s products are designed to be bright, vibrant, and eye-catching. This seems appropriate when you are trying to lure thousands of prospective consumers to pick up a bottle of beverages as the browse the soda aisle. However, Polar’s reputation is built upon 135 years of business that deserves honor and gravity. This is why I propose making the companies main site feel traditional, elegant and distinguished by using a color palette that incorporates the colors of the primary logo to create that feeling. All of the people should be left to the product sub-pages, where the personalities of each product are allowed to shine.

The mood board that I constructed for the website is pretty self-explanatory. I included some geometric elements that I’d like to see applied (bottom center), typographical elements, product personality profiles, and corporate identity graphics as the basis of the design. The large clip of the Derby Tea website is used as inspiration for the overall layout. I appreciate that the Derby Tea page is organized with a heavy emphasis on visuals since I believe that most brands should be trying to incite the consumer’s senses.

Just for comparison, this is Polar’s current corporate website:

The page hasn’t been updated since 2013 and I think that shows. The color scheme is bland, the geometric elements feel clunky, and the typography isn’t uniform. I think it is more than appropriate to move their online presence to a responsive design that displays the company’s history and accomplishments while also drawing the viewer in with interactive elements that allow the consumer to feel like they are apart of the brand. More of this will be discussed as a part of the sitemap assignment.