Resonsive Web Design
Responsive web design is a technique used to build websites and website components (like a web form, navigation menu or button) that are easily view-able and usable, independent of screen size or device. Using a fluid layout — relative widths— and media queries, responsive page elements respond to the screen size by shifting, scaling and swapping, making sure the design looks and works perfect every time.
Button Builder uses a fluid layout structure and has a unique duo of sliders that help you build responsive buttons. These sliders are essential for making your button responsive. You see, responsive design is not having 3 variations — one for mobile, one for tablet, and one for desktop — of a website or a website component. Simply because there is no specific mobile or tablet screen size. Depending on the brand and version, there's a wide spectrum of sizes for each device type. Responsive design means that your site, content and components look good and are usable at every display or device width.
Max-width explained: The widely supported max-width CSS property prevents an element (the menu in this case) to become larger, or take up more room, than the specified size. This makes designing and embedding a menu in both responsive and non-responsive sites easier. If you’re embedding the menu in a relatively sized container in your responsive site, you might want to turn this setting off before exporting.
The sliders, we named them Sizer and Breaker, work closely together in guaranteeing maximum usability at every pixel of the way. Sizer helps you vary the width of the display area, so you can see what your button looks like across the entire range of devices. As soon as design or usability issues come up, you can use Breaker to tweak or even radically change your button design and layout. For example, your button text does not fit on the button at a smaller screen size. Then simply change the button width or font size for that width range. Yep, the unparalleled Breaker gives you the ability to change the layout and design of your button at any width of your choice.
Breaker uses media queries to perform his magic, allowing for a new set of styles to be used wherever Breaker puts a point. You can add points by:
- Clicking anywhere on Breaker
- Clicking on the plus button, a new point will be added at the position Sizer is at.
You can also grab these points with your mouse and drag them to a different position. Dragging them off the slider bar will delete the (break)point.
The points at which different styles are applied are often called ‘Breakpoints’. If the buttons become too small or huddle close together to be easily clicked, a breakpoint can be used to change the style and repair the anomaly. Increase: font size, line-height, adjust margins, or even contrast to battle glare, everything is possible at a breakpoint.
