Design View Overhaul and Working Modes in Wappler 5
Welcoming the new addition of different features
Just before we hit the release of Wappler 5, we want to highlight some of the new features of Wappler, which include newly updated working modes, as well as a completely overhauled design view.
Design view
We have recently completely re-worked the design view in Wappler. The design view action buttons and selectors have been restyled and made more clear to use.
Adding elements on the page has also been greatly improved. Now when you click on the add before/after icons, you will be presented with a quick add menu containing the most suitable elements for this location, so you can quickly add related elements and build your layout really fast.
We have also restyled our property inspectors, now offering visual color pickers for Bootstrap that fully reflect the current design theme used. The Dynamic Attributes and Dynamic Events are now easier to select and add, using a dropdown menu instead of a modal dialog.
Lastly, we have improved the placement of components on your pages and their related assets and script includes. The missing component includes and dependent frameworks are added automatically on your main layout page when working on a content page.
Working Modes
Wappler includes several different working modes — Components Edit, Text Edit, Inspect, Accessibility and Preview. Each mode has its own properties and usage, to bring editing your page to the next level. In this article we will briefly explain how the different modes work and what you can do when switching to each of them.
Component Edit Mode
With Component Edit Mode, you are able to add several different components on the page by using the add components button. These buttons are located before and after the selected element on your page. Once you select one of these buttons you will see a new pop-up window that contains components you can easily select from and place them on your page, as well as adjusting its properties:
Text Edit Mode
With Text Edit Mode, you can change and edit any text on the page with just a single click. This mode also instantly gives you the option to add and apply styling to your text.
Inspect Mode
The Inspect Mode provides useful information about the styles of an element such as size, margin and padding. You can also measure distances, relative to the selected element:
Accessibility mode
In accessibility mode you can check the accessibility attributes and compliance status of an element. Along with the foreground and background color, you can see the contrast ratio and the WCAG Compliance status:
In this working mode, you receive multiple points of information, one of which includes the WCAG Compliance rating.
When it comes to accessibility compliance, the Web Content Accessibility Guidelines (WCAG) AA is the most widely used standard in the world. There are three levels of WCAG compliance; A, AA and AAA. While this distinction is important, it can be confusing.
Each stage contains guidelines that must be met in order for your website to be accessible to all users. The distinction between conformance levels provides developers with an organized structure for minimal, acceptable, and optimal accessibility.
WCAG Level A: Minimal compliance
These conformance requirements essentially prohibit elements that would make the website inaccessible. Websites that do not at least meet WCAG 2.0 A are impossible or exceedingly difficult for people with disabilities to use.
Some notable WCAG 2.0 Level A requirements include:
- No keyboard traps
- Navigable with a keyboard
- Non-text content alternatives
- Video captions
- Meaning is not conveyed through shape, size, color etc. alone
WCAG Level AA: Acceptable compliance
This conformance level is used in most accessibility rules and regulations around the world, including the ADA. To meet WCAG Level AA conformance, the website is usable and understandable for the majority of people with or without disabilities. The meaning conveyed and the functionality available is the same.
Some notable WCAG 2.0 Level AA requirements include:
- Color contrast is, in most instances, at least 4.5:1
- Alt text or a similar solution is used for images that convey meaning
- Navigation elements are consistent throughout the site
- Form fields have accurate labels
- Status updates can be conveyed through a screen reader
- Headings are used in logical order
WCAG Level AAA: Optimal compliance
Compliance at this level makes your site accessible to the maximum number of users, and makes this experience easy. While this level of conformance would be ideal to make the web experience truly equal for all users, W3 explains:
“It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.” — W3
If your website or application caters to the elderly or people with disabilities, WCAG Level AAA compliance can help to ensure that your audience can use your site easily.
Some notable WCAG 2.0 AAA requirements include:
- Sign language interpretation for audio or video content
- Color contrast is at least 7:1 in most instances
- Timing is not an essential part of any activity
- Context-sensitive help is available
source: www.w3.org
Not using Wappler yet?
Download Wappler, and don’t forget to join our community forum! Share your experience, get help, showcase your work or just have nice chat with others.
