Manual event website design

Create a stunning website for your visitors!

A professional website leads to enthusiastic visitors and more registrations. Momice software enables you to create next level event websites, created and designed by YOU - without any technical knowledge. All Momice websites are fully responsive, so they look great on every device. This manual helps you to use the full potential of the Website Module.

 

 

7 Basic templates

Choose from 7 design templates as a basis for your website. Adjust colors, fonts and images to match your own style.

 

Event website template Essential

Template Essential

Event website template Eclectic

Template Eclectic

 

Event website template Corporate

Template Corporate

Event website template Festive

Template Festive

 

Event website template Arctic

Template Arctic

Event website template Graphic

Template Graphic

 

Event website template Rustic

Template Rustic

 

Saving your template

If you are happy with your design, you can save your template use again next time. In Step 5 of the Website Module, choose ‘Save template for future use’ and name your template. Next time, you can find it in Step 2 (Saved templates). 

 

Account templates

It is possible to prepare one or more templates on account level, so all users within your organisation can choose from the same templates. If you want us to set this up for you, please contact support@momice.com.

 

Dropdown types of templates

 

Style

Create a unique style for your event by making clever use of colors.

 

Colors

You can use colors to create consistency throughout your website - and create your own style. Align the primary and secondary colors of your website with the (house) style colors of your company - or compose a unique color pallet for this event. While designing your website, you come across the color picker in various places. You can use it to pick the color of your preference and adjust the opacity.

 

You can choose from standard colors, or add a custom color, by selecting one from the grid. You can also add an RGB or HEX code. The colors you pick will be saved, so you can easily select them next time. You can alter the opacity with the slider below the colors.

 

Colorpicker

 

Button 1

You can use this button to navigate within the website. Use the primary color for this button.

 

Button 2

These buttons are used for things that you want to put a little less emphasis on, eg. ‘Cancel’ in the registration process. Use your secondary color for this button.

 

Action button (call-to-action)

For this button, choose a color that stands out. It is used for a call to action - like ‘Register’.

 

Buttons in the header of the event website

You can find buttons 1

and 3 back in the header

Pick a less striking color for cancel button

Select a less striking

color for button 2

Page background

This is the background color of each page.

 

Line

All horizontal lines on the website will have this color.

 

Color field background

This color is used for the background of the text fields throughout the website, like in the survey page or program elements.

 

Text

This is your default text color. You can adjust the text color on each individual page, from the text editor.

 

Fonts

Choose your fonts: one for titles - and one for your body text.

 

We’ve selected the most used web safe fonts for you. These fonts are supported by all browsers, so you can be sure your content is displayed correctly.

 

Many organisations picked a web safe font for their house-style. In this case, you can use it for your website. Of course you can also pick one of the more popular Google web fonts, exclusively for this event.

 

 

Overview of the available fonts
Available Serif fonts

Serif

Choose from Times New Roman, Bitter, Arvo, Georgia, Alegreya, PT Serif and Playfair Display.

 

 

Available Sans fonts

Sans serif

Choose from the fonts Verdana, Arial, Lucida Sans, Helvetica, Trebuchet MS, Source Sans Pro, PT Sans, Lato, Merriweather Sans, Alegreya Sans, Montserrat and Roboto.

 


Icons

Choose from 3 different icon styles for your menus.

 


Style 1

Icon style 1


Style 2

Icon style 2


Style 3

Icon style 3

 

Does your organisation have a custom icon set? We can upload it to your account. Send an email to support@momice.com

 

 


Colors

Top bar color

This is the color of the top bar - this bar is always visible on all pages. Keep this in mind when choosing your images and other website colors.

 

Color text & icons

Pick the color you wish to use for all menu texts and corresponding icons.

 

Color line below top bar

If your top bar is the same color as your website background, it is wise to choose a different line color. This way, your visitor sees the difference between the bar and the rest of the page, when scrolling down. In case your top bar has a deviant color, using the same line color is advised.

  

Top bar and background color are the same. Pick a different line color.

 

Top bar and page color are different

Top bar and background color are different. Use the same line color.

 

Mobile

Website icon

Upload the icon you want to display as an app icon on the homescreen of your visitor and in the browser tab on desktop (favicon).

 

Dimensions: 128 x 128 pixels, max. 3MB, JPG or PNG.

Upload your event website as an app icon on your phone

 

Mobile menu

Your website is automatically translated to a mobile representation. You can choose the standard menu (Vertical slider) or select a custom menu. 

 

Standard menu with a slider

Standard menu

(Slider)

Custom menu grid with icons

Custom menu Grid

(Icons)

Custom menu list with text

Custom menu List

(Text)

 

When using adjusted menus you can choose for icons or text:

 

    • 1 icon per row
      All buttons are displayed one above another. This style is appropriate when the website contains a small number of pages.

    • 2 icons per row
      2 Buttons are displayed on each row. The buttons are smaller than in the first option - making it more appropriate when the website contains more pages.

    • 3 icons per row
      3 Buttons are displayed on each row. The buttons are smaller than in option 2 - making it most appropriate for websites with many pages.

    • Horizontal text menu
      In this option, the pages are displayed in text. If you wish to use icons, they are placed next to the text.

 

Tip: use the Grid or List menu as an event app 

In the run-up to your event, use the (standard) slider menu in order to display a lot of content. On the day before the event, switch to the Grid or List representation to offer a quick navigation to your visitors, like an event app. Don’t forget to style both menus! You can prepare this early on in the process and then save the template. Now you can switch any time you want! Read more about templates.

 


Styling mobile menu

You can adjust the following elements in each menu: 

 

1. Background custom menu

Design your own background: choose an image or a color.

 

Background image

If you want to display an image in the background, the image needs to meet certain requirements: 

 

Minimum width: 375px.

Minimum height: 667px.

 

If you want to change the size of the image, it is advised to keep the original proportions.

 

Please note: different ‘rules’ apply for mobile representation. In some cases, the image is cropped - meaning only a part of the image is displayed on the screen. Therefore, make sure that the most important elements of your image are placed in the center - so they will remain visible. Read more about the mobile specifications.

 

Color & gradient

If you prefer not to have a background image, you can choose any color as a background for your website. This can be a plain color or a gradient - and you can adjust the transparency of the color using the slider button.

 

Color filter

In case you do have a background image, you can place a color filter (with or without gradient) over the image, in order to increase readability and/or create consistency in your images.

 

2. Logo or image

Upload your organisation or event logo. Preferably use a .PNG file with transparent background, in order to avoid a white square around your logo.

 

Tip: integrate your text in an image

If you want to assimilate the name (and date) of the event into your background image, create an separate image ( .PNG with transparent background) and place it over background image. This way, you make sure all information is displayed correctly.

 

3. Positioning mobile menu

You can determine the positioning of your mobile menu:

 

    • Position 1 (no logo)
      The menu is placed at the top of the page, leaving no space for a logo.

    • Position 2
      Small logo representation: taking up about 20% of the screen. The menu appears below the logo.

    • Position 3
      Medium logo representation: taking up about 35% of the screen. The menu appears below the logo.

    • Position 4
      Large logo representation: taking up about 50% of the screen. The menu appears below the logo.

    • Display logo full size
      Full size logo representation. Choose this option if you want to make sure the image and content are displayed clearly.

 

 

menu position 1 without a logo
menu position 2
menu position 3
menu position 4
menu position 5

 

4. Icons

You can choose to display icons in all menu styles. In the horizontal option they are placed left from the text. In all other options, the icons are displayed right above the page name. You can pick your own icon color.

 

5. Line

A line is placed between all icons - the color can be adjusted. If you prefer a design with no line, you can simply adjust the transparency.

 

6. Text

This is the color of the icon font.

 

7. Background color menu blocks

Choose the background color of the menu blocks to your style. In order to show the website background through the menu, adjust the transparency with the slider.

 

8. Language button

If you chose to publish your website in multiple languages, a dropdown button for language selection will appear in the right top corner of your website. You can adjust the color of the button to match your style.

 

 

Widgets

Compose your homepage with handy widgets. Each widget can be styled individually.

 

A widget is a content block that can be easily placed on your website. In Momice, you can use widgets to build up your homepage. You can find them in Step 3 of the Website module, under Home.

 

Style each widget individually


Header widget

The header widget is often used to display the most important (hero) image of the event.

 

When to use the header widget or image widget?

Images can be placed in both the header widget and the image widget. When your image contains text, it is advised to use the header image: it is scaled according to the screen dimensions on mobile devices. The images used in the header widget, are in some cases cropped for mobile representation. In this case, you run the risk that the text will not be fully visible.


Content

Here, you can choose to display text (title + subtitle) or an (image or logo). If you are using text, you can adjust the font color for the title and subtitle. (You can change the font style in Step 2).


If you want to place a logo or image, this image is placed ‘on top of’ the background. Maximum width is 992px, the height is flexible.


Background

You can design the background according to your own style. Pick a background color (with or without gradient) or image. You can also add a color filter to your background image.

 

Please note: if your background image contains text, make sure it is placed within the ‘Safe area mobile’. All elements outside this area will be cropped when the website is displayed on mobile devices.


 

Header widget on mobile

Header widget

Header widget on desktop
Image widget on mobile

Image widget

Image widget on desktop

 

Button

The header is an excellent place to stimulate your visitor to register or buy a ticket. Add a button and change the button size and text here. The layout and colors can be adjusted in Step 2.

 

Smart combinations

It is possible to combine multiple images in your header. For example a background image and a logo. You can even combine 3 elements: background image, logo and text. In this case, create an image (.PNG) containing the text and logo and place it on any background image. Or create a .PNG that combines the logo and background image, and place a title and subtitle.

 

Safe area mobile

The Safe area mobile is the part of the screen that will always be displayed on mobile devices. When you place an image within this area, your image will not be cropped.

 


Image widget

The image widget enables you to place an image anywhere on your homepage. The image is adjusted to the screen size of the device. The images are not cropped, making this widget more appropriate for images that include texts (event name, location, date etc.). You can choose to display the image full screen or column wide.

 

Tip 1: Add a color filter to all images on the website to create consistency.


Tip 2: Add a graphic element to the image widget and use it as a divider between other blocks.

 

Example of page-wide

Full screen

 

Tip: Add a color filter

Adding the same color filter to all images throughout your website creates consistency and a clear and quiet look for your visitor.

 

Tip: Use a graphic element as a divider

Add a graphic element to your image widget and place it in between the other content block, so that it becomes a custom divider.

 


Page widgets 

Once you have created your detail pages, you can display the most important content in a widget. When a page contains multiple elements, you can select the appropriate information in the content menu. Each page widget can be styled individually.

 

 

Text widget

The text widget can be used for short text paragraphs on the homepage. You can edit the text, choose a background color and/or image and place a button in case needed.

 


Horizontal line

You can place a line before or after each content block. Match the color and line width to your style.

 


Button widget

Encourage your visitors to register for the event or buy a ticket, by using the widget button. Choose your button style and name - and link it to one of your website pages.

 


QR-code

Momice automatically creates a unique QR-code for each event. Place a code on your homepage, using QR-code widget, to let your visitors open the website on their smartphone or tablet.

 


Countdown clock

The countdown clock shows exactly how much time is left until the event starts. The clock automatically starts counting down once you’ve entered the start and end date of the event. Match the background color and font to your unique style.

 

 

Mobile widget representation

When your website is displayed on a mobile device, other dimensions apply. Keep them in mind while designing your website - and always double check the representation.

 

Title & subtitle

If your title text does not fit the dimensions, the long words will ‘fall off’ the screen. All words separated by a space will be displayed one above another.

 

Image & logo

These images are scaled according to the screen size. The text on your image will therefore always be visible and the original dimensions apply.

Tip: check the readability

Because these images are scaled according to the screen size, the full image is always displayed. Texts can become too small to read - make sure you always double check on a mobile device.

 

Header with logo on mobile devices
Header scaled according to the screen size

 

Background

The minimum height for background images is 480px, minimum width is 1920px. As images are cropped on mobile devices, make sure the important elements are placed within the ‘Safe area mobile’.

 

Make sure the elements are place in safe area mobile

Safe area mobile

Background header displayed correct

Mobile representation

Incorrect display of background header

Incorrect representation

 

Please note: If you increase the image height, it influences the background image (in the header widget). The background image will be ‘zoomed in’, making it blurry. In order to keep the image sharp, make sure the minimum height of your background has sufficient resolution. 

 

Keep the image sharp by using the correct sizes
Blurry background image

The image on the right is blurry because of the incorrect size.

 

Tip: use the image widget
For images containing a lot of text (event name, location, date etc.), the ‘image widget’ is be more appropriate than the header widget. In the image widget, images are scaled, not cropped.

 



Background website

Add an image and/or background color (including gradient) to your widgets.

Image

The background image is scaled according to the size of the screen. Images should be minimum 1920px wide and 200 to 600px high.

 

Background image

Color & gradient

You can choose to use a color instead of an image. This can be any color, with or without gradient.

 

color 1
1 color with 50% gradient
Use gradient
gradient on 50%

Color filter

If you choose to use an image, you can place a color filter over the image (including gradient).

 

place a color filter over the image 10%
place a color filter over the image 50%
place a gradient over the image 10%
place a color filter over the image 50%

 

Patterns

You can choose to use a pattern as a background. Also in this case, you can experiment with colors and gradients.

 

Green pattern with white dots
blue pattern with blue stripes
grey and black pattern


Tips for images

Images are a crucial element for the look and feel of your website, so select them carefully! The following tips can help you:

 

  • Choose a neutral atmospheric background image.
  • Select a text color that stands out from the background image.
  • Place a color filter or gradient over the background image in order to improve readability.


Text editor

Determine the style of your text with the text editor.

 

Choose from 6 different styles:

 

H1: bold, largest font size. Text is always centered.

H2: bold, second largest font size.

H3: regular, larger line height.

H4: bold, normal line height (eg. used for introduction).

H5: semi bold third largest font size.

Normal: regular, normal line height, body text.

 

This is how headers look into your text of the event website

 

 



Images

You can use images in many different ways. For example in the background of your website or as a Header on your homepage. To make sure your images are displayed correctly on both mobile and desktop, there are a few things you should keep in mind. We made a list of the most important focus points.

 


Specifics

File format

Momice supports .PNG, .JPG and .GIF. you can choose the type of your preference. Images should never exceed the maximum of 3MB.

 

Dimensions

Images can be added to your website on several places. The following dimensions apply:

 

Favicon

Dimensions: 128 x 128px. Read more.

 

General information

Advised dimensions: 1920 x 480px

Submenu image: Minimum 480 x 240px.

 

Floor plan / Attachments

Minimum: 640 x 320px.

Full screen: 640 x 320px.

Maximum size: 3 MB (Only JPG or PNG)

 

Header widget

The header widget contains a screen wide image with a fixed height with extra possibilities to place a title, subtitle, call-to-action button or logo. 

 

Image widget

The image widget can be displayed screen wide or column wide. On mobile devices the entire image is shown proportionately smaller so that everything remains visible.

 

Background images for homepage widgets

Minimum width desktop: 1920px.

Height: 200 / 400 or 600px.

 

Read more about the homepage and widgets here.

 


Mobile representation

When an image, logo or background image is displayed on mobile, different rules apply. These are the most important things to take into account:

 

Images in widgets

You compose the homepage by using widgets. Placing an image on the home page can be done in the image widget or in the header widget. The most important difference between the two is, that images in the header widget will be cropped, whereas images in the image widget will be scaled according to the screen.

 

If your image contains text, it is mostly advised to use the image widget. Please check if the text is still readable when the image is shown on al smaller, mobile screen.

Read more about the widgets. Read more.

 

Safe area mobile

When using the header widget, make sure you place the most important elements of your image within the ‘Safe area mobile’. Everything that exceeds this area (left and right of the middle) will not be displayed on mobile devices.

 


Background images & logos

You can design and customise the background of your website by using images, colors and a logo, or combinations of these elements.

 

Color filters

You can add a color filter to each image, with or without gradient.

 

Logos

When you want to add a logo to your website, use an image with transparent background. This way, your logo will be displayed correctly, without a white square around it.