I used the foundation framework to build the site to be fully responsive. Below are all the different code that I used.
I found that the code worked well and I developed my skills with the time I spent working on the project
Tag Archives: code
FOURTH POLYMER PROJECT TEST
This test was a really important stage because it stopped me from doing what I planned to do. I wanted to use the grid system for the homepage which looked really nice and had fluid animations between the different screens. You can see a working model of the example I was working on here.
It looked really good, inital testing showed that should be a reasonably simple example to work with. The only issue I had encountered so far was the mobile version would need to be completely different as it looks so compacted when in the mobile version as can be seen here;
Then I tried to work with the code itself. While I had read an entire book ( JAVASCRIPT & JQUERY written by Jon Duckett) on reading and writing javascript code, it still managed to beat me. I believe that though using online forums etc to double check my code it was in fact correct but unfortunately the javascript I wanted to use clashed with the Polymer project and returned the user a blank screen.
I tried to create a div with a set id of #test2, then I created a string connected to the div using ;
document.getElementById("test2");This would pull the information from the div through the javascript. Therefore, it appears through trail and error and online feedback that this just wouldnt work in this scenario.
References;
Specific Code
Contact page used float labels as seen here;
https://dribbble.com/shots/1254439–GIF-Float-Label-Form-Interaction
You can see in my code I have tried to implement float labels in my design;
html;
javascript;
The Result;
The hover on the homescreen has an fade animation on it for the different elements, this is there relevant code;
and the final result;
Google Analytics;
Testing & Correcting the code
Testing the site for improvements can be done really easily, sites like nibbler offer services for free to check your website and give it an overall rating based on modern website requirements.
When testing the exhibition website, it gave some really interesting feedback. Below are the results of the test, they mean that the site is lacking in quite a few areas. It is great to know that I succeeded in 5/9 areas in which I was tested
MY OVERALL RATING
NEGATIVES
POSTIVES
I went back and tried to correct my errors, this is the results of the test after I had fixed the problems to the best of my ability.
I improved the meta tags
I reduced the amount of errors;
giving me a new overall rating;
References;
SEO – Search Engine Optimisation
Understanding how meta data was something I made an effort to learn, since I had changed my design based upon the fact it is not SEO appropriate. I found that meta data is the content that is not visible by the browser but only search engines only. I needed to apply the basic searching techniques from Google into my design.
Search engines like google use “crawlers”, a web bot that follow links on the internet for the specific aim of creating an index of all the sites on the web worldwide.
I learnt that having multiple internal and external links to the site helps the website get a higher ranking, but this is along with the other parts of the how the search engine makes sure your page is most relevant to what the user is looking for.
Making sure that the hierarchy of content is obvious to search engines is essential as it means you get the relevant pages listed, you can do this by creating a sitemap. A sitemap lists all the pages connected to a webpage so that the crawler can easily list them. You also need to have a robots.txt, to make sure that the crawler knows it has access to the page and is meant to list this page.
Adaptive, Fluid, Responsive or Static?
Responsive or Adaptive?
Responsive web design allows you to create a website that will adjust itself to fit the size of the browser regardless of the size of the screen. It means you code it once and it will flow more like a grid with images that will rescale themselves to fit the screen.
Adaptive web design is where you make lots of different versions of the same website so that it fits the different screen resolutions perfectly, while effectively gaining more control of the specific user experiences, it is time consuming. Adaptive design uses breakpoints that mean once you reach a predefined point, the layout will change to fit the screen again.
Something to take note of when making adaptive or responsive sites, is that they all use the same information but use styling to change the information. For example, an image is required at a large size, then the browser will resize it depending on the screen size. Therefore, when possible, it is important to use vectors. It is equally important to remember that you should always design for the desktop and then work smaller down to mobile rather than starting at mobile size.
So overall, fixed websites, the ones I am currently learning how to build have set widths and no media queries (allows the size to understand the size of the device it’s being used on). Fluid websites are a little different, they rely on percentages for relative widths to the browser itself, therefore they don’t need to you use media queries either. Adaptive are built to certain resolutions, then require media queries to determine the device or resolution, these usually rely on set or relative widths. Responsive seems to be a lot more focused on the actual resizing of the display as it is actually designed at multiple levels using again media queries and relative widths.
I found the utility http://www.liquidapsive.com/ which has the same design but allows you to change the way it is coded so you can see for yourself fluid, static, adaptive etc. This allowed me to find the negatives of using every type design. My first finding, one that I was already experiencing when designing my site was when you try to reduce the size of a static site;
Adaptive is time consuming and works well for smaller devices but as you can see there are white borders on each side of the design once you reach a certain size.
Liquid, because it uses percentages of the width works really well at larger sizes but starts to become illegible when you start to minimise it to a smaller level;
Finally, responsive seems to be the go to style as it works when the browser is both really large and really small.
Having understood the different types I thought it would be important to have a look at current responsive sites, as it was the best option from the four above.
Meti Design is a really nice responsive site complete with animation, smooth transitions and a nice 3D animation using frame loads like I noted previously in Sony’s Be Moved Campaign (https://akbrodie.wordpress.com/2014/10/15/website-analysis-4-dangersoffracking-com/). This makes the website look very professional and I found myself wanting one of the products they produce, whether that’s because of the website or not, I am unsure.Below you can see the different screen sizes effecting the page, and how similar the experience looks.
Skinny ties also have created very good responsive site that promotes the ties they sell. It works just like a responsive site should but has thew addition of a feature that I haven’t seen anywhere else. This feature being the fact that the rollover still works regardless of the screen size, I am unsure if this is pointless or not as when the screen sizes are smaller they generally are touch screen but it turns out that when used on a mobile, the rollover menus come up when the menu items are clicked on. Below you can see the images of the screen sizes and then the different sizes with the rollover menus.
Mry is probably my favourite out of the lot though, doing what my research said about starting with desktop and working your way down removing parts bit by bit. The desktop version is complete with zooming circles with flat colours and images in the background while the mobile version has none of this and turns into a box style, therefore creating to completely different experiences for the user depending on how they view the site. You can see this here;
References;
Brainstorming
As you can see from my brainstorm there are a few areas in which I need to cover in initial research before I can start considering the technical requirements. A lot of the elements in the brainstorm I have already covered in my blog such as typography.
Something I found interesting was the flow of content, from a sales background I recognise there five major steps to closing a sale with a customer. I understand that it is different on the web as you can’t hear what they’re saying and you can’t talk to them, but you can still apply the same principles. The five steps to closing a sale are:
1 – Making sure you understand your customers needs, and making your service relevant to them. This is done by understanding your target audience which I have already done in my research.
2 – Come across as confident and trustworthy, as they will only put trust in you if you trust in yourself. In normal situations you would build rapport with the customer so that you become friendly and someone they can trust. As I can’t do this through the web, I will have to use other resources that available such as using colour, typography, content and design to create such an experience.
3 – Pitch your service/product to the customer, and as we don’t know anything about the specific customer I have to be very broad in how we approach this. This has to relate to everything single customer, essentially we are pitching blind, with umbrella phrases and statements that will relate to vast amount of people visit the site.
4 – Objection handling is usually where the customer would present their reasons for not wanting the service/product and you turn round and use hard facts to win them around. Again this is not possible on the web, so we have to consider alternative methods such as a FAQ page which is easily relatable and maybe a testimonial page.
5 – Closing the sale is the most important of all steps but also relies on the previous steps being completed properly. You sum up all relevant information, relate to the customer with the information you know about them all while making them feel like your doing them a favour, they are getting something valuable.
Using this approach you could turn a casual visit to the site into a lead for the company, and potentially a sale. Once completing all five steps you provide the customer with the telephone number so they can call the company.
So, explaining how the flow of the page works, I also need to work out the actual content of the site. Firstly the most important thing is the homepage with the contact detail, secondly the portfolio of work for the customer to be able to look at and see the quality of the service provided, this should have rollover images with before and after shots with feedback from the customer. Lastly there should be an about us page for the customer to read a bit about the company so they can decide themselves if they like the sound of the company. The about page should contain details the company, how many staff they employ, what year they were founded, their values and vision.
In line with certain sales techniques that I am aware of from a previous job, offering a guaranteed better rate than any competition is a good way to win over customers, also offering free incentives will mean the customer will feel like they are getting a better service.
Design elements that I need to consider are colours and typography, I need to make sure they are relevant to the client needs and appeal to it’s audience.
WEBSITE ANALYSIS 5 – SONY’S BE MOVED CAMPAIGN
Sony’s ‘Be Moved’ campaign main focus is to allow users to look deeper into the products they create and the teams that work in them. They created an elaborate website with a fully immersive user experience using parallax scrolling, which is where the foreground images move faster than the ones in the background. This method of having separate layers within a page and manipulating the size and the speed they move you can create a sense of depth.
The method of having images and text moving alongside each other and flowing in front of and behind each other looks like something that would be somewhat of a nightmare should it be attempted using code.
The website is complete with animations of shattering glass, assembling of products and visual scenes of underwater, forests and the universe. It looks very professional and an extreme version of a parallax scrolling site, at first glances this website seems extremely complicated to build, but doing a bit of research I came to the understanding that it was much more simple than how I’d imagined.
By creating a video sequence that lasts 1306 frames and allowing the user to flick between the frames by scrolling is essentially all that is needed to create a website as creative and professional looking as this one. It then creates a website that looks like nothing else on the market as it would be extremely difficult if not impossible to create the movement of some of the objects in 3D space with just normal code. Looking at the code;
the .frameloads is a function that makes the display move on the the next image when thhe user scrolls, and the small_256,small_512 and large_960 are for the different size images for the different sized displays.
As you can see it is very visually appealing, the textures and layers just create this completely immersive experience for the user, telling the story of how they engineer and design together.
References
http://subtlepatterns.com/thumbnail-view/page/16/
http://discover.store.sony.com/be-moved/
https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/
Back to Code
As our first task we were told to recreate this site (http://dynamic.artdesignhull.ac.uk/shared/framework-03/home-page.php)
With a few visual aspects that were due to my photoshopping skills on the buttons and the actual images i chose to include, there are very few differences between the two sites as you can see, they are almost the same.
Original;
My Version;
I understand a few things are very important when designing websites. Firstly, keeping your code tidy so you can hand off the work, I believe I have done that with both my HTML;
and my CSS;
Secondly a keeping your hierarchy of files tidy and in order, I believe I have also done that;
Featured Image: http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/code-wallpaper-2.jpg
akbrodie.wordpress.com 