I have now designed and coded my first responsive webpage! A webpage being responsive means that it is a webpage that adapt to the size of the screen used to view it.

My responsive onepager is the product that came out of a webdesign process lasting almost 2 weeks.

Week 1: Communication & Design

To improve our design skills we were taught about composition, the Gestalt Principles and contrast. To make our communication more precise we created a creative brief to get a better understanding of what we want to communicate through our site.

In the end of the week the process of creating our first responsive portfolio really took off and we created the following elements:

  • Site arcitecture
  • Responsive designpatterns
  • Wireframes for both
    • desktop
    • tablet
    • mobile version
  • Style Guide:
  • Visual design (mockups)

A lot of the items are mainly tools, which just helped me create the final responsive portfolio. But two of the items I think you should get insight to. One is the responsive designpattern and one is my mockups. The reason is that you can then yourself go and check out the final result and see if you think I suceeded.

Responsive Designpattern:
I chose that my responsive designpattern should be mostly fluid. It means that when the screen gets smaller the space around the text will get smaller and the same happends to pictures and to the font. But for some element I did not find Mostly fluid to be enough. Thus I also used columdrop, which means that colums or pictures placed next to each other on a big screen will be placed below each other on a smaller screen. Furthermore I used layoutshifter for some of the elements. Actually for this design it just means that I for smaller screens removed some design element that did not have a function.

Mockups

Week 2: Coding the Responsive Portfolio

In the next we we went through following process:

  • Layout diagrams for desktop. This gave an overview of which elements I needed in my HTML document.
  • Created the HTML for the desktop version.
  • Created the stylesheet for the desktop-version.
  • Layout diagrams for the tablet version. For this I used my responsive designpattern described above.
  • Updated my stylesheet for the tablet version by integrating mediaqueries
  • Layout diagrams for mobile version.
  • Updated stylesheet for mobile version again by using mediaqueries.
  • Costumized the pictures so they had the right pixel sizes for the different devices and saved them for web to make my site load faster.
  • Updated my stylesheet so every design element was in line with the styleguide.

What Would I Improve?

Personally I am really satisfied with how much the coded versions looks like the ones made in Photoshop. But now that I have time to reflect, I think I put design above functionality when creating the page. Furthermore I have to learn Javascript before the portfolio and the photography galleri can become more then just 2 static pictures. When I learn javascript I would also love to animate the bubbles so they would move upwards.
And as one last thing I would like to know how to create a Hamburger-menu for the mobile version.

Leave a Reply