Tag Archives: UI

Working with Responsive Design Projects

Working as a software architect in projects where visual appearance, user interfaces and large scale of device support is as important as the right data and the functioning is very different than being just a back-end developer in a project where the UI just need to work with couple of different devices. It requires a lot more consideration of different kind of needs and point of views. It often requires some understanding and co-operation of:


CSV Table Block Concept for Episerver

This is an option to avoid usage tables in WYSIWYG HTML editor. Tables in any rich text editor have always be problematic for responsive design, but data often exists in table format (example in Excel) so the usage of table tools is inevitable.

We are using CSV (comma separated values) as description of table because almost all systems and software (example Excel) can produce CSV data. Also because CSV is readable and editable for much larger group of people than example XML or JSON. PropertyList would be one good option to improve the editor’s experience but in this case the data came mostly from external sources. So the import feature was much more important.

CSV Table Block Example

(unfortunately, screenshots and URL examples are only in Finnish)

You can find live example of table block in Evira’s web page.

csv table block


EPiServer Content Area Renderer With Row Support

EPiServer Display options is a really nice feature but it’s lacking a row rendering option for Bootstrap Grid system.


Without row-elements your grid will got broken quite easily and you need to create “dirty CSS hacks” to fix it.


To create rich content with various types of blocks and content sizes you need to separate the rows with <div class=”row”> -element.


Luckily EPiServer is so extendable that you can add the feature quite easily in your own project. So after adding the following codes you are able to get these rows and your HMTL is properly formatted for Bootstrap grid or some other grid system.



Adding rows in content area renderer is actually pretty simple job. You can make it much more fail safe and improved but this is the simple version.

    public class ContentAreaRendererWithRows : ContentAreaRenderer
	    // Wraps every 12 cells with row divs if the tags are used.
        protected override void RenderContentAreaItems(HtmlHelper htmlHelper, IEnumerable contentAreaItems)
            var items = contentAreaItems.ToArray();
            int rowWidthState = 0;
            var itemInfos = items.Select(item =>
                var tag = GetContentAreaItemTemplateTag(htmlHelper, item);
                var columnWidth = GetColumnWidth(tag);
                rowWidthState += columnWidth;
                return new
                    ContentAreaItem = item,
                    Tag = tag,
                    ColumnWidth = columnWidth,
                    RowWidthState = rowWidthState,
                    RowNumber = rowWidthState % 12 == 0 ? rowWidthState/12 - 1 : rowWidthState / 12,
            //if tags exists wrap items with row or not then use the deafault rendering.
            bool tagExists = itemInfos.Any(ii => !string.IsNullOrEmpty(ii.Tag));
                base.RenderContentAreaItems(htmlHelper, items);

            var rows = itemInfos.GroupBy(a => a.RowNumber, a => a.ContentAreaItem);
            foreach (var row in rows)
                htmlHelper.ViewContext.Writer.Write("<div class=\"row row"+row.Key+"\">");
                base.RenderContentAreaItems(htmlHelper, row);
        public static int GetColumnWidth(string tag)
            switch (tag)
                case Settings.ContentAreaTags.FullWidth:
                    return 12;
                case Settings.ContentAreaTags.TwoThirdsWidth:
                    return 8;
                case Settings.ContentAreaTags.HalfWidth:
                    return 6;
                case Settings.ContentAreaTags.OneThirdWidth:
                    return 4;
                    return 12;

        protected override string GetContentAreaItemCssClass(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem)
            var tag = GetContentAreaItemTemplateTag(htmlHelper, contentAreaItem);
            return string.Format("block {0} {1}", GetTypeSpecificCssClasses(contentAreaItem, ContentRepository), tag);

        private static string GetTypeSpecificCssClasses(ContentAreaItem contentAreaItem, IContentRepository contentRepository)
            var content = contentAreaItem.GetContent(contentRepository);
            var cssClass = content == null ? String.Empty : content.GetOriginalType().Name.ToLowerInvariant();
            return cssClass;


    public class StructureMapConfig
        public static void ConfigureContainer(IContainer container)
            container.Configure(x =>


    public static class Settings
        public static class ContentAreaTags
            public const string FullWidth = "col-sm-12";
            public const string TwoThirdsWidth = "col-sm-8";
            public const string HalfWidth = "col-sm-6";
            public const string OneThirdWidth = "col-sm-4";


And Bob’s your uncle!!!

ContentReferenceList property in EPiServer CMS 8.6.0

EPiServer just released a excellent new property type ContentReferenceList or in code it’s written IList<ContentReference>.

In Edit view ContentReferenceList property makes it easy to drag & drop content and it clearly says which content types are allowed.


Selection view makes it easy to recognize which pages  are allowed.


And the code is the prettiest part of all

public class BlogPage : BaseContentPage
        Name = "Writers",
        GroupName = SystemTabNames.Content,
        Order = 150)]
    public virtual IList Writers { get; set; }



More info of the ContentReferenceListProperty and restricted content types.

With adaptive images mobile users load only 14% of desktop data

With adaptive image we were able to decrease amount of transferred data to 14% from desktop view. So mobile browsers even with low speed are able to have good browsing experience.

Size of all images without adaptivity in desktop view is 1,2MBytes.


images without adaptivity

Size of images with adaptivity in mobile view is 0,17MBytes.

images with adaptivity

images with adaptivity

So if you are making really visual (lots of images) website with responsive design you should really consider adaptive images. There’s no use of responsive design and mobile view if loading a mobile page takes forever.

This article was based on lemminkainen.fi site’s frontpage.


Useful Bookmarklets

Google search from current site

javascript:var q=prompt(%22Hakusana: %22,%22%22);if(q) document.location=%22http://www.google.fi/search?sitesearch=%22+location.host+%22&q=%22+q;

Make page editable

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Spotify stops playing after first song

It’s spotify’s new FEATURE.

WTF!  I thought my spotify client has some strange setting or a bug, but no.

Employee of Spotify answered:

Hi guys,

We have indeed changed how search results are played. As it was before many users would search for a specific song, listen to it, and then just leave their computer on streaming (without actually listening).

However, we are looking into how this has affected making a search into “Current Playlist”.

I’ll keep you updated,


Source: http://getsatisfaction.com/spotify/topics/playback_halting_after_every_song