Webflow Tutorial: Ten Tips for Creating a Responsive Website
Search Engine Optimization Tips
– NEW SKILLSHARE CLASS –
Hey all! I just launched a new course called “Webflow for Beginners”. Most of the tutorials I do on YouTube are for intermediate users. But, I wanted to do something for folks starting from scratch. Click the link below to get 2 months of Skillshare Premium for free and be able to watch the course:
https://skl.sh/2PU9tML
– ABOUT –
Making your website responsive is critical. Not only does it mean your site looks good on tablets and on phones. Search engines prioritize responsive sites in their results (SERPs). Here’s 10 tips on how to create a responsive site in Webflow:
1. The Container Class | 00:45
2. Proportional Units | 03:03
3. Flexbox “Wrap Children” | 05:05
4. Flexbox Alignment Reverse | 7:03
5. Keep your classes tidy. | 09:02
6. Text Columns | 11:28
7. Max-Width | 14:16
8. Background-image | 16:44
9. Landscape Declarations | 20:55
10. Ephemeral Units (EM) | 24:00
Microsite: https://jocando-tutorials.webflow.io/responsive-design
*Quick note. I consolidated all of the tutorials into one project and lost some stylings along the way. But the core functionality is still there.
Read-Only Link: https://preview.webflow.com/preview/jocando-tutorials?utm_medium=preview_link&utm_source=designer&utm_content=jocando-tutorials&preview=b1ade817df2e41566f53d6b876d5b9f9&pageId=5dc84dbcd6571e5490c574d4&mode=preview
– ABOUT ME –
Serve – My Studio’s Site: https://www.madebyserve.com/
Dribbble: https://dribbble.com/Jose_Ocando
– NEW SKILLSHARE CLASS –
Hey all! I just launched a new course called “Webflow for Beginners”. Most of the tutorials I do on YouTube are for intermediate users. But, I wanted to do something for folks starting from scratch. Click the link below to get 2 months of Skillshare Premium for free and be able to watch the course:
https://skl.sh/2PU9tML
– ABOUT –
Making your website responsive is critical. Not only does it mean your site looks good on tablets and on phones. Search engines prioritize responsive sites in their results (SERPs). Here’s 10 tips on how to create a responsive site in Webflow:
1. The Container Class | 00:45
2. Proportional Units | 03:03
3. Flexbox “Wrap Children” | 05:05
4. Flexbox Alignment Reverse | 7:03
5. Keep your classes tidy. | 09:02
6. Text Columns | 11:28
7. Max-Width | 14:16
8. Background-image | 16:44
9. Landscape Declarations | 20:55
10. Ephemeral Units (EM) | 24:00
Microsite: https://jocando-tutorials.webflow.io/responsive-design
*Quick note. I consolidated all of the tutorials into one project and lost some stylings along the way. But the core functionality is still there.
Read-Only Link: https://preview.webflow.com/preview/jocando-tutorials?utm_medium=preview_link&utm_source=designer&utm_content=jocando-tutorials&preview=b1ade817df2e41566f53d6b876d5b9f9&pageId=5dc84dbcd6571e5490c574d4&mode=preview
– ABOUT ME –
Serve – My Studio’s Site: https://www.madebyserve.com/
Dribbble: https://dribbble.com/Jose_Ocando
source