Home › Updates

Updates

Creating responsive, fixed-width page layouts

 June 22, 2017
by Flavio Mester

Although our latest framework uses a fluid layout by default – one in which the navigation bar at the top as well as any header and footer blocks extend the full width of the browser window – you can now create fixed width layouts which will be responsive on small devices as well.

Here is an example of a website using the fluid (default) layout. Notice how the blue header content block extends the full width of the browser window:

Default layout width

Fluid (default) layout width

 

To modify this bahvaiour, change the Layout width setting in Design > Advanced layout settings to either Fixed, 1000px or Fixed, 960px. The header block then becomes constrained to the specified width:

Fixed width

Fixed width option

Fixed width scrolling

The navigation bar retains its static behaviour i.e. as you scroll down, the content “slides” underneath, making it easy to navigate through the website:

Fixed width scrolling

Fixed width scrolling

 

Although the system will automatically add some internal padding to the content area and the page bottom, you may also want to create some visual differentiation between the content and its surroundings. One way to accomplish that is by setting a background colour for the whole window (a light grey in this example) and the content area (white). Easy to do in Design > Layout > Background & borders:

background colour settings

Setting up background colours

 

Finally, since the fixed width only affects the maximum width, the mobile appearance remains the same, whether you’re using a fluid or fixed width layout:

Mobile preview

Mobile preview

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Better accessibility for image gallery app

 June 22, 2017
by Flavio Mester

Our image gallery app’s Lightbox style has now been made WCAG 2.0 (Level AA) compliant on websites built on our latest framework, through the ability to use the image descriptions from the Assets Manager as alt attributes for the img tags, and defaulting to an empty alt if no description is entered.


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

New social media 'follow us' buttons

 June 22, 2017
by Flavio Mester

Social buttons

Two more buttons are now available in Design > Social media > ‘Follow us’ buttons, one for Pinterest and the other for email. You simply need to enter/paste the URL of your Pinterest page or of your Contact page (or mailto: adress if you prefer) into their respective fields.

Similar to the other buttons – Facebook, Twitter, LinkedIn, Instagram, YouTube, Google+ – you have the option of displaying them in different sizes and styles, in color or b&w, at the top and/or bottom of the pages or as floating side tabs. Also, the Instagram button appearance has been updated.


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Minified CSS for faster performance

 June 19, 2017
by Flavio Mester

Rocket

We have minified our static CSS libraries for faster performance of websites built on our latest framework.

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Custom CSS for tablets in portrait mode

 June 16, 2017
by Flavio Mester

CSS for tablets
The new option in YWD Designer

Websites built on our latest framework now allow designers to insert CSS code specifically for the 768x - 1024px breakpoint, typically used by tablets when viewed in portrait (vertical) position.

This can be useful if you would like for instance to maintain the same overall appearance of the bottom of the page as on computers without switching to a mobile layout, while making certain elements narrower or hiding them altogether.

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Applying styling options to buttons globally

 June 14, 2017
by Flavio Mester

You can now give all your buttons a raised – similar to the Google Material Design’s raised button component, with a subtle drop shadow and rollover efect – or hollow – a transparent interior with a border around – appearance, without the need to write any code. The new Style option in Design > Apps > Form field & buttons gives you that ability.

The selected style will be applied not just to “submit” buttons in forms but also to links within the regular content formatted as buttons using stylesheet classes, as described on this page. Other options set in YWD Designer such as the font, text size and roundness will be observed.

Button styles
The new option in YWD Designer

Default style
Default style

Raised style
Raised style

Hollow style
Hollow style

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Creating hollow buttons

 June 14, 2017
by Flavio Mester

To create a hollow button – one with a transparent background and a black border around it, instead of button use simply hollowbutton:

hollowbutton will produce button

You can create a reverse (white) hollow button, useful for instance on “hero” images where the hollow button is overlaid on a photo or dark background. The hollowbuttonreverse class can be used for that:

hollowbuttonreverse will produce button

Note: you can also apply a hollow effect globally to all buttons – including submit buttons – by selecting the effect in the Design settings, Forms Manager App. In that case, the border colour will match whichever one you pick for the “Submit” buttons there.

For more information on how to insert your custom CSS code into a website built in YWD please refer to this section of our Help website.


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Additional predefined styles for content blocks, and new button styles

 June 13, 2017
by Flavio Mester

Additional predefined styles for content blocks

AnimSlideLeft
Slides the content in from the left. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

AnimSlideRight
Slides the content in from the right. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

AnimFlip
Flips the content in. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

MaxText500 – MaxText900
These options allow you to limit the width/length of the lines text within the content block. They can be useful if for instance on a page without a right sidebar and you would like to prevent the text from extending the full width, which might affect readability. It has no effect on mobile, where the lines are inherently narrower due to the much smaller viewpport.

Raised effect for buttons

To apply a raised effect to a button – similar to the Google Material Design style – use the raised class:

button green will produce button whereas button green raised will produce button

Note: you can also apply a raised or hollow effect globally to all buttons – including submit buttons – by selecting the effect in the Design settings, Forms Manager App.

 

Circular buttons

It’s also possible to create small circular buttons. Use the circle class for that, and keep the labels to 1 or to letters or numbers:

button cyan circle will produce Y and of course button cyan circle raised will produce Y

 

For more information on how to insert your custom CSS code into a website built in YWD please refer to this section of our Help website.


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

New design feature: predefined content block styles

 June 11, 2017
by Flavio Mester

Predefined content block classes

The Your Web Department platform comes with several predefined content block styles that let you override its default settings and even apply a whole new look to a block without the need to write a single line of code. To apply a predefined style, switch to the block’s Advanced options and then simply select the class from the list. The currently available classes are described below.

Predefined content block styles
Applying a predefined style to a content block

 

NoImgOnMob

Will hide any images in the content content block from mobile i.e. when the window is 480 pixels wide or smaller. Useful for instance if you have a very large image that you would rather simply hide from phones.

 

WhiteText

Renders all text in the block – normal paragraphs as well H1-H6 – in white, regardless of the website’s design settings. Links and buttons are not affected.

 

BlackText

Same as above, but for black text.

 

AnimZoomIn

Applies an animation effect to the content block. It will fade in and zoom until it reaches its normal size. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimSlideLeft

Slides the content in from the left. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimSlideRight

Slides the content in from the right. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimFlip

Flips the content in. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

CardReg

Applies a style similar to a Google Material Design card component to the block.

Card component
A CardReg-styled content block

To build a block with this appearance, edit your content block this way:

1. Select Normal (DIV) as the Paragraph Format for the image, as opposed to the default Normal setting.

Card component editing

2. Type/paste the rest of the content as a heading (typically H3 or H4) and the rest of the copy as a regular paragraph.

3. Set the content block width e.g. 320px for a row with 3 callouts side by side, with some margin between the callout and the next, if applicable.

Box style

4. Set the block’s Custom CSS class to CardReg.

 

CardHeader

This style is similar to CardReg above and you should set the content up the same way. However, here the style sheet will position the heading text overlaid on the image, and in white. Make sure you keep the heading text very short, as it needs to fit within a single line.

Card with a reverse header
A CardHeader-styled content block

 

MaxText500 – MaxText900

These options allow you to limit the width/length of the lines text within the content block. They can be useful if for instance on a page without a right sidebar and you would like to prevent the text from extending the full width, which might affect readability. It has no effect on mobile, where the lines are inherently narrower due to the much smaller viewpport.

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Adding interactive sharing widgets to any page

 June 6, 2017
by Flavio Mester

YWD automatically adds interactive sharing widgets of the visitor’s preferred social networks to the bottom of blog posts. However, sometimes you may want to include them on a regular page. For instance, in our public website we’ve added them to our News landing page.

How to do that

If your YWD website was built on our latest framework, simply edit the Page Properties of the page and in the Other settings group set the Social widgets option to yes.

Social widgets

The system will then add the interactive widgets to the bottom of the main column of the page. They will look like these, but the buttons correspond to the visitor’s preferred networks, so they will vary for each person:

Sharing widgets

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

 

 
Top of page