On the occasion of the 2016 DEVIT conference (http://devitconf.org/) in Thessaloniki, George Katsiampas, front-end developer at Skroutz.gr, hosted a workshop about the process of the redesign of our website. Specifically, he demonstrated the challenges and needs the front-end team tried to solve through the application of Card design, the solutions suggested and finally how they managed to implement these solutions in HTML & CSS, keeping our codebase clean and maintainable. This workshop was about front-end developers and designers who are familiar with basic design & Web UX terms, responsive design, and those able to understand SASS usage.

1. Skroutz redesign
how to approach Card-based design &
SASS content-specific breakpoints
DEVit workshop - May 2016

2. Giorgos Katsiampas
■ g.katsiampas@skroutz.gr
■ twitter.com/katsampu
Front-End developer @Skroutz.gr
■ front-team@skroutz.gr
■ engineering.skroutz.gr
■ twitter.com/SkroutzDevs
■ github.com/skroutz
■ skroutz.workable.com

3. we will talk about:
at this workshop
■ Why we need to redesign a site
■ What Card-based design provides
■ What Media Queries and Element Queries are
■ How to create a list with items we can position as
we want with SASS

4. 1. Why redesign?
■ To make it responsive
■ To add new functionality
■ To improve User Experience
■ To improve code quality & performance
■ To rebrand the site
■ The purpose of your site has changed

5. 1. Why redesign?
■ To make it responsive
■ To add new functionality
■ To improve User Experience
■ To improve code quality & performance
■ To rebrand the site
■ The purpose of your site has changed

6. 1. Why redesign?

7. 1. Why redesign?

8. 1. Why redesign?

9. 1. Why redesign?

10. 1. Why redesign?

11. 2. Why Card-based design

12. 2. Why Card-based design

13. 3. Media Queries vs Element Queries
Media Queries: apply styles based on the browser
environment they are being viewed on (the most common
thing: the browser's width).
Element Queries: a Media Query but for an element, rather
than the environment. It naturally apply styles due to the
width of the respective containers.

14. 3. Media Queries vs Element Queries
Can you think of why there are no
Element Queries?
Can you think of a tag where Element
Queries apply now?

15. CSS was invented (1994) to style simple documents with
high-quality typography, i.e. pages with a single column
layout that contain a lot of text! For more complex layouts
something else should have been invented, but since this
didn’t happen, most started using CSS for other purposes!
CSS wasn’t designed to
do what it does
Fact:

16. 4. Exercise
Let’s create Skroutz.gr ’s recently viewed section
1. Fork codepen.io/katsampukas/pen/ZWNaWB
2. Add media queries for
min-width: 500px
min-width: 700px
min-width: 1000px

17. 4. Exercise
3. Make list items behave as follows:
min-width: 500px : 2 items per row
min-width: 700px : 3 items per row
min-width: 1000px : 4 items per row, all in one row
4. Solution: codepen.io/katsampukas/pen/ONYqrP

18. 4. Exercise
5. Write a SASS mixin to emulate the previous behavior
with the following params:
- Viewport
- Items per line
- If items will be shown in 1 row or in multiple rows
6. Solution: codepen.io/katsampukas/pen/JXqVXx

19. Questions / Follow-up
We hope you got some value from the workshop.
Or maybe you have a question about it.
■ twitter.com/SkroutzDevs
{#devit}
■ front-team@skroutz.gr
■ engineering.skroutz.gr
■ skroutz.gr/blog
■ github.com/skroutz
■ skroutz.workable.com