The first task I had today was to make my portfolio website responsive, in particular to have it be mobile friendly. When designing for mobile, everything must cascade vertically, whereas my website previously had a grid layout where many divs were positioned side by side. To do this, I used a media query, where the browser would check the width of the display, and if it were under 640px wide then it would execute a certain section of code, and if it were over 640px then it would execute different code. This means that in the under 640px code, I can take out the flexbox structure, and change them to block elements, meaning they will stack vertically, for viewing on mobile. Because my images are already responsive, the content changes dynamically when viewing on a mobile device.
 |
| The code for my mobile media query |
 |
| The code for the desktop media query, complete with flexbox structure |
I also wanted to use some CSS transitions in my website, as they are a simple yet effective means of adding a more interesting look to a site. I started by adding a transition to some of my links, whereby when the user hovers the cursor over the text, the font size increases slightly over 0.2 seconds. This is a simple trick that indicates to the user that this text is clickable, and will most likely carry out an action when clicked. The other transitions I added were to images. I scaled up the image on the hover, and also made the image slightly transparent, with the idea being that there will be some text appearing over the image describing what the image is, or what it was created for.
No comments:
Post a Comment