• Web design | Responsive design |Edmonton property project |

    .html from .psd file

    2016 | .png file to be transformed to .html file
    Converted from .psd by web service
    Property template

    Comments: Code from .png file (result of conversion .psd to .html file by online web service) was too raw for implementing.

    See: designed for Edmonton property project html page from .psd file.

    I had to adjust obtained code to grid system I have created for this responsive design.

  • Mobile version (iPad 480px height)

    2016 | .png file
    Next step
    Property template

    Comments: Design is made in Adobe Photoshop CC 2017.

  • Testing mobile web page for responsiveness at mobile devices with different screen resolutions

    2016 | Tested resolutions
    From 768px to 240px
    Mobile page

    Comments: Responsiveness of design is achieved with scrolling screen.

  • Go to UX design

Responsive design

Copyright 2016.

All images are original, created by the author, M. Salitska, except those photos temporarily used for experimental template (.psd file).

Software used

  • Adobe Photoshop CS6
  • DreamWeaver

About this project

  • This type of responsive design preservs original design of the web page.
  • Responsiveness is obtained with using CSS overflow property.
  • CSS overflow property enables tapping/scrolling of the page.
  • Another type of responsive design (usually achieved with resizing screen elements) has not been used at this project.
  • Responsive images were used for this project ( see: CSS min-width property)

More work...