Tip: Start With A Skeleton
There are a lot of decisions that need to be made as you build a web page. Where does the title go? How big do I make it? Where does the image go? What is it going to look like when I have one paragraph? Five paragraphs?
If you have a designer on your team, they may give you mock-ups! These are great, and springboard the task of laying out content. But before you start dumping ‘lorem ipsum’ all over the page, may I offer a tip? Use a skeleton.
What Is A Skeleton?
You probably have already seen them when you visit your favorite social media site. Before the page is fully loaded, you will see grey box placeholders where content should be. That is a skeleton.
Why Should I Start There?
Using ‘lorem ipsum’ is nice, but sometimes distracting because you always want to read it. Ever show someone your progress, and they ask “what does that all mean?” By building out your page with a skeleton, you can focus solely on layout, spacing, and proportions.
Use It In Production
Your time and effort building a skeleton page is not lost work. You can use your skeleton in production during page loads. In doing so, you increase the perceived speed and responsiveness of your website. Use it anywhere you are making requests to the backend for more content, and the user has to wait.
Show Me An Example
My example app is a simple movie search. It has a text field that allows the user to type in a title they are looking for. This will submit to the IMDbOT API, which will return a bunch of results. The results include movie poster, title, summary, and rating information.
I am building this app using quasar framework, which is built on VueJS and has a large library of available components which includes a skeleton!
I created a div.movie-result which will wrap each of the movie results. To create a few, I added a VueJS for loop to iterate a few of them to the screen so I can get an idea of what they will look like. I then added q-skeleton components that map to each of the pieces of content I will get back from the API call (i.e. poster, title, rating, and summary). For summary, you can see that I used multiple text skeletons to mimic a paragraph of text.
OK, so now we can start playing with layout, spacing, and proportions. I wrote the following SCSS.
Now I have something that looks like this!
Here, I can begin to see the shape of the content, how it will lay out on the page, how it will all be spaced. If I had my designer’s mock-up, I could easily compare the result and share it back to them for comment.
None of this is wasted work. I can wrap my skeleton in a div that I can use during loading. All the classes I created for layout I can apply to the content.
Let’s put it all together…
Here’s what the result looks like.
Conclusion
Starting with a skeleton is a great way to focus on the layout, sizing, positioning, and proportions of your site’s content. The result can then be reused for loading screens to increase user perceived loading times, and layout styles can be applied to live content.
For those not using Quasar for their development, there is a wonderful cross framework tool set called Skeleton Elements you should check out.