Hi and welcome to this course!
I’ve spent way longer than I intended on this particular course, and I left this intro page for last because I wanted make sure this page reflects how excited I am to be releasing this to the Divi community.
…
I am.
I am very excited.
So let’s dive right in and discuss design basics and mobile responsiveness.
One basic truth of graphic design is that visual hierarchy is very important. Of course. Because the point that draws attention is the main idea and the smaller elements are supporting ideas. Right?
And that’s why we use H1, H2, and H3 tags. To convey visual hierarchy.
BUT, when it comes to images and blurbs, all that careful hierarchy is defenestrated with aplomb.
That is not a very responsible approach.
– So, if an element is prominent on desktop, it should be on mobile as well.
– If an element is small on desktop, it should be less prominent on mobile also.
Simple, right? But it’s really hard to do when themes take over the responsiveness and just stack everything. That’s how you get smaller images going full width and becoming larger than featured images. We don’t want that.
Disclaimer: Most of the websites featured in the video were originally designed by a very talented graphic designer. (and I’m the talented developer who put it together, haha.) I collaborate on the functions and layouts, and sometimes collaborate on design elements, typography, etc, but the desktop version of the design is still very much the graphic designer’s original design (whether it’s from my work at the agency, or a cool designer I started working with, both of whom I love to work with), which is the proof I get. Then, the responsiveness is usually my responsibility and realm.
Note: All the websites that I built were made with Divi. The ET layouts that I mention in the video are just showing how Divi can be limited when using just the default behavior and module options. You need extra CSS to make it better. Also, I didn’t feature any websites with bad responsiveness (except for ET’s layouts) because that could be disheartening to the designer and/or developer. (For the record, I like Divi’s layouts and the designs they offer in the demo packages. I think they’re professional-level designs, and they look great. The only problem I have is that it’s made with just the builder options, and that means it’ll always have responsiveness problems)
So, if you’re done with the video, shall we move on? Cool!