6 Steps to a Seamlessly Responsive Website with Divi

Introducing Upfront 1.3, aka Blogging on Speed
July 5, 2016
How to Change the Sidebar Side in WordPress
July 6, 2016
Show all

Welcome to Day 36 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


While it’s true that Divi is a beautifully responsive WordPress theme “out of the box”, it’s also true that when using Divi to create a unique website for yourself or a client a fair amount of testing, tweaking, and fine-tuning will be absolutely necessary as the custom design you’re creating comes to life. If, that is, you want the final result to be a flawless responsive website that looks perfect on every device.

Having traversed this path many times for many clients I thought it would be beneficial to the Divi Community if I shared my design process and the lessons I’ve learned along the way. In the article below I’ve created a six step process that anyone using Divi can adopt or adapt to improve their responsive design workflow.

Let’s get started!

1. Know Their Business Goals Inside Out

For me this is where the real secret to successful responsive web design lies. I start with a pre-project questionnaire which forms the basis of an in-depth conversation about where they hope to take their business in the next five years. These are just a few of the questions we ask.

What is their current business mix? Are they expecting that to change?
What are their plans for expansion? Do they plan to introduce new products or content (ie. sell online, launch a podcast, build a directory) soon or in the near future?

One of the most important things I ask my clients to think about, is how they want their visitors to move through the website and what key points they want to get across on their home page before visitors move on. How they answer, will determine how we craft the home page.

Identify the key messages that need to be communicated on the home page, place them in order of importance and you are well on your way to creating a client-first web experience.

2. Look At The Stats

I’m addicted to Google Analytics because it helps complete your client’s business profile in so many ways. Low bounce rate? Their home page content is clearly working, so work out what they need to keep and what needs to go. Few returning visitors? People aren’t returning for a second look so maybe the product isn’t showcased well enough. Low dwell time? Perhaps the copy is confusing or not compelling enough.

Most importantly of all, Analytics can tell you which devices most visitors are using to visit a site. Most of my clients are photographers, working on large desktop Macs, so I know that my designs need to be flawless at that size. But most of their clients are visiting first on tablet and then returning a second time on a 15” laptop. This kind of intel is priceless and completely answers the question, for any project, about ‘mobile-first’ or otherwise.

3. Sketch It Out

At this stage, you might be thinking about using a wire-frame to help nail down the basic structure of the site and how the pages might flow from one to the next. My starting point is always a trusty pencil and blank paper. It enables me to make a series of rough sketches, without committing too heavily to any particular design direction. I usually do this with the client until we’re agreed on the best home page layout.

The_Design_Space_Wireframe-Sketch

After that, my next step depends on how technically complex the build is. If it’s straightforward and I have all of the copy and assets in place, as well as a detailed sitemap, I might dive straight into Divi.

If the design involves originating original UX details, I often use my current crush, Adobe CC Experience app, (http://www.adobe.com/uk/products/experience-design.html) to test animations and responsive layouts where content may be significantly altered on tablet or mobile. This gives your client the option to see what will appear above the fold (the bottom of the screen) on all devices.

The_Design_Space_Wireframe-Adobe-Experience-CC

Most often, when a project requires complex graphic elements, I work in Photoshop to develop a detailed layered file. I’m a Photoshop fan because it eliminates the guesswork when it comes to developing assets you’ll be using in the finished site. In addition, you can quickly export groups of layers as trimmed png and jpeg files, speeding up your workflow massively.

My golden rule is to create a canvas for the resolution most commonly used by your target audience. In my case, I start with a typical 15” retina width of 2880px and I make sure I mark my centre point and standard stage with guide rules. For the record, the standard Divi site width is 1080px.

The_Design_Space_Wireframe-to-PSD

Group your layers together in folders for each section, so that you can easily adjust section heights and duplicate design features.

The_Design_Space_Photoshop-Layers

4. Test As You Go

One of the most useful features of Divi is the ability to save and reuse sections and layouts, making it easy to build out pages with similar structures very quickly. What you want to avoid at all costs, is duplicating layouts that still need some responsive tweaking. There is nothing worse than having to go through a dozen finished pages correcting the same issue over and over again.

To speed up your responsive workflow, I develop each section and test as I go, using the free online tool, Screenfly (http://quirktools.com/screenfly ). When I reach the end of a page, I test on real devices including Android, iPhone 5, iPhone 6 and iPad as well as a 27” monitor and 13” laptop. Obviously dragging your browser into an approximate shape works well enough but nothing beats real device testing.

Perfect your home page and you’ll find you can use and reuse those sections to form the backbone of the rest of your pages.

5. Tailor Your Content to the Device

The more responsive websites I build, the more I’m embracing hiding certain content, particularly when it comes to mobile. People who visit a site for the first time on mobile, tend to be looking for an overview. Sure, that’s a generalisation, but it means you should really focus on your client’s business goals and make sure that they can quickly and easily reach key areas with just one click.

Don’t forget that when using Divi, sections can easily be hidden on tablet and mobile, by checking just a couple of boxes.

The_Design_Space_Brett_Florens_Site

6. Pay Attention to Detail

If you’re building with Divi, which does so much of the heavy lifting, you’re already well on your way to getting to grips with responsive design and when it comes to controlling the finer details across devices, this is where Divi comes into its own.

I particularly love how easy it is to tweak font sizes for tablet and mobile, as well as both padding and margin. Where I used to writes dozens of media queries, now I write none.

In Summary

Developing a solid planning process that identifies business priorities first and tackles potential problems before reaching the in-browser stage, will help you develop responsive sites with confidence and speed. Keep testing at every step of the design process and use Divi’s built-in Advanced Design Settings to get the results you want on each and every device.

Thanks for reading and please feel free to ask any questions you have for me or share lessons you’ve learned in the comments section below.

Also, be sure to subscribe to the Elegant Themes email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

divi-2-6-logo

Divi 100 Day 36

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 6 Steps to a Seamlessly Responsive Website with Divi appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar