Designing a Banner for Content Preview Mode with Next.js and Contentful
Hello!
I am a web engineer at cLabs, and one of the things I’m working on is adding Content Preview Mode so that users who edit content on our website using Contentful can preview their content on a live site with the new content they want to add.
There were a few great documentations for this, like here, which were very easy to follow: https://nextjs.org/docs/advanced-features/preview-mode.
The step that I wanted to talk about was designing something that would indicate to the user that they are in preview mode.
As a first pass, I was thinking about requirements:
- The banner should be noticeable, but not block any content.
- The banner should be functional. (check!)
- The banner should evoke some joy. (why not?)
As a first pass, I made something like this, as a banner that uses position:fixed to create something that would stick to the bottom of the screen.
I decided to choose yellow, because it reminded me of highlighter colors and would be easy to notice.
However, it was blocking content, and was not the best looking banner.
So, for the next iteration, I was thinking maybe we could change the banner size to make it a little more pleasing to the eye, and move the button around as well. We had some pre-existing styles for buttons, but nothing has to be set in stone. ;)
Huh! So in this iteration, I decided to make the width of the banner smaller, at this point it is less of a banner and more of a post-it note, but I think I like this a lot more than the stretched out version. I think that the padding also makes the “Post-it” look more pleasing to the eye. Last thing, I think the button could use some work.
I decided to shorten the copy to make it “Exit Preview”, and I think it looks a lot better.
Some other thoughts I have: I think the button could be edited to be a different style, maybe some more padding, but it also looks okay just as is.
The final product as of now!
So now, when users, like our Content team, edits copy in Contentful, they can click a link and it will show them a version of our website with this banner, and their new content!
That’s all for now, if you like reading about this content, please let me know!
❤ Miche
