Anima have built two super-useful Sketch Plugins. Auto Layout helps designers create responsive layouts in Sketch, and Launchpad exports the responsive design as a near-finished HTML/CSS website with decent code quality. TL;DR — watch the video...
"Wait…another site builder? Really?"
Well, Launchpad is more of an HTML/CSS exporter with some impressive features. It's not your typical WYSIWYG editor, since you're actually doing the design work in Sketch, a top-notch user interface design tool. You still need a developer who can take the 4-star code output and turn it into a 5-star website, but it will nonetheless save you huge amounts of time. Here's what Launchpad can actually do:
- Responsive design (if combined with Auto Layout)
- Videos, links and forms
- Font-family fallbacks
- Publishing, hosting and domains
- SEO (title, meta description, etc)
- Social media meta tags (Open Graph, etc)
- Version control
- Google Analytics (or similar) integration
- Keyboard-centric workflow (very Sketch-like!)
Here's what you need to do manually, with code, afterward:
- Insert custom meta tags, if any
- Insert any Schema markup, if needed
- Refine the adaptive/responsive qualities, if required
- Code any JavaScript needed
- Code any backend functionality
- Minification and other web perf tricks
Launchpad offers you the tools to build a static website, a foundation that you can build upon. It'll save you countless hours of your valuable time, but it won't take you to the finish line. This is a good thing because little code optimisations have a big impact on SEO and conversions, so these are the things you'll want to do manually.
Let's learn how to use it!
Make sure you've downloaded Launchpad first. Don't worry about Auto Layout, because it's automatically bundled into Launchpad now. We have Lots to cover, but I'll keep it brief!
Responsive Design with Sketch and Auto Layout
First, let's float a Group of layers/objects to the top-right corner of the parent container (which in this case is the Artboard itself). Open the "Pin" dropdown in the Auto Layout tab in the Inspector, and check both the top and right checkboxes (or click on the dots on the visual representation).
Also, ensure that the offset (from the Artboard) is "17px" on both sides (top and right), and hit the "W" checkbox to declare the Group as having a fixed-width (otherwise, when the container/Artboard is resized, the responsive object will be squashed up as if declared as being a % of the container).
For the HTML/CSS developer guys out there, "pinning" can mimic floated elements (float:left
or float:right
) or positioned elements (position:fixed
or position:absolute
) combined with top:
right:
bottom:
or left:
.
Here's how it looks when resized (notice how the other elements are getting squashed up, but our pinned elements are remaining fixed to the top-right corner of the Artboard):
What else can Auto Layout do?
Pinning is the tip of the iceberg. Auto Layout also helps you:
- Align objects vertically/horizontally
- Declare an objects' width (and min/max-width) in % or px
- Define an offset in % or px
- Rapidly switch between "Portrait" and "Landscape" for testing
- Switch to another Artboard Preset for testing in other devices
- Navigate using a visual diagram or traditional checkbox UI
- Create "Stacks", the Sketch equivalent of flexbox
As mentioned above, these layout options translate to CSS when exported with Launchpad (yes, even the flexbox/Stack settings). Have a play around with it. It's super-straightforward, so you won't have any trouble learning how to align objects or switch between the different device Artboards and orientations.
Links
Each Artboard is basically a webpage, so linking up screens is easy.
Let's set the homepage first.
Set Homepage
Just underneath the Launchpad heading in the Inspector, click the … icon and select the "Set as Home" option. Pretty simple stuff so far—we'll work up to the complex stuff.
Create Link
Now select a layer on the canvas (which is to be a link to another Artboard/webpage), and click the Create Link icon (which resembles two Artboards that are linked by a line).
Next, click on the desired destination Artboard to establish the link (you may have to zoom out if the Artboard isn't visible, like in the screenshot below). Alternatively, you can choose the "EXTERNAL LINK" or "SET AS HOME" options, which link to external websites and whatever the homepage Artboard is, respectively.
Videos
Video has various uses, but since they're not something we'd typically include on all websites (because they do take a while to load), it's easy to forget their HTML markup.
Besides, some videos use the <video>
tag, whereas others, like YouTube videos, are embeddable using an <iframe>
. Depending on where you're embedding the video from, there are additional options like "Auto Play", "Loop", "No Controls" and "Cover". YouTube videos are quite restrictive, so Loop is the only customisable option; however, if you used a service like Giphy, you could convert and embed YouTube videos (or upload your own) as GIFs and HTML5 videos, depending on the sort of functionality you need to offer (HTML5 video, for example, would be embeddable as a background).
Embed videos by select on a shape on the canvas, then by clicking on the box icon in the Inspector, choosing "Video Player", then pasting the video URL into the field.
Forms
Forms are broken down into two sections: the various input fields and the submit buttons. We'll start with input fields.
Hit the box icon once more, then "Forms", then "Text Input".
Done, simple! When converted to a static website, this element will be an input field (<input type="text" value="value">
).
Next, submit buttons—repeat the steps, but select "Submit Button" this time. Now it's important to bare in mind that Launchpad does not create dynamic websites (as mentioned earlier), so JavaScript functionality is disabled. Form functionality is catered towards contact forms, hence the first customisable option is "Email to"—this is where the form data (as specified in the text layer/input field) will be sent to.
You can also specify two Artboards where the user may be sent to upon making a mistake in the form, or successfully completing it. Naturally, you'll be responsible for coding up the form validation after Launchpad has exported the website; as discussed, Launchpad delivers the barebones HTML/CSS, so it's up to you (or a developer) to take this to the finish line.
Hover Effects
… icon → "Hover Effects".
So this feature is pretty much about CSS transitions. What I like about this feature is that there are a range of transitions that you can click-and-apply (move left, move right, …, rotate, grow, shrink, shadow, …), and the code output will automatically display in the edit-field for you to customise to your liking.
For basic transitions like background-color
animations, you can write your own CSS in this field. Either way, you'll end this step by choosing the easing animation (ease-in-out, ease-in, ease-out, ease and linear) and animation duration.
Fixed Positioning
… icon → "Fixed Position" does exactly what you'd assume it does. It defines fixed components (position:fixed
in CSS) such as fixed headers, fixed footers, scroll-to-top buttons, live chat widgets, and other types of always-visible elements.
Widgets
Widgets are where things become a little more interesting (… icon → "Widgets"). Straight away you'll notice that the following widgets are available to embed into your site:
- Crisp.im (live chat)
- Usersnap (collect user feedback)
- Juicer.io (social media feeds)
- Gumroad (embeddable buy buttons)
- HubSpot (inbound marketing)
- Marketo (marketing automation)
- Mailchimp (for collecting subscribers)
- Google Analytics (website analytics)
- Google Maps (embeddable maps)
- Statcounter (alternative to Google Analytics)
- Pinterest (embed Pinboards)
- Open Table (table reservation widget)
- Zendesk (customer support)
- More coming soon!
Continue reading %How to Publish Responsive Websites with Sketch and Launchpad%