Creating an Application Layout with CSS/HTML Provided by a Designer

I recently started working on an XPages application for which the UI had already been designed by a visual designer. In this post, I’ll cover the steps I took to implement the provided design within the application.

I must admit, it was a pleasant surprise to discover that sample pages had already been created to define the UI of the application; the visual designer sent me a list of HTML files, images, and style sheets. In my experience, this has not been the norm, so I took a few minutes to think through how to make the best use of those files as efficiently as possible.

I was involved in a project awhile back where a UI was mocked up and CSS was provided, but it was left to the developers to get the XPages application looking just right. It can be a challenge to try to make sense of the massive style sheets that are generated by some UI design tools (which seem to add many levels of div tags to get everything just so). Fortunately, in this case, I was given not only CSS but also sample pages.

In short, my goal was (a) to get the static page and styles working in an XPages application, (b) to modularize the layout, and (c) make it dynamic one piece at a time.

Here is the approach that I took:

A. Implement Static HTML in XPages

    1. Import CSS and images into the application
    2. Account for everything included in the <head> section; create a Theme that includes the CSS in the application (and set the application to use the theme)
    3. Copy the HTML from a static page into a custom control called ccLayout
    4. Create an XPage that contains ccLayout
    5. Clean up the HTML in ccLayout as needed (adding closing tags where missing, etc)
    6. Test the page and fix CSS references as needed (many image references are looking for subfolders, but those directory paths can be modified once image resources are in the app)

At this point the goal is to have the XPage looking exactly like the sample page. Once you’ve achieved that, you’re ready to modularize it.

B. Modularize the Layout

    1. Break up the static html into logical chunks and move the chunks to separate custom controls for each component of the layout. Some examples:
      1. Title bar
      2. Top navigation
      3. Search bar
      4. Side navigation
      5. Footer
    2. Replace those chunks of HTML with references to the layout component controls in the correct areas within the main layout control
    3. Move the main content HTML out to a separate control
    4. Put an Editable Area control in place of the main content area.
      1. The main content will change from page to page, so the editable area lets you keep the same general layout, but put different content in the layout on each page, all while reusing a single layout custom control
      2. If multiple areas of the layout change from page to page, then use more editable areas

Now, you have an application layout control and separate controls for components reused throughout the layout. You can now reuse the layout easily throughout the application.

Ultimately, this UI is not based on OneUI or Bootstrap or any other framework. It’s a fully-customized design. Some of the concepts that Paul Della-Nebbia and I covered at our MWLUG session and TLCC webinar on creating custom layouts are foundational to this approach of creating a custom application layout.

Here are the slide show and webinar recording if you’d like to take a look.

C. Make the Application Dynamic

  1. Go back through the layout controls and build in live links, etc as needed
  2. Build the content custom controls (forms, views, etc)

Now, for each form or view that you need to display, all you have to do is create an XPage, add the ccLayout control, and then drop in the form or view custom control into the editable area and you’ll have a consistent UI throughout the application.

It doesn’t seem very complicated looking back at the list of steps, but it was a good exercise to go through.

Feedback

I’m curious — have you ever been provided a working static UI for a web application? If so, how did you go about using it?

Advertisements

5 responses to “Creating an Application Layout with CSS/HTML Provided by a Designer”

  1. edm00se says :

    I did something similar just over a year ago. It’s paid off several times over, mostly with small projects, as my company has a consistent look and feel that it strives for and has been having me take on additional XPage’d projects on top of my normal workload on a major project. Time well spent.

    • Brad Balassaitis says :

      Great point — there is a lot of value in this approach if you have a UI that you’ll be reusing. Then you can reuse the components and spend much less time on the UI on subsequent apps.

  2. Ben Langhinrichs says :

    I found this very useful. Thanks for sharing the way this went, as I have wondered whether you could take an existing web design and use it for an XPages app.

  3. Eric Tomenga says :

    Twelve years ago I worked with a communications/PR person once who had background in HTML design. He provided me with HTML files and graphics. I embedded the styles in the forms as pass-thru HTML (no CSS). It made for a better looking web site but it made modularizing and dynamically loading content more difficult to develop.

    My PM just gave me Dreamweaver so now I expect to get more design inspiration from up above.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: