Home › Updates

Updates

Displaying the left sidebar content below the main column on mobile

 June 28, 2017
by Flavio Mester

Let’s say you have a page with a left sidebar like this one:

Computer view
Computer view of a page with a left sidebar

Our system uses responsive design, and by default will place the left sidebar content before/above the main content area when the page is viewed on mobile or tablets in vertical/portrait mode. That’s adequate in most situations. However, in the case above you will probably want to override this behaviour, because on mobile those quotes should appear after/below the main content area, rather than before it.

You can now change that behaviour for specific pages simply by editing the Page Properties of the page and switching the Page Template in the Special tab from Default to Left sidebar after main on mobile:

 Page Properties
The Page Template setting

As the name implies, this template setting will display the left sidebar content after the main content when the page is viewed on mobile (and also on tablets in portrait/vertical mode.) Computers or tablets in portrait mode will not be affected. So in this example, the mobile view would be similar to this:

Mobile preview

As you scroll down, you will then see the left sidebar content:

Left sidebar on mobile

 


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

 

  

Tweaking the width of the left and right sidebars on our new website framework

 June 28, 2017
by Flavio Mester

For websites built on our latest framework, the width of the left and right sidebars is 20% and 30% of the page width respectively (minus the gutters). However, there may be instances in which you’d prefer a wider left sidebar to accommodate larger photos, longer text like page names in a vertical navigation, quotes, etc.

You can now use and option in Design > Layout > Advanced layout options to change the left and right sidebars globally to 30% and 20%:

Sidebars width option
The sidebars width option

For more information on our design grid please visit this Help page.

 


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

 

  

How to create centred, short paragraphs using predefined styles and no coding

 June 26, 2017
by Flavio Mester

Centred text

Centred text with a fixed width

There are cases where you may want to have centred text with a short line length. For instance, an introductory paragraph of a Home page that has been set to stretch to the full width of the browser window. Simply centering the text may not be enough because the lines would be too long, which isn’t good for readability. And if you have the line length of paragraphs limited globally in the Design settings, the text would appear off centre in relation to the overall page layout.

For situations like that, rather than adding CSS styles by hand, you can now use a predefined style. Simply select it from the pulldown menu available in the content block’s Advanced options. Notice that since the width is set in em’s, you may need to break a header text and the normal text into 2 separate content blocks, each with its respective width set in em’s.

The content block option

The content block option

 


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

 

  

Limiting the length of paragraphs to increase legibility

 June 26, 2017
by Flavio Mester

Having the right amount of characters on each line is key to the readability of your text. Having lines of text that are too long can make it difficult for people to read your content. Pages in our system are 1000px wide, so if you don't have any side by side content or left/right sidebars, a paragraph may look like this:

Long paragraph

A paragraph that’s too long

 

Our latest website framework allows designers to limit the paragraph width globally. The new Max. line width option is available in Design > Text, advanced (1) and it uses the em unit, which is proportional to the font. You can set the limit from 35em to 70em, as well as Unlimited.

For instance, after setting that option to 50em, the same paragraph would look like this:

The same paragraph after a maximum line length has been applied

The same paragraph after a maximum line length has been applied

 

Notes:

  1. This sets the maximum length for the paragraphs; therefore paragraphs that are shorter are not affected, and neither is the mobile display, which is very narrow to begin width.
  2. We also have new predefined styles for content blocks that allow you to override those settings for specific blocks e.g. to have a very narrow centred heading.

 


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 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

 

  
1 2 3 4 5 ... 22 23 »
 
Top of page