Responsive
Learn more about the framework's Responsive approach ... or see more videos.
Everything is Responsive
In Silk UI everything is responsive - themes, layouts and patterns. But it is a different kind of responsive. Instead of using a client-side approach, where all content is always sent to the browser and it decides then, through CSS, what to show to the user, a server-side approach is used.
This server side approach is sometimes called RESS (Responsive through Server Side components). Learn more about the RESS approach through LukeW or Smashing Magazine.
By using a server-side approach, it means that content will not adapt as the browser is resized, however that is not the main use case for responsive. The main use case is when a specific device accesses the application and require an adapted version of the page to improve fit and performance.
Server-Side Responsive
The server-side responsive approach has several advantages over the client-side:
  • only the required content is sent to the browser, because the server is aware of the device in use;
  • there are no CSS media-queries, which makes the responsive easier to understand and handle;
  • the device context is present on the server, which means different strategies can be used to handle devices.
How It Works
Silk UI uses a responsive server-side approach, which means it does not rely on CSS to handle the page rendering for devices. So, no media queries will be found in our CSS.
And that’s good, in our perspective. Media queries are difficult to read, hard to maintain and easy to break.
 
@media screen
    and (max-width: 700px)
    and (min-width: 340px)
    and (device-pixel-ratio: 2) {
    ...
}
How does it work then?
There’s a snippet of javascript that runs on the first page load, that finds out through user agent, viewport width or other, what the device is - desktop, tablet or smartphone. A cookie is set for future visits and this device context is sent to the server and placed in session. From this point on, the applications have full device context for its runtime. In future visits, the cookie is sent immediately on the first request and the content is already adapted.
The page rendering is directed for the device by the injection of a specific class in the page - more details on this below.
You can see the detected device by turning on the Development Mode - see instructions below.
The responsive behaviour is achieved for the content by using a set of patterns / web blocks. There’s a set of patterns which facilitate the responsive behaviour development:
  • Columns;
  • Responsive Patterns.
Columns responsive behaviour
A set of structure patterns are provided with the platform which allow to divide content through columns which follow the underlying grid. These patterns are web blocks with specific responsive parameters, which allow the developer to CONFIGURE how they should react in each device. Possible values for tablet and smartphone context are:
  • Break All (all columns break, which means each column will occupy the total width of the layout);
  • Break First (only the first column breaks, which means the first column will occupy the total width and the other will remain side by side);
  • Break Middle;
  • Break Last; 
  • Don’t Break.
With Silk UI, you can still use the platform grid to organize content, but it has no responsive behaviour. Instead, use the Columns patterns where the responsive can be configured and more easily understood.
Responsive Patterns
A set of responsive patterns is provided that allows to define exactly what is sent to the browser, depending on a developer configuration.
  • DisplayOnDevice (show only in specific device);
  • LoadOnVisible (by default, content is not sent to browser, but it is loaded as user scrolls);
  • ResponsiveImages (depending on device, it sends only the specific image);
  • ToggleOnDevice (only loads a trigger, which on user action loads content through AJAX).
Device Simulation
In non-productive environments, the device simulation handler will appear automatically on window resize. This is meant to help developers testing the application's responsive behaviour.
When the Device Simulation is turned on, the device guidelines will appear and a page reload will be triggered for each resize, to get the adapted page contents in that device context.
Note that the responsive setting is shared between applications by cookie of the domain.
Specific device previews can be triggered from the handler to view the application in a device frame.
You are able to activate device simulation on production environments by setting the ForceSimulationDevice site property to True in the SilkUIFramework module.
VISIT OUR FORUM
POST FEEDBACK
REPORT ISSUE
Silk UI Framework Simulation Device
Resize the window to preview the page in target devices.
Open the settings to change the simulation device options.
Click here to see your activities