sac807web-blog

[sac807web-blog]

Alongside searching the internet for tutorials, in order to build a mockup of the website, I am referring to the book ‘HTML & CSS design and build websites’ by Jon Duckett. I am proficient at using code, however if I have any doubts or haven’t built an element before, this book is extremely useful to refer to. 

Below are some links I have used whilst learning new elements of code:

http://www.designlunatic.com/2011/08/isotope-tutorial/ - this was a tutorial on how to set up Isotope to work - as I have never used Isotope filtering before it was essential to read up how to use it. 

http://wpandsuch.com/how-to-create-a-responsive-filterable-portfolio-with-isotope-js-and-fancybox/ - another tutorial on Isotope including fancybox

http://stackoverflow.com/questions/7283045/display-centered-row-of-images - I had some issues centering my images which was an unusual thing to come across, and used this forum to help resolve my issue. 

http://www.w3schools.com/html/html_forms.asp - I have never embedded a form into a site before or used PHP so this was another new thing to read up on. 

http://formalize.me/ - forms again

https://bootstrapbay.com/blog/working-bootstrap-contact-form/ - another php guide - https://github.com/bootstrapbay/contact-form/blob/master/index.php - the code to this guide

http://www.w3schools.com/php/php_install.asp - how to set up PHP

https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form - another guide to forms and PHP

[sac807web-blog]

UWE - Bristol 2016

What I like: The masonry style layout is appealing  One page design - just keep scrolling  Background isn’t distracting  Including links to individuals websites is a good idea 

What I don’t like:  Using this tumblr theme has provided great restrictions; the menu provides no options and therefore it is impossible to navigate through the work, you just have to keep on scrolling.  There is no information with students work - no contextualisation 

[sac807web-blog]

Salvattore and Masonry

In my experience Masonry is slightly easier to work with than Salvattore although they both achieve the same outcome so if this was a method that was desired to be used, either of the JS files could be downloaded and used to the same effect. 

[sac807web-blog]

Isotope 

Isotope creates a grid system with filtering options. The demonstration on their website is the Table of Elements which has filtering options, which when clicked, filters the view to information that is relevant to that option. E.g. transition metals. 

This would be a potential method that could be employed to separate students work into different categories. E.g. if you were looking on the site and just wanted to see Illustration, you would select ‘illustration’ and Isotope would remove any inapplicable images.  

[sac807web-blog]

Pinterest style layouts - Masonry 

Pinterest has an icon and quite frankly, beautiful layout. It is a responsive layout that automatically resizes to the correct number of columns depending on how big a window you have open. This grid system is known as ‘Masonry’ (Imagine trying to fit bricks in spaces to build a wall) and involves making the most out of available space with minimum white space. Posts align in columns with flowing rows that automatically fit into the gaps (depending on the height of the above post).  When using Bootstrap you need an extension to create the Masonry style gird -

Masonry 

Isotope

Salvattore 

[sac807web-blog]

Less and Sass 

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.

Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. The quickest place for first experiments with less is our online editor.

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

I don’t have any experience using Less and Sass as I haven’t developed any real skills in CSS and using pre-processors to make my life easier. Bootstrap has the functionality to work with both Less and Sass and I will be looking into using these sites and practicing writing CSS prior to coding the website so that I can do it as efficiently as possible. 

[sac807web-blog]

Bootstrap 

Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. It is a front-end-framework. 

It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

I have experience using Bootstrap - I used it to build my portfolio website and am therefore familiar with its functionality and how to get started using it. I think it is an invaluable source which allows you to build impressive looking layouts without necessarily knowing the ins and outs of HTML, CSS and JS

[sac807web-blog]

Wordpress

Wordpress are a site I have no experience with. What I know is that you can build a blog or website on their site. They offer layouts for you to insert content into and you can buy a domain e.g. ‘filenew.co.uk’ and then insert it into Wordpress.  I have never worked with Wordpress code. Not all html is accepted by WordPress. Therefore I am not overtly keen with using WordPress to build the degree show site. 

[sac807web-blog]

UK2

Uk2 are again another site to consider using to host the site. As with all package deals, the domain name is thrown in free. The business cloud option seems like a good option as the data is stored in a cloud making it more reliable and less likely to crash. 

[sac807web-blog]

Names

Names offer a good deal with 3 months free hosting on a 12 month contract. However the control panel and operating system that the panel works on is Windows and Linux, so being a heavily IOS based school, this site will perhaps not be appropriate as maintenance of the site will not be easy.  

[sac807web-blog]

1&1 

1&1 are a company that I have experience with as they host my personal portfolio website at the moment. They normally offer a deal to buy your domain for 99p and offer quite reasonably priced packages with the domain thrown in. 

[sac807web-blog]

123reg

123 reg offer the capability to buy your domain and have various packages available in terms of hosting. In order to pick the right package I will have to research into the amount of webspace required to successfully host the site. 

[sac807web-blog]

Ian Barnard

What I like: This website is stunning. It is laid out to perfection Navigation is simple Background is plain so doesn’t detract from the work Beautiful masonry style layout Lightbox full screen view of work is great

What I dislike: Nothing, this portfolio showcases the work beautifully

[sac807web-blog]

David Airey 

What I like: The high quality images in this site really make it look great - images that spread across the screen are visually enticing  Clear navigation  White background works great 

What I dislike: It’s not immediately obvious what the designer does 

[sac807web-blog]

Hugo Miguel 

This is a strong example of a successfully branded portfolio website.  Things I like:  The uniqueness of the brand makes the website stand out from the crowd Clear navigation  Slightly unusual layout makes the website memorable  Things I don’t like: The brand isn’t necessarily relevant to the individual’s practice 0 this isn’t an issue as a personal brand is important, but you don’t know what to expect when the site loads which can be a bad thing

[sac807web-blog]

Thinkjam

The first agency/website i’ve found that is hosted by tumblr 

What I like  Unusual/non-traditional layout - stands out from the crowd and is memorable Using a strong black and white theme is appealing - the black background gives the site depth that you don’t get with white background sites.  Clear navigation 

What I don’t like  Unusual/non-traditional layout could backfire and have negative connotations because it isn’t the norm that people are used to  The site appears wordy in places which isn’t nice to look at 

[sac807web-blog]

383 Project

What I like  Bordered layout is interesting  Clean design  Colour scheme throughout is beautiful  Icons are effective

What I don’t like  Homepage is not where you would traditionally anticipate it to be - this is not an issue but I did have to momentarily hunt it down (at the centre of the page)