SEO – GOOGLE ANALYTICS – CUSTOMISATION’S – ADVANCE

So its coming to an end the web assessment SEO is all set up and google analytics is – my seo well for me I found was hard since my site has limited text so I was going with alt text on images trying to get the right naming conventions and also the names of the images.

This is some of the SEO stuff I have done with alt text on images and also the image renaming.

another example of my attempt at SEO – it was quite hard to get all the text on all the images on this website but it was good for learning.

Here is a screen shot of the google script which will give me detailed information on who comes to the site how long they are on it for.

I also tidy up the code and commented on what my CSS and HTML is doing.

Some of my CSS code comments.

Some of the HTML code comments.

Social media buttons are now in and are active to the instagram and Flickr pages.

Advance Code and Options.

Some of the more advance stuff I added was the use of ID’s to underline my nav bar

I also used a light box to display my images with an added hover effect.

Here is the hover effect.

 

All in all the website I made I am proud of and the client has given me good feed back regarding the design and it was what they wanted from the start.

WEBSITE CONTENT – Colour – Content – Text

Well its getting closer and closer to the end and after this its all about SEO – I have all images in no more place holders and the text is now in as well so no more place holder text as well – this has been a really fun assessment and I have also learn’t so much over the last few weeks when it comes to making websites – and I think I have become really good at problem solving HTML problems.

To start the week off I completely broke my website… everything was going to left on some pages images where gone google font wasn’t working.

What I did? well I just re-uploaded my website  using FTP so now I can make changes in web expression and it uploads directly to altervsita which is really cool and easy to use.

here is the final home page.

The updates portrait page

Portrait page continued with the added row.

the engagement page is till the same I have changed the amount of photos on this to four at the moment – until more content arrives.

The atlas page is now up and running with pictures that have been taken from all around the world from Japan to USA and NZ and other places around Europe.

As you can see the atlas page has many rows of photos on it these could change again just trying to get the ones that work together.

the about page this had been hard to get finished as the client has been out of contact range taking photo’s for work hopefully more will be added by the interview and final dropbox.

 

The final colours where the same throughout the whole webpage and stayed the same since the initial planing phase white background, to make the photo’s pop, and black font to keep it streamlined.

The new mobile Nav bar is now working after alot of trouble with the centering breaking once I had put the mobile nav and having to go through and delete conflicting code.

throughout the week there will be more blogs leading into the final interview and getting my marks!

Hosting the website and Problems #5 – #6

So the time has come the website is live – still have some pages are full of place holder images – and there is still some work to be done with the NAV bar font and over tweaks, and even the images on the portraits and homepage are still not final, trying to get photos together from the vast collection to mix well with each other.

First of all, some minor changes where made the logo of the website has gone from the left of the screen and is now centered above the nav bar and has had an upgrade.

as you can see – it has also had San Francisco added as well as the client lives there during the year when they are working.

Second part is still a problem as google fonts was working on web expressions but not working on altervista – this is being annoying and no dealt Ill fix in the coming week.

Now onto the hosting the hosting is for now going to be altervista – a free web hosting option, as the year goes on or going into next year this will change and will have its own paid hosting – anyways when uploading the website on to alter vista this was no real issue, I did have rename some of my photos – as altervista was having trouble with the naming conventions, other then that it was pretty smooth I did have to relink the css and change the file locations for the images but that was a simple copy and paste operation once I had found out the issue.

here is the new css link:

 

and the new image link before all images now that my site is on altervista:

these where small problems but easy fixes – another problem I had was when I changed the css or something on the other pages via altervista it would have trouble saving – that was no real problem as I would copy what I was changing on altervista and put it on my computer so if something didn’t save I wouldn’t have to retype it all out again.

here is the homepage live:

as you can see the new logo in action and the centered positioning.

 

Portrait page live:

another new feature on the portrait page is a while new column has been added so another 4 photo’s can be implemented – and a few have gone from portrait and will be put on the atlas/world page.

That was this week’s update we had a small week of work to do, wasn’t to much and it’s good to have the site up on the website already.

the changes on the website where made on the altervista html editor will be updating my web expression files as soon as possible.

here is the link to the page enjoy!: http://clementphotography.altervista.org/

 

 

Setting up individual pages & working NAV #3 – #4

Second week the home page is almost done, I have put the first three images in and spent close to two hours trying to get my justify center and other commands to work, and it finally happened just one more photo that I want to move down just a little bit so its more pleasing to the eye, but I think I’ve got what I want at the moment.

One thing I am having trouble is making my nav bar change when I go into a mobile view as I did have the mobile nav working but not the way I wanted so that is still being worked on – my desktop nav bar, with working underlines is working thanks to using ID’s – the images aren’t final and can be changed – images have been compressed but they haven’t had the final names done yet.

When doing the gallery, I used a little bit of Java Script to get what I wanted – I self taught myself what I needed so after about 5 hours on Sunday it was working! lots of blank staring and hints of genius its alive!

Here you go and enjoy.

Desktop view:

 

And the mobile view:

with the mobile page you just keep scrolling there is about 6 pictures to look at hopefully I can fix my mobile nav bar so it looks better then what I have there.

I have one of the pages done with proper portrait place holders, the rest just have text and a carousel – with place holder images.
Desktop portrait view:

Bottom part of the page:

Mobile portrait view:

As you can see the mobile pages loose the image carousel but without the working nav bar it looks very empty.

Other place holder desktop views:

Mobile place holder views:

As you can see my nav bar is still being super annoying, but I hope to solve that this week.

 

 

 

Classes and Wire-frames #1 – #2

So another week means another dropbox, and more work on the web assessment – during the week I made some wire-frames that change size and dimensions depending on what size screen you are on so Mobile and Desktop views.

They aren’t the prettiest of wire-frames mostly consisting of basic border boxes that are black and with a back ground that is white – the font sizes aren’t final as well they are just place holder, along with the homepage I have at the moment put 4 images, they look the same but when it comes time to enter pictures onto the website two will be landscape with the other two being portrait (well that’s the plan let’s hope my skill level will let me haha)

Here are the screenshots of the basic wire-frames in their mobile and desktop forms – just a note that when the website is live the black border-box’s will be changed to white this is to just show the columns and rows along with place holder text.

Home Page Desktop view.

Mobile View:

 

 

 

Classes:

• .headerhomepage 4th & Clement – this will be in a large text, this is the main title of the page and will continue the same design through all the pages at the moment the font is Segoe UI – but this could change to a different font in the future – once the photo’s are in it could clash – the title will be bolder as its the name of the company, the font colour will be black.
• .navhomepage – a simple nav bar that will still the same through out the design it will have the category names along with a underline for example – Portraits hopefully these will go bigger on hover of the mouse cursor the font used on the nav bar again will be Segoe UI.
• .imageboxhome – these will be four images that will fit the content image hopefully two will be portrait and the other two will be landscapes, the images in the boxes will be landscapes and images in the portrait will be portraits font size will change depending on the size of the screen
• .footerhome – a footer that will contain copyright and a instagram logo which will then send the user to the 4th & Clement instagram – the font for copyright will be in segoe ui and be in black the font size will change depending on the size of the screen.

The Nav bar will stay the same throughout the design.

Landscape Category Page:

 

Mobile Landscape Category Page:

 

Classes:

• .headerlandscapes – again this will hold the title which will stay the same as the title on the homepage with the only thing changing is the last part which will say the category so for instance – 4th & Clement Landscapes.
• .navbarlandscapes – this will stay the same thoughout the whole (font and font size and all other elements that was mentioned in the homepage nav class description) the only thing that will change is what ever category you are on will be bigger and bold.
• .carousellandscapes – this is an image carousel that will display images on a timer – it will be a set number of images depending on what category you are in as the screen gets smaller and onto mobile mode the carousel will disappear – this is to save on screen space and loading times.
• .imageboxlandscapes – images will be displayed under the carousel so the user can jump to them – this is so they can pick what photo to look at – hopefully when the user clicks on it the image will enlarge, the images under the carousel on mobile and desktop will be a four images together and then another four underneath.
• .footerlandscapes – a footer that will contain copyright and a instagram logo which will then send the user to the 4th & Clement instagram – the font for copyright will be in segoe ui and be in black the font size will change depending on the size of the screen.

The footer again will stay the same on all the pages just like the nav bar does.

Engagement Desktop View

 

Engagement Mobile View:

As you can see the classes for this page a mostly the same as the other category pages as this is the design I’m going for as I hope the images and the layout of the images and the minimalist approach will make the website look great.

Classes:

.headerengagement – the header attributes will stay the same on previous ones apart from the title being 4th & Clement Engagement.

.navengagements – the nav bar stays the same throughout the design, again depending on what category you are it will be bigger on the nav bar.

.carousel – this will disappear like on the other categories when you go to mobile, the design will be consistent throughout the website.

.imgcolengagement – this is the column for all the images on the website and is used for all the different pages where an image is required, this will help with the resizing of images making it more responsive.

.imageboxengagement – stays the same throughout the website, the user can click on an image they want and when they click on it will resize, images in these will change depending on what

.footerengagement – this holds copyright, example (copyright 4th & Clement) – and it will have the Instagram logo as well that will link to the Instagram.

 

Contact desktop view.

Contact Mobile:

 

Classes:

.header – Title with 4th & Clement Contact in a bold size 24 Sugoe UI Black Font.

.nav – Same as on the other pages when on the contact page the contact part of the nav bar will be larger then the rest.

.paragraph – this will be smaller font then the title at a standard 14 size font and it will segoe UI black font – this will contain contact information for example an email address.

.footer – the footer stays the same all the way through the website and will continue to hold  the copy right and the Instagram link.

Each page I have has its own css which will make it easy to make changes to and t update information on without messing up the overall website as a whole, each category for the photos has the same layout with just the title page and the photo’s in the carousel changing and the galleries, I want to keep the same design throughout the design so it will be tidy and minimal as I want the photo’s to do the talking.

One thing that could change is having a little about some of the photo’s on the website which tell the user where and what happened during that photo, once I have that finalized with the client I can then up date my wire-frames and blog about it at the same time.

I think with the white background and the simple but clean black font will be a good fit for the website.

 

The brief it begins

The final assessment has started and we where given the task of making a brief of the website, my client a photographer who travels the world taking photo’s wants to set up a website for their work and so they can take bookings when they are back in Nelson, on the website there will also be the ability to request prints for the photo’s that will have the print option.

The one hard thing about doing the brief was the fact that my client is currently working in San Francisco so the time difference and getting our hours to match up so we can exchange information regarding the website.

Almost 20 pages later and around 2000 words later we had a brief, some of which may be updated, like the name of the website as that isn’t set in stone (4th & Clement), also that will change will be the wire frames of the website initially I have done them by hand, but once I have another meeting and run the ideas by the client, I will re do them on Balsamiq Mockups.

Working with client and making the brief was a really good experience and will make the rest of the creating process so much easier, as I have a lot of information to work with.

As I go through this last Web Assessment adventure I will be doing constant blogs, and the changes I make will also be blogged about.

“Asking me to copy someone else’s logo is not a design brief” – Unknown