Analytics and SWOT

First off I would like to say I have never used google analytics before and I can totally see the benefits. It shows you what time someone looked at the site, how long they viewed it, what location by country they saw it from. IT’S SO COOL !!

I think it’s safe to say I am better at websites than social media. I know that  the Australian visiters are most likely me but there’s like 4.35% in Quezon City which means someone else has actually looked at my work!!

The results also say that 62.7% of views were new meaning that poeple are actually looking at it and some of them are even returning!

SWOT Table

Strength has many different services	Weakness not a well known company that could potentially hinder the amount of customers that dinfosec may get.
Threats there are lots of different consulting companies that have the same services and are more well known	Opportunities there is a dissatisfaction with the way big companies handle people’s privacy being a small business dinfosec has an opportunity to give people the privacy that they feel they get from small businesses and the available information and networking that people get from big companies.

Hosting Complications

Well I can’t say it was a surprise career advocate had hosting problems but I didn’t even know that hosting companies only allowed their customers access to the content of their website and nothing else. Apparently SwardFox does.

As a solution I asked the client to choose a different hosting service that would allow me to store her fold website files and show the new ones. I am still wishing for a reply but I thought I should big about it cause I found is issue so strange yet smart at the same time in a ‘give me more money’ type of way.

Creating an function that would load images and lengthen the height of a container when triggered by a click event

The initial thought was to create a mosaic tile display of the work in my portfolio and create a system that would load images as the height of the container was lengthened so that is would put less strain on the server when the website first loaded on the screen.

I started out looking at lazy loaders.  I found several that all did the same thing but mainly they didn’t load on the screen in the exact way I want ed them to.

I found one on Pandao that I liked but found out that you had to pay for the package so that one was down for the count.

I had an idea in the first place but an article by jQuery.lazy(); helped me think about it in a more practical way that would actually work. Using files or a database that you can grab information from and display when you wanted to. 

In the end all I did was transition the height to add a certain length with an overflow of hidden and problem solved.

PHP Mailer Again

PHP mailer again.  This time I thought I’ve done this five times now surely nothing can go wrong… Well I would be wrong.  It’s not that it wen t horribly wrong just that is couldn’t work. The mailer couldn’t connect to the mail server and therefore the whole thing went AWAL.

I looked into connection problems (as you do) and I found an article that put the whole $mail = SEVER HOST : … ; into perspective. Really,  the host part makes so much more sense now. The idea of this section is to connect to a database of sorts which allows the mail to pass through to the wanted account. Fake instructed me that it was unwise to rely on just any host sever. That if you did  you are relying on the server to send the emails and this server could crash at any second without your knowledge effectively cancelling your contact serve. So gmail is the way to go evidently.

I’m so please I am starting to understand what PHP mailer actually does. 🙂

 

 

User Testing

After doing some user testing and making them sign a disclosure agreement some design flaws became apparent in the website.

One of the main ones was how distracting the animated lock on the home page became after you clicked on it to get access to the home page.

“I found at first it was mesmerising but after the third time of trying to see the home page and having to wait for the lock it got really irritating.”

With this in mind I sort out a way to solve the issue. I remembered from doco-loco that the rating system was deigned to only be clicked once using local storage. Using this idea I used local storage to store when someone had clicked on the lock so that id would only display once.

This also solved the issue of the lock being a distraction to the site as that was also a topic that was brought up by an interviewee. She said that she felt the lock, while interesting and sent a clear message about security, it made her wait longer for the site to load the home page which she felt was an unnecessary feature. With the local storage in place it solved this problem so every time she went to use this website after her first visit the lock animation was no longer visible.

A good thing that all testers agreed on was that they liked the fact that the information stayed on the main screen as they could see everything that they needed to without having to scroll.

Working with Tables and Email

You’d think that because I’d working with email functions four times now that I would know exactly what to do. But apparently a newsletter is only slightly different from a email signature. Setting up the email campaign was simple as I used MailChimp to access the saved emails and send them out, however I still had to make the newsletter and I had no idea what to put in it.

I started looking at sites like Bench Mark Email, Yola Marketing Campaigns , and A Beginner’s Guide to Successful Email Marketing with Kissmetricks to get the basic understanding of email campaigns and what is they are trying to achieve.  From what I can gather it seems to have the same motives as a marketing campaign: to gain interest in the company via extra resources outside the website and strives to encourage word of mouth advertising.

Websites like Email on Acid gave a detailed step by step explanation of how to go about creating a email campaign and what you needed to keep in mind while you were designing your newsletter. They also discussed the idea of making your email signature responsive, which I thought was interesting as Emails use the most basic CSS properties with tables that aren’t very responsive if at all.

The blog went on to explain this and said that there is a margin or responsiveness in a table. To make it responsive they set the table and rows to a certain size and then use media screen queries to change that width to make it responsive.

With this in mind I made my whole table and rows 100% width of the screen and that allowed it to be responsive without media screen queries.

ScrollTop issues when inside a div

For one of my pages I wanted to able to click on an option and the screen to scroll down to the position where more information could be found about it. I had done this before so I knew what to do, only when I copied the code over nothing happen.

I checked to see it the object was being clicked on in the console and it was and I checked to see if I wrote the function wrong by pasting it onto another page and that seems to work too. I couldn’t figure out why it wasn’t working on this specific page. I even compared it to the function on another working page to see if there was something wrong with the way I wrote my scroll command, still nothing. It wasn’t until  Fae took a look at it and saw that it wasn’t animating the body but the div the information was stored in.  As that was what I wanted to scroll rather than the body of the website.

$(‘.scrollHeight‘).animate({ scrollTop: target.offset().top }, 130);

After I change the code to animate the div rather than the body the function worked and the page scrolled down to where it needed to be.

Finding the height of a window depending on the screen size to use an overflow scroll function

This wasn’t that hard at all once I figured out what I was looking for. It’s simple jQuery function:

$(document).height(); or $(window).height();

You set that as a variable and then make it the max-height of the object and set overflow to scroll.

You can set this in jQuery

$(‘…’).css(‘max-height’,var);

or using Javascript

function myFunction() {document.getElementById(“myDIV”).style.maxHeight = “100px”;}

At first I thought this was going to be some complicated PHP function and thanks to jquery and javascript its not. However I have found that if the content is larger than the screen than is counts that in the overall screen size rather than just measuring the initial height of the screen. But when I need the change my screen height for the mobile view this will be perfect.

Background Images

 

Create a background image that stays fixed in the background while information is shown and the user scrolls, how to do it is in the name right? position:fixed; however it’s not that simple there is the added element of content that is longer than the screen height which means that the image will automatically stay and the screen will scroll without it. You see the client wanted the website to stay within the initial screen height of a users computer and have the content scroll within that. I do this I thought it had something to do with background images so I started researching how to do them.

I found this website that did exactly what I wanted it to do, it used position fixed and z-index to position the content on the screen and the image in the background. I thought this was strange at first as I was expecting some sort of background image url in the css but it seemed to work so I wasn’t going to argue. I found that the more content I put on more I would have to scroll down the screen to see more of the main information, which the client didn’t want.

So I found another way that used fixed positions of background image url and placed the content over it just the way I wanted it, however it still made the information scroll away from the main screen position.

From here I started looking that the notion of overflow and there was an option  for max-height and overflow scroll which was exactly what the client wanted. The max-height allowed the information to say with the set height and the content to flow within that.

Once this was done I showed all examples to the client and he chose the overflow scroll method and was very happy with the end result. The only problem with this method was that it double scrolled when it was on phones so I had to change it to the other options when on mobile.

ajax comment system

As part of the website my client wanted a forum were anyone can discuss either there consulting requests or just to start a discussion about the latest news topic. So naturally I thought I could use an ajax commenting system as it would show the comment instantly rather that the user having to refresh the screen if I used PHP.

After doing some research I discovered that it needed to be connected to a database in order to function properly. Which in hindsight makes sense if you are sorting the comments securely and taking them out placing them in before the rest. It also allows the client to access the file in case he may need to delete a comment.

The first commenting system I looked at was close to what I wanted to do however I wanted my comments to be displayed in a ‘showier’ fashion. This one faded out and fading the comment in which, while cool, was not exactly what I wanted. This system example did however show me that the comment system needed to be saved in some sort of fashion whether it be to a file that you call or to a database. As the tutorial was clearly not giving any alternative option other than storing them somewhere.

The second ajax commenting system I found  was built in a similar fashion with the comments being saved and pulled from a database, however it was ‘flashier’ than the last. When one commented the message was saved and then the comment would slide the box down to show the next comment. This effect was exactly what I was looking for. I decided to code and style the hard code instead or getting the plugin as I wanted to learn how to do it myself rather then rely on a plugin.

After some difficulty in css I managed to change it to suit my design and work the way I wanted it to. Overall I am very happy with how the website is coming along as a whole.