Skip to main content

Office 365 SEO
Office 365 Tips
Design Tips
HTML Color Codes
Keyboard Shortcuts
Contact Us

Home >> Tips >> Design Tips for Office 365

Design Tips for Office 365 

Creating Pages

When creating pages use the General template.  Using the general template will help elminate problems with formatting.


Site Width

Office 365 offers 3 different site widths: 780px, 980px, and 100%.   Screens have become larger over the years so I recommend sticking with the wider 980px width.  The 100% site width is hard to work with since content alignment will depend on the width of the viewers computer.  For larger portions of text try not to exceed a width of 500-600 pixels for maximum readability.  Along with this, do not make your pages too long.  In general do not exceed 3 sceens long.


Formatting Issues

For those that have Office Live sites, the Office 365 designer is basically the same and as such has some of the same formatting issues.  

  • First, I recommend using the General template when creating a page.
  • Do not have any empty lines.  If you have an empty line make sure you put a space in it.  Empty lines tend to colaspse and caue font chaning issues.



When choosing a font for you site, you do not have many choices.  I recommend sticking with the default font Arial.  Arial is the most widely supported font on the the web.  Also it is a very readable onscreen font. 


Using Other Fonts

I do not recommend attempting to use fonts outside of what Office 365.  If you do need to use a different font, you can create the text in Microsoft Word and paste it into Office 365.  You will receive a warning about the formatting, just click Cancel. 


Testing this font in Office 365 << This is a fancy font, which you may or may not able to read/see, if you see this a just regular text it means your system does not have the font.

Font Size/Color

Most designers recommend using a 12pt font for maximum readablility.  Office 365 by default uses 10pt.  Also a number of designers also do not recommend using pure black, instead use a dark grey.  This site uses Darkest Grey color.


Bold, Underline, Italics, Capatilization

Simply put, do not overuse!  Also a good rule is never to use more than one of these together, ie do not bold and underline.  Do not put content in all CAPS!



Under the Design tabs there is an option for changing the layout of your pages.  This site use Four, Span Top and Bottom.  If you need more layout options then you can use tables.


Copy/Pasting Content

When coping content I always recommend you paste it into MS Notepad first.  Then copy it back out of MS Notepad and paste it into the Office 365 designer.  Doing this will remove any content or formatting.  MS Notepad can be found under Start >> All Programs >> Accessories  >> Notepad.



Press Ctrl + Z.  This only works some of the time so do not count on it!


Save Pages

Save pages often!  Never now when Murphy's Law will kick in.









Updated: February 25, 2012




Follow Us on Facebook!