Features and methods displayed in this Portfolio example:
- Rapid Prototype Development
- Fluid Layout Development across all device platforms
- Mobile APPs Development
- Media queries
- Fixed navigation and footer
Tools used to build this web page:
- Adobe Photoshop
- Adobe Dreamweaver
- Justinmind Prototyper
Media queries are used to make the layout fluid (responsive web design), to detect the device screen resolution and to adapt the page size to match it.
The other thing achieved with media queries here is that it changes the number of columns depending on the device screen resolution. For smaller screens only one column is displayed but for larger screens the text of the page is organized in two or three columns.
The logo and the Slideshow images are produced in Photoshop.
Navigation and footer gradients are built using CSS3
Header, navigation and footer stay fixed while scrolling to provide an easy access to navigation and to add a native feel to the webpage when viewed on mobile devices.
Testing and validation of the finished website was done on different browser and device platforms, including mobile devices like iPad and Android.