Pottery Barn Teen
High-End Furniture and Decor Retailer
As a contractor I built the HTML and CSS for many Pottery Barn Teen pages. Some were existing pages that needed a design overhaul. Others were new.
- To see the markup I wrote for each page, inspect the code within the div with an ID "content."
- Most pages on pbteen.com have separate desktop and mobile files rather than a single responsive/adaptive page for both phones and computers.
- Instead of using common adaptive techniques, most Pottery Barn Teen pages on desktop scale down the images, margin, padding, and font sizes between browser widths of 990px and 1440px. If your browser is narrower than 990 or wider than 1440, the scaling stops.
- Their mobile pages do the same, but the scaling does not stop below 990 or beyond 1440.
- They do this to maintain the design of a page and probably because they feel that adaptive design mucks up their brand and takes up more design/development time.
Tracy Reese Lookbook
Notes
- New landing page
- All hand coded except for the outer structure of the product scroller. I did provide the markup and styles for each product item.
- Features BEM naming conventions
Monique Lhuillier Lookbook
Notes
- Existing landing page
- I updated much of the CSS and HTML to match the page's design refresh.
- I reused some of the existing classes and naming conventions to save on time.
- When I had opportunities to create my own class, I used both BEM and atomic naming conventions.
Harry Potter "About the Collection"
Notes
- I updated the graphics and much of the markup and styles to match the page's redesign
- All hand coded except for the slideshows and fading photos which use components built by another team