UI
Firefox and all Chromium browsers (Google Chrome, Edge, …) all have great tools to help you with that. First and foremost, both have a developer tools bar (activated by pressing either Ctrl+Shift+I, F12 or by going into the browser menu and under the section “More tools”) where you can highlight certain elements and further inspect them. You will see all the applied style rules on the right-hand side in the standard interface. This way you can check whether certain rules are active or not and where they come from.
Furthermore, these developer tools include a device toolbar or responsive design mode, activated by either clicking the small phone and tablet icon on the developer toolbar or by pressing Ctrl+Shift+M. When activated, your actual browser window is sectioned off from the rest of the browser and can be either set to some of the preset phone display sizes, which include some of the latest phone models, or be resized manually in the responsive mode like any normal window. The benefit from doing resizing this way is that the toolbar shows you how big the “display” is regarding pixel size, which helps immensely with implementing rules for different screen sizes.
If you want to test the look and feel on an actual device, you can have some your personal mobile phones or tablets connect to them via the local network. I assume you are already running some kind of local web server like XAMPP. Then you can easily figure out your local IP with some simple commands for the command line tools/terminals (e.g. ipconfig on Windows, nettop on MacOS, ifconfig on Linux).
How can I easily test responsive web design?
I am currently developing a web page and want to test and debug the site for responsive web design. For example, on smaller displays, I want to display items that are usually displayed side by side on the page to instead be displayed beneath each other. Are there any other ways to achieve this other than simply resizing the browser window?
Use automated UI Test, which is possible with the Selenium library and a browser driver. The browser driver allows us to run actions in a browser while writing code. The Selenium library is an interface to connect many browsers with the same code base. So now we are able to code a simple test, where a robot is automatically clicking through the website and trying out the login functionality. This technique may also apply to test other important and high priority UI features.
Test login functionality after every code change.
Testing the very common functionality of "login"/"sing in" might be exhausting if we have to test it after every change in the project. Entering the credentials every time, or even if they are stored in the browser, one has to click through it. There must be some better way...
Improve the accessibility of web application
One of the important accessibility requirements is that all the elements of user interface must be available from a keyboard (input fields, buttons, etc.) This requirement is intended to users with motor disorders (who can‘t use the mouse, for example). Also it is important when using screen reader for people with impaired vision.
Taggings:
PrimeFaces showcase
on this site you can find the whole documentation and examples of all UI components available in PrimeFaces and how to use them.
http://www.primefaces.org/showcase/ui/input/manyCheckbox.xhtml
Taggings:
PrimeFaces UI compontents
I need some examples of standard UI components in primefaces.
How to use them? Which attributes do they allow?
Taggings:
