A brief case-study analysis of the work done on http://peach.smartart.it More information can be found on the blog post http://blog.smartart.it/2016/06/05/making-website-shouldnt-be-difficult.

1. SmartArt Portfolio
Redesign 2016

2. Requirements
Mobile-first RWD
SEO aware
&
W3 compliant
With an keen eye on
UX and UI
Modular and Maintainable
in essence
The short-mıd term aım

3. Content Strategy

4. Mobile-First Layout

5. Mobile-First Layout

6. Landing Page - Initial concepts
Look & Feel

7. Artworks Gallery Page - Initial concepts
Look & Feel

8. Large Artwork Page - Initial concepts
Look & Feel

9. Small Artwork Page - Initial concepts
Look & Feel

10. The Technology
Behınd the Scenes
Keep things simple
&
Concentrate on the output
Rapid Prototyping
Progressive Enhancement
Static Website Generator
Metalsmith + Gulp
Web Components… (to come)

11. The Workflow
Keepıng everythıng
Under Control
Gulp to streamline prototyping and
image manipulation
Use of GIT
With effective branchıng strategy
Issue tracker - BitBucket
to keep track of the progress
Basic but efficient
deployment system via CLI

12. Use of GITflow for a more predictable and traceable history of commits

13. Preliminary Results
Bounce Rate
reduced from ~100% down to ~50%
Average download size
~1 MB on mobile
~2 MB on desktop
Overall Performance Improvement
~1s at DomContentLoaded

14. Next Steps
Web Components
Full PWA
UX journeys improvements