Post 5 | Add single, media: images, video and audio | Project 3

Add single, media: images, video and audio

At this stage my client has only presented me with images for the website rather than any video, I suggested video to him but he does not appear to enthusiastic about spending a lot of money on a promotional video, possibly a self-filmed tour of the factory in the future. 

 Below I am using siteorigins pagebuilder to customize the layout of my pages according to the order I want content to be in, on this page I have images scaling down the side with the text to the left of them.


Here is a preview of the layout on this particular page, images follow the user down the page with separate paragraphs, the idea was to make this easy reading for the user.



Upon switching to mobile view the images are pushed under the text, not the effect I wanted since my goal is for the user to read along with the images, I will have to look at this in the future.



Following my goal for mobile optimization, I have installed this handy plugin which resizes images for mobile devices.



Inside the settings page for this addon I can choose which resolutions the images resize at, I left this on default due to it already being set to optimal resolutions for adapting to phones/tablets,



Below is the recipes page, with an image included, I have allowed plenty of white space and implemented a simplistic yet attractive picture for the user to easily digest upon opening this page.



Comments

Post a Comment

Popular posts from this blog

Post 4 | Implement navigation for the website | Project 3

Image
Implement navigation for the website Pictured above is the simple navigation for the current website iteration, due to the minimalistic approach towards creating this website there is one consistent menu at the top of the page across the website, this menu also follows the user down the page as they scroll away from the header. As displayed above, upon a user hovers their mouse over a button it highlights blue, promoting affordance to this action using a universally positive color. The font chosen is kept to a readable standard for usability purposes, all lower case characters are being used in order to promote a slightly more relaxed feel to the browsing experience. Mobile mode navigation I have customized the navigation menu in mobile mode to encompass an intuitive process for mobile users, the menu contained all the regular links from the normal sized webpage is clearly labeled 'menu' along with the burger style icon which is known as the...
Read more

Post 6 | Add a Contact form | Project 3

Image
Add a Contact form (12 marks) (Recommended resource: https://wordpress.org/plugins/search/contact+form/ ) Blog: Explain how the form was added and how you made it fit in with the sites look and feel. I have chosen ninjaforms to add a contact form to my contact page of the website, this specific plugin carries the simplistic design whilst also being easy to change for other needs if the site owner requires in the future. Here is the plugin incorporated onto the contact page, due to the main content theme being white is was rather easy to slot it into the page without too much worry over colour themeing, although I would like to look into making it more compact to help keep the page feeling comfortable. The main page of ninja forms interface allows for easy management of multiple types of forms. Further customization of each element making up the contact form is available, including display options, restrictions of characters allowed inside the input box as well a...
Read more