Responsive Web Design for Photography Website – Brad Carlile
Feb 8th, 2013 by Brad
I created my new photography website (www.bradcarlile.com)as a responsive web design. Now my images and information can be easily viewed on smartphones, tablets, laptops, and large computers in a way that is best for each device.
Responsive web design is used to allow websites to adapt web pages to the layout to the device he or she is using. On my website the content also changes for each device.
Check out my new beautiful responsive website layout below for inspiration in your own responsive web design projects.
Desktop (widescreen)
Computer – Responsive Design
Notice how the background changes for the smaller screens, this should make them easier to see. Also the smaller screens are designed to be easy to scroll with your fingers.
iPad (tablet) & Mobile (portrait)
iPhone & iPad screenshots – Responsive Design
Details of some of the website changes:
- Menu appears at the top for computers and laptops
- Menu is at the bottom for iPhones so images don’t get crowded out by menu
- Menu show same images of the portfolios
- Computers with more room have an additional story about “Letting Go”
- There is a tooltip that shows you hidden information about my images, hint look for the blue circle with an “i” in it
- A few form for easily signing up for my newsletter
- Short & long resume, depending on how much info you want
Details html5 and css3 for web designer:
- Based on a fluid grid, with screen-size dependent content
- fixed position css for main image
- Multi-level nav menu with images, mostly css based
- jquery tools tooltip
- form for newsletter signup
Check it out at: www.bradcarlile.com and let me know what you think! thanks!
Nice job, Brad! I was just searching for responsive design examples and came across your blog. I like what you’ve done!