Blog week15 

Portfolio design and development

The process involves visual design, wireframe drawing, difficult problems solving and delivery.

Visual Design

First I browsed through various portfolio samples and analysed how their content layouts are and which one gives better user experience, better interactive level, better present content.

Wireframe

As is shown in last week blog

Difficulties and solution 

First problem I met was the layout problem and use of css, the website gets easily messed up when there are a lot of stuff within one page and it is really difficult to put them in the same place across different monitor size, shape and browser. 

What I did was to unify all the length measurement unit. For all the <div>s, I used unit ‘vh’ for its height and ‘vw’ for its width. It works even better the percentage (pixel is definitely worst choice when it comes to section alignment within a page). But another problem emerged was that images are really naughty, they do not listen to you if you want to display and align them in the measurement method in <div>s. The image width and height have a solid ratio and it is always either width or height meet the max unit and the other one has to be scaled according to the width-height ratio. What I did was to use width ‘vw’ unit to scale all the images so that they all remained at the particular percentage of the webpage, and its floating <div>s will not mess around with it anymore. 

However, when implementing project page, project wrap-up section, the image change buttons were so difficult to make them same height as the image. Because the image is determined by view width and its height adjust according to its width. But the buttons’ height has to be determined by my giving it a number and by diving it a width does not change it height as it’s not a image. This has been puzzling me for quite a while. 

My approach of solving this problem is to create two images, button back and button next, with a certain ratio regarding the image width and height ratio. All the images I will put in that specific section will be 2880*1800 as they are all screenshots of the project. I created the image to be 130*360, as the height is one fifth of the size of screenshot images and the width is adjusted by my measurement according to putting it on the two end sides of the image on the page. I used transform scale up to 5 (5 times in width) and change the image vw to proper number so that it adjust according as well, making it perfectly fit for the images. 

Another difficult part is the ‘email me’ section, what ‘Email Me Now!’ the button functions as is not submitting the form but as a shortcut button that once being clicked, triggers the computer mail app drawing a draft of directing email to me straight away. But to put the content from the form to email draft as a prewritten mail was really hard and it took a quite a while to figure out ho to implement it. I looked it up in google and after browsing through a couple of answers, I gradually had the answer in my mind. I first used event.preventDefault() to stop the form from sending message to nowhere and then I passed the content in the form by aligning it to variables, which are later used in javascript calling mailto function content. 

 And this is the code snippet of the code for directing email from the button.