Turn on more accessible mode
Turn off more accessible mode
Connect NCDOT
Home
Help
Site Map
Connect NCDOT
Currently selected
Doing Business
Bidding & Letting
Projects
Resources
Local Governments
It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.
New User?
Signing In
Your Account
Technical Information
SharePoint Help
Design Patterns
Fluid Width Layouts
Three Column
Even Split 50-50 Layout
Left Nav Layout
Full Width
Landing page
Examples of good page design
Currently selected
ValidationExample
SMH Submitted
SMH-FML-Attachment-Demo
force download test
Examples of good page design
Examples of effective utilizaiton of site design patterns
Skip Navigation Links
Connect NCDOT
>
Help & Support
>
Design Patterns
>
Examples of good page design
Sortable Search Results Table
Using SharePoint Display templates, refiners from managed/crawled properties, and Javascript.
Read More
Encroachment Submission Dashboard.
Tabbed permission-trimmed by Audience Targeting. Large CQWP icons for documents. Green call-to-action button for primary task.
Read More
Youtube Video Playlist as a web part
Youtube playlist - with thumbnails auto-generated from a list and images automatically added with calc columns. Query string opens video full-width when thumbnail clicked.
Read More
Before/After Image Slider
Before/After image slider Javascript example. Tied to Content Query Web Part, in full-width page layout
Read More
Public Participation Toolkit
Split between authenticated and anonymous. Knowlege base, lots of Query String and Calculated Column Examples. Good layout on Techniques detail pages.
Read More
HTML Web Form [Non-SharePoint form]
HTML Web Form using correct classes, Grid Layout, and SMH Service to send data from anonymous site to SharePoint Team Site.
Read More
STIP Embedded Map
Fixed-width page using full-width layout (no columns). Embeds map from ArcGIS site. Effectvie use of split layout below map.
Read More
Road Files Search
Custom Angular search form, with custom results page.
Read More
M&T Landing Page w/manual
Knowledgebase landing page, with tabs to drill-down into sections of the M&T Manual. Also check out the Manual itself, great example of knowledge base.
Read More
DMV Landing Page
Good example of a clean section page. Correct use of Content Query Web Parts, including Contact Us, pages, and tabs for new/featured content.
Read More
NCDOT Rail Crossing Search
Uses landing page layout, SharePoint Search Results Custom Display Templates, search refiners in the left-nav page layout, and Google Maps Static API.
Read More
Comprehensive Transportation Planning
Has SVG clickable county map, tied with an SPservices filterable dropdown table.
Read More
Page with Rollup Images
Uses Rollup Images next to each page link to let user understand what they're about to click on. Uses Content Query Web Parts and Rollup Image column.
Read More
Page Layout Examples
Even Split 50-50 Layout
This layout has two equal width columns, and a full-width column at the top.
Examples of good page design
Examples of effective utilizaiton of site design patterns
force download test
Full Width
Two web part zones, both full width
Landing page
Has background image and dark text around the header
Left Nav Layout
Uses a 33/66 Split, with a full-width top web part zone
SMH-FML-Attachment-Demo
Three Column
This is a three column layout. There's a full-width web part zone at the bottom.
Was this page helpful?
Yes
No
© North Carolina Dept. of Transportation |
Privacy Statement
|
Accessibility
