Differences

This shows you the differences between two versions of the page.

--- image_requirements [2016/04/06 22:41]
samia [Landscape Image Minimum Requirements]
+++ image_requirements [2020/05/28 19:26] (current)
michaels
@@ Line 1: / Line 1: @@
+#redirect https://support.realgeeks.com/hc/en-us/articles/360043152234
 ====== Landscape Image Minimum Requirements ======
+Real Geeks websites have very deliberate designs that have proven to lead to high conversions.  Because of this, the pages have been constructed to optimize and highlight the most important information per page that will lead to a Call to Action for the site user, thus converting them to leads.  For these reasons, the landscape image appears differently across a variety of page types depending on the design template.  Please follow the instructions below for best results when utilizing the landscape image.
+  * To optimize site loading speed, please keep the image under 8MB.
+  * Start with a high resolution photo, but adjust the width per your preference depending on which type of page you are editing.
+  * Please note that depending on your image size and quality, you may need to adjust the width accordingly across different page types.
+===== The do's and don'ts =====
+  * Landscape images work best with the focal point towards the center.
+  * Set the mood of your site by using visually compelling images.
+  * Remember that the goal here is to capture the lead so keep it simple.
+  * For best results we recommend using images of interiors, exteriors, and landscapes.
+{{:do.jpg?940|}}
+  * Avoid adding agent photos, text or logos as they may become cropped on different web browsers.
+  * Don't over brand your site, doing so can distract your viewer from performing a search.
+{{:dont.jpg?940|}}
+===== Default Size Recommendations for Homepage and Area Pages =====
+Use this design guide when sizing your landscape images for your site. Notice that each design varies in size and scales according to the device it is being viewed on.
+{{::landscape-image-guide-edited-resized_copy.jpg?940|}}
+=====Default Size Recommendations for all Designs=====
 ^ Template Design      ^ Landscape Image Size     ^ Header Logo Image Size ^
-| Molly | 1100 wide × 550 height px | 400×86 px* |
+| Molly | 1100x720 px | 400 x 86 px* |
-| Miranda    | 2220 wide x 720 height px   | 400×86 px* |
+| Miranda | 2200x720 px | 400 x 86 px* |
-| Miranda Thin    | 2200 wide x 550 height px | 400×86 px* |
+| Miranda Thin | 2200x550 px | 400 x 86 px* |
-| Steph w/ Both Tag Line and Search | 920×415 px | 50-100px high and up to 750px wide |
-| Steph w/ Tag Line | 920×365 px | 50-100px high and up to 750px wide |
-| Steph w/ Search | 920×365 px | 50-100px high and up to 750px wide |
-| Steve w/ Both Tag Line and Search | 960×415 px | 50-100px high and up to 750px wide |
-| Steve w/ Tag Line | 960×365 px | 50-100px high and up to 750px wide |
-| Steve w/ Search | 960×365 px | 50-100px high and up to 750px wide |
-| NR w/ Both Tag Line and Search | 960×415 px | 50-100px high and up to 750px wide |
-| NR w/ Tag Line | 960×365 px | 50-100px high and up to 750px wide |
-| NR w/ Search | 960×365 px | 50-100px high and up to 750px wide |
-| ADR w/ Both Tag Line and Search | 960×415 px | 50-100px high and up to 750px wide |
-| ADR w/ Tag Line | 960×365 px | 50-100px high and up to 750px wide |
-| ADR w/ Search | 960×365 px | 50-100px high and up to 750px wide |
 *Any logo will shrink to fit in a 200×43px container while keeping its aspect ratio
-====== Responsive Image Behavior for Other Pages ======
+=====Page Variations=====
+The Molly design template will maintain the same header dimensions across all page layout types. This is a great option for those who prefer to standardize their sites as it will require less customization.  It is an appealing template for those who may not have a team member available to focus on website layout and maintenance.
+Please see below for header image display variations across the Miranda and Miranda Thin templates.
+**
+Homepage and Content Page with Search:** The most important feature of these pages is the Call to Action.  To focus on conversions, the header image will appear larger on these page types with search to accommodate the quick search Call to Action.  The height will be fixed and the image may zoom, slightly cropping the sides of the image.  Please see the bullet points above for best practices in selecting images to optimize this lead-converting feature.
+**Content Page without Search:** These pages will not have a fixed height and will attempt to fit more of the width without zooming or cropping.  This is optimized to display the content of the page as the main focus without being distracting to the potential lead.  The content itself should work towards driving the user to convert to a lead and this design helps expedite that process.
+**About Page:** This page features a full size landscape header image that captures the site user’s attention before listing the agents’ details.  This is a great opportunity to showcase a visually powerful image that highlights the agency’s specialties.
+**Blog:** The blog page for these templates will feature a slightly shorter header image than the Homepage.  This adjustment is designed to focus the view of the user onto the content of the blog.  Depending on the header landscape image you choose for your blog, you may choose to alter the image size to further adjust to this layout.  This option is for more advanced site users who choose to use custom images.  However, this user-friendly lead-converting page can also be optimized by adhering to the image recommendations above.
+To see more about the different templates, click [[page_templates|here]].
+=====Gallery Images=====
+The provided gallery images are optimized for viewing on a laptop screen.  They all work well with the Molly template, which is offers standardized header landscape images.  However, for the Miranda and Miranda Thin templates, not all of the images will be displayed in their entirety across all pages due to the variances in layout design.  Please be sure to test the images on your specific template choice and adjust your image selection accordingly.
+====== Video Background Minimum Requirements ======
-^ Template Design ^ Output Page Type ^ Behavior ^
+The video background file should be in a .mp4 file and has an 8 MBs file limit. It is recommended that the video should have at least 30 Frames Per Second (FPS). **While lower FPS rates are supported, keep in mind that a higher FPS will result in a better quality video.** There is no recommended length but only a maximum file size of 8 MBs.
-| Miranda | Page with Quick Search | Height is related to height of Quick Search Information (at least 535px high) |
-| Miranda | Page without Search | Height is fixed to 680px |

Real Geeks Docs

User Tools

Site Tools

Differences

Page Tools