For seven years, our Silicon Designer product has expanded in use, across many countries, languages, and use cases. From B2B applications where franchises easily manage brand collateral, to some of the largest consumer-facing document personalization sites on the planet, our product has proven itself to be solid and reliable, yet also very extensible. It is integrated with numerous forms of shopping cart, DAM system, workflow system, and database, and it has diverse forms of User Interface:
no two Silicon Designers look the same!
Making it easy for our clients to customize their unique implementations has been our top priority. We have found that web standards, implemented correctly, make all the difference.
As more and more organizations implement web-to-print workflows that meet their ever-changing business demands, they often find that customization of their chosen solution is a must. Yet with HTML5 based solutions, this customization layer can be a significant challenge. This is due to the vastly different ways in which software vendors decide to combine the overlapping technologies.
Vanilla HTML by Design
For example: if an HTML5 web-to-print based document rendition engine is built entirely using the Canvas drawing API, even the simplest UI changes can be incredibly complex to implement. However, if that same document rendition engine is based on standard HTML/CSS, then customization can be as simple as a style override. Furthermore, using elements and styles in a defined standards-based fashion makes it even easier for development teams to approach, understand, and customize the product.
Silicon Designer was built from the ground up with customization in mind. As a result, our document rendition engine primarily uses only standard “vanilla” HTML elements and CSS for rendering. This core foundation sets the stage for easy customization, yet there is nuance to the specifics of our architecture that goes much further.
Sass Rules
Because everything from the layout of our controls to the layout of individual page items is controlled by CSS, our Sass theme can be fully extended to create nearly infinite variations in the document view. Everything from layout containers, to buttons, to page items can be impacted using a Sass theme and standard CSS. It is true that Sass has a learning curve for some designers, yet the way it lets designers efficiently manage the code, enabling effective re-use of styles and avoiding the error-prone process of manually updating redundant copies of the same thing in different places, proves to be well worth it.
Text is Text
Silicon Designer renders text using standard text elements, such as paragraphs and spans, while using CSS for formatting. This makes the text easy to select, edit, copy, paste and format. No complex rendering is needed inside as with Canvas. Using native elements also leads to the best possible display of the native font, with perfect clarity and no loss of quality. Silicon Designer also incorporates a one of a kind text engine to match the output of InDesign Server. No other HTML5 product can match InDesign’s text engine with such precision. This approach effectively eliminates inconsistencies between the HTML5 editing application and print-ready documents.
SVG On Display
Silicon Designer incorporates PDF and EPS files into its round-trip workflows. These vector based file formats are translated into SVG elements which are then displayed in the HTML5 editor. This means that the vector content will look amazing, while still offering full-featured editing capabilities. SVG again has the advantage over Canvas that you have true scalable objects at your disposal, which in Designer are precise parallels to their print-centric equivalents. As SVG gains popularity for web design elements, SVG elements can also play nicely as UX components.
jQuery Components Welcome
Do you have a library of jQuery components that powers an awesome UX? Well, so do we. There’s no need to sacrifice user experiences with Silicon Designer. We can integrate virtually any jQuery component into Silicon Designer, using Angular’s UI-event directive to facilitate event mediation. We’ve incorporated jQuery components (including font selection lists, buttons, color selectors and more) into our reference application. For a demo of how easy it is to add jQuery components to your application, please visit: http://www.screencast.com/t/spW1MXKliH1
Web Components Included
Do you want to take advantage of the coming web component revolution? Do you want the encapsulation that web components offer without fully committing to polyfills? With Silicon Designer, we have created a unique web component framework that allows you to start building future-proof components today. This framework includes a one-of-a-kind skinning model that maps the HTML elements in your template files to Javascript object attributes. This allows design and programming teams to run on parallel tracks of development. Design teams can build complex collection objects and item renderers using nothing more than static HTML and a data contract with their development counterparts. Silicon Publishing has been using this pattern for well over a year with unparalleled success, and our customers have been very receptive to the technology so far.
The Success of Web Standards
When we started this company 16 years ago, we were strong believers in a then-obscure technology called SVG. We believed in standards and knew they would win out some day. We actually thought it would happen a bit faster, but were still grateful when browsers across all devices started to attain a general (if still imperfect) adherence to standards. Yet the success of widespread support by browsers was but one step, we are thrilled to offer a tangible implementation of an extensible web application that uses standards the right way. Those who configure and extend Silicon Designer are enjoying standards applied to online design as never before.