Skip to main content

Best Practices for Creating a Home Page

Create better home screens by designing with grid alignment in mind, syncing carefully, and optimizing for mobile separately.

Updated over 5 months ago

Your Uniteam Home Screen is highly customizable—and when designed well, it becomes the heartbeat of your internal communications. Whether you're showcasing updates, values, or recognition, a clean and well-structured layout goes a long way.


🔲 Understand the Grid (It’s Built In)

Uniteam uses a responsive grid system, meaning every widget you drag onto the screen will automatically snap into place—you don’t need to pixel-perfect align anything.

✅ We also include a bit of spacing between widgets by default, so things don’t feel crammed.

Grid Layout Tips:

  • Stick to even block sizes when possible (e.g. 2x2, 2x3) to maintain harmony

  • Let each row breathe—avoid forcing too many widgets into a single line

  • Group similar content vertically (e.g., text above video, milestones over leaderboard)

  • Keep column widths consistent to avoid awkward overlaps


🖥️ Start on Desktop First

Create your layout on desktop where screen space is more forgiving.

Once you're happy with the content and order of your modules, use the Sync to Mobile option.


📱 Customize Mobile Separately

Syncing will bring content to mobile but might not preserve the module order or sizing perfectly.

Always check the mobile layout after syncing.

🧠 Pro Tip: For small edits (like changing text), make the update on web, save, then manually update mobile. Avoid syncing again—it could throw off your entire layout.

Use Case: You update a banner image on desktop. On mobile, the text looks squished. Don’t sync—just adjust the size or padding manually in mobile view.


🖼️ Ideal Image Dimensions for Web + Mobile

These dimensions scale cleanly across screen types:

Recommended Sizes

  • 1000 × 250 px – Versatile banner size for both platforms. Looks strong without being too tall on mobile.

  • 500 × 500 px – Perfect square size for profile tiles or visual modules.

  • 1000 × 100 px – Thin banners for dividers or headers.

⚠️ Dimensions to Use With Caution

  • 1000 × 400 px – Can feel too tall on mobile. Only use when visual impact is a priority.

  • Overly wide or tall images (e.g. 1200+ width or 600+ height) – Risk being cropped or poorly scaled.


🧠 Smart Design Tips

  • Design at 2× resolution (e.g., create 2000 × 500 px for a 1000 × 250 px upload) for retina-quality displays.

  • Stick to these ratios: 16:4, 4:1, or 1:1 for safe scaling.

  • Test designs on both platforms—what looks clean on web might be cluttered on mobile.


🔁 Editing Images Later

You can re-sync images to mobile, but this may throw off the positioning and sizing of other mobile elements.

🧠 Pro Tip: For small updates, it's better to tweak desktop → save → tweak mobile → save.


🧠 Use Case: Launching a Culture Corner

A strong homepage might include:

  • A values banner up top

  • Recognition leaderboard + employee milestones

  • Calendar of upcoming events

  • Quick links to HR or safety policies

  • A short video message from leadership


🧱 Final Tips

  • Test across devices—especially mobile

  • Keep text blocks short and scannable

  • Save often when adjusting mobile layouts

Need help with layout? Reach out to Uniteam Support.

Did this answer your question?