Client feedback

Leave a comment

Just received some feedback from my client, so I thought it was worth a mention!

client feedback

I was undoubtedly expecting that someone of my clients high standards would never be 100& happy (I mean this in a nice way!). Especially as a part-time designer. As far as i’m concerned, this feedback tells me that my client is happy with the website functionality and it is being used well for its purpose. This is the best kind of feedback, even more so once you’ve handed in the assignment it relates to!!! As my client has no free time for around a month and my assignment is over, we can now discuss any additional works on a fee-basis. I’d like to reiterate a point made in previous posts, that we did go through the website together in a videoconferencing session where I sat down and discussed with my client all of the tweaks and changes he wanted me to make. This was to make sure that I was 100% finished in terms of the assignment. Anything after that I would class as additional changes that don’t relate to anything my client wasn’t happy with when we discussed the website in full. It’s also good to know that my fee (logo) for up to the assignment deadline is on its way to being completed!

Conclusion

Leave a comment

tweak - home page

Please visit the site: www.craigslade.com

This has been the longest running assignment of the year, and for myself at least by far the most time consuming. I can’t even begin to think how many hours I’ve spent on this website. It definitely exceeds 120 hours, but it’s been something I’ve enjoyed from the offset since I rethought my original idea and decided to seek a client.

Working with a client being the ultimate reason for pursuing this as an assignment, I feel that the constant process of discussing, building, discussing, adding, discussing, tweaking etc. has proved invaluable in teaching me how working with a real client works. At every possible moment I’ve been as professional as possible. Requests have been dealt with promptly, I’ve updated my client with pretty much everything I’ve done either via facebook or phone as soon as it’s been updated, and he’s been able to see this progress online through the student server and the GoDaddy hosting account I’d been uploading pages to. We communicated on a regular basis via instant messaging services – As my client is currently in his 3rd year at Cambridge University, he is normally up at ridiculous hours but busy at all others, but we still managed to converse and discuss the site at least once a week. I kept to all of the time constraints set by my client – We planned for the site to be fully uploaded by the 10th of April giving me a couple of weeks to edit, tweak and document everything that had been done. This was achieved, and my client and I had a video conference where we went through the entire site and made alterations and changes where they needed to be made.

Perhaps the most pleasing aspect is to access the website through the URL, navigate through the site and think “I made this”. I’ve thoroughly enjoyed the process (minus a few moments where when things weren’t doing what I wanted them to and I wanted to rip my face off), and I feel like I’ve learned a lot on the journey. I now know how to make a working contact form, something that I didn’t know how to do before but something that will help me with my personal website as well as other assignments in the future. I also know some basic PHP coding now, specifically for template pages, which has been a massive benefit to me during this assignment and although it isn’t necessary for my Dynamic Web assignment it will be a great asset for websites I create in the future where CMS is not needed but a large number of pages are. I’ve further refined my web development skills, and i’m even more confident with jQuery than I was before. I have learned more about media queries, CSS3, html, and most importantly my problem solving skills have been improved in terms of Web design. I’ve also learned how to manage my time, and I believe that the last couple of months spent on this site has genuinely improved my work ethic. It’s made me want to be doing this for money, and it’s reassured me that I made a good choice in opting to turn this into a career.

In return for the website I built my client, I hope to receive more work in the future. My client has assured me that this will happen, and hopefully this way the website will pay for itself.

User Manual

Leave a comment

I’ve created a user manual which will enable my client to be able to upload his own work to his website, using the documentation and default pages provided at the handover.

manual1

Here are a couple of pages from the manual:

manual2

The manual explains in detail how to import images, how to add images and pages to the website, how to upload to GoDaddy hosting and additional required information. I have included this user manual in the folder with the website for when I transfer the site to my client.

Final Tweaks

Leave a comment

I’ve finally added all of the content to the website, including the information on the about etc. pages. I have completed the navigational structure, linking every page to each other, and I have set all of the media queries to change the layout for different browser sizes.

To sort out any final changes, my client and myself held a video conversation using Google+, because we could share screens and my client could point out to me exactly what he wanted changing.

The first thing my client pointed out was that he felt the navigation in the sidebar was too far apart. He also stated that although the words were linked to the relevant pages, the images were not. This was my error, I had been meaning to do it for weeks but got distracted with other aspects of the site alongside other work efforts. I reduced the distance between the images and titles, and added the necessary links to the images.

tweak - nav

The next thing we discussed was the content in certain pages. I  pointed out to my client, that the information in the ‘About’ , ‘Other Services’ and ‘Biography’ pages held not nearly enough information to warrant spreading the information over three pages. My client wanted to create a new page layout to center attention onto the information, but because this would still leave the pages scarcely occupied, I advised my client to merge these pages.

First, I deleted the unnecessary pages from the navigation. My client wanted me to put bullet points in between the footer links, so I obliged and redid the footer for him:

tweak - nav2

He sent me a picture of himself to use as a profile image, and I applied this to the ‘about’ page. I then transferred the information in the ‘Other Services’ page into this page, and moved the ‘ABOUT’ title into the main content area to allow the profile picture to be a bit larger in the sidebar. I also feel that it gives the content area a bit more substance as it looked fairly bland with just the text.

tweak - about page

On the home page, the centerpiece banner containing the title didn’t stretch the entire width of the browser and contained the end corners which were still visible. My client wanted to know if I could stretch it the whole way across the browser, cutting off the edges so it appeared to stretch beyond the screen. To achieve this I edited the image, cutting off the edges and setting it to 100%width in the CSS.

Another aspect of the home page my client was not entirely content with was the three featured images. I’d tried using CSS code to replicate the opaque background behind the caption on the psd designs, but had been unable to replicate it perfectly. He pressed the matter to see if it was possible, when I realised something  I should have considered long before but for some reason hadn’t thought of. I took the images directly from the psd and used these as the images for the home page. He also requested box shadows behind these images which was just a simple matter of adding class=”shadow” to the images as I’d already predefined CSS styles for that class affecting any image requiring shadows. I think the changes improved the home page greatly.

tweak - home page

There were a couple of other things that needed to be addressed. There was one issue with a piece of work where the main image on the project slider was one which my client had not done. It was a cover for a booklet my client had designed the layout and the inside for, but not the cover art. I simply changed the main image and the thumbnail to a page of his choice which ended up being page 3 of that booklet.

The slider itself had a prominent white border around the main image and the thumbnail images. My client did not approve of this, and I removed the white border at his request.

tweak - remove white borders

A vigilant eye could tell that we also changed the fonts during this discussion. We looked at a few web-safe fonts that could stand as the main normal text font, and came up with two alternatives:

tweak - font

In the end we chose Lane as our font, so I incorporated it into the website:

tweak - font line spacing attention

Whilst doing this, I added letter-spacing to the header (‘overview’), as my client felt it was too clammy in its original state. He also wanted me to make it clear that there was more to see if the user clicked on the main image, so I added a note beneath the main information to highlight this.

This was pretty much everything that we discussed, and once I’d sorted these problems out my client and I both agreed that the website was finished! Probably not my shrewdest move to not charge him anything for making his website, but as a web design student looking for work to build up a portfolio, I’ve got to start somewhere. Working for a friend has it’s benefits – My client as a designer himself is creating me a logo in return for this website, and I have been assured that any web work my client receives whether he wants to design it or not will be passed on to myself to build. I can add this site to my web portfolio, and as I have a section on my clients website under the ‘Partners’ page, any client of his will be able to find my website and hopefully I’ll get some work that way!

Media Queries

Leave a comment

One of the absolute best aspects of CSS3 in my opinion are media queries. These advanced properties allow you to manipulate your website and make it fully responsive, and there’s no limit to the amount of media queries you can use. I quickly discovered the last time I used these in my creative web assignment, that you have to order them in descending order. I therefore edited my website to fit the largest resolution screen determined by my client and myself as the biggest screen size we anticipated the website being viewed on. As I own a laptop with a resolution of 1920×1080, I had to use a website called Quirktools.com and their Screenfly feature. It allows you to preview web pages on larger (or smaller) resolutions.

screenfly

To demonstrate a media query, I have taken this screenshot of the css code:

mediaquery2

Here is an example of the website being viewed on a 1366×768 resolution screen – please note that I have pretty much added all of the content and information now and created every project page, so the content you see in the slider is now my clients work! This is also before I have saved the css stylesheet with the above code applied.

mediaquery1

Here is the website after the media query has been applied:

mediaquery3

Visually the website hasn’t changed but the dimensions of each division have. The fonts have also shrunk down a tad to allow the text to fit in.

When testing the site, I discovered one flaw. When my client approached me with this brief, he explained that he wanted the website to be a full screen site only ie. no scrolling necessary. When previewing the site on certain computers, especially with browsers that were full of horrible toolbars, sometimes this would impede the bottom half of the page. On one computer I checked it on, you couldn’t see any of the navigation links or the footer. This was not good enough, and I did some research to determine whether I could use media queries to change the layout on set heights. It turned out that I could, so I began checking what points I needed to make changes at, using the home page as the tester, then repeating the process with the other pages. Obviously I only had to change one of the other pages to change them all as I was altering the css which related to every page.

tweak - media query height

I conferred with my client, and managed to persuade him that although this was a good fix, you can never determine how tall someones browser is going to be, so we’d need to enable scrolling for anything outside the parameters of the media queries. Although the queries can cover 95% of the solution, we needed the scrollbar to do the rest. As long as the users browser is of reasonable proportions, it won’t display the scroller.

Contact form

Leave a comment

One of the most important aspects of my client’s website was the contact page. I’d never created a contact form before this, so it was imperative that I researched how to create one. I located a video tutorial which showed me how to create a contact form with validation using php. Knowing I was going to need a server to host my web pages on to test the php was working, I downloaded WAMP, a windows based local server program which would turn my laptop into a server for locally hosted web pages.

contact tutorial

I followed the tutorial, but no matter how many times I tried, the php would not work. I searched online for a solution but to no avail. Luckily my client was hosting his website using GoDaddy, and they have a feature which if you link your form to webmailerform.php (a file provided by GoDaddy with all linux hosting servers), you can assign an email address to your account which will automatically send an email to the email address you specified every time the submit button on the form. My client is happy to use this method, but we have arranged in the future to amend the php version once I’ve had enough time to read up on my php and fully understand how to solve the connection issues.

form values

As for design, this is how I have styled the contact form using CSS:

html contact form

I’ve stuck with the main theme font ‘Bebas Neue’ . I’ve also made the contact form responsive between 1024×720 and 2560×1440 resolutions so that it remains centralised and shrinks down when necessary to accommodate the lack of space.

To test the contact form, I hosted the website on my own domain and hosting account, and linked it to a test email account.

formmailer

It was a relief to see it working! My client has now purchased hosting at GoDaddy to accompany the domain he has already purchased: http://www.craigslade.com. I talked him through the process and advised him on what he needed to do to link his hosting to this domain. I also instructed him on how to add myself as an administrator of his website, thus enabling me to upload and edit his website via my own GoDaddy account, making life much easier as I didn’t have to sign in as my client. I have since uploaded the home page, and this contact page so that he can start to show people his website. I have included a couple of other pages which incorporate the slider and display some of his work to give meaning to his online presence. I didn’t want him to have an empty website online, especially since technically now it was live, just not fully operational. It was beneficial for myself and my client to be able to observe changes from his end. We’d previously been using the student server to host pages and I would link him each time a new page was added. Now, my client can simply click links to the page he needs through the actual website navigation.

PHP Includes

Leave a comment

There are a lot of pages in this website, so to combat the problems there are with editing multiple pages, I’ve used some PHP code to hasten the editing process. Basically, I’ve taken some repetitive features of the website: title, navigation and footer, and given each element its own html page. This is saved as a .php file, which is then linked to each page using the code: <?php include('../FOLDER/FILENAME.php'); ?>

To test if this worked, I first used the code on my own website, replacing the header, navigation and footer html code with php includes and putting the above code in place of the html.

testing php localhost pre template carving for bean

As this worked, I did the same for the default project pages I had created in preparation for creating all of the actual project pages. Without a server, you cannot see php in action.I put my locally hosted WAMP server online and tested to see if it was working.

Before being tested:

defaultpage - php includes before

After:

defaultpage - php includes after

Now that I know this works, if I need to amend anything in the html of these elements, I’ll only have to change one file to change that element on every page.

Older Entries