Style Guide
Purpose of this page
This page contains all the styles available on this website. When creating or modifying a page or post, use this as a reference for how it should look.
We recommend reading this entire page before working on the website, so you have an understanding of our design philosophy.
What is a style guide and why do we use one?
A style guide is a set of standards for how pages should be designed on a website. This page contains all the styles available, guidance on when to use them, and how to implement them.
It’s important we all follow these guidelines to ensure we maintain a consistent feel that meets best practices online—both now and in the future.
A style guide carries many benefits:
- An easy reference to the styles available to use.
- Creates a consistent user experience. All our code has been rigorously tested.
- Allows for control over the design so no one can go rogue.
- Forces us to be lean. Jeff Atwood says “The best code is no code at all.” We want to keep a clean and simple codebase that is easy to maintain.
- To enforce best practices to ensure our website meets all usability guidelines.
- Makes onboarding new people easier as the website is well documented.
Corporate branding
Style guides normally contain information on branding, colors, and typography. Our corporate branding can be found in Corporate identity guidelines for CRE. To save duplication, we will keep all branding information in that document.
Coding guidelines
Before writing any new code for our website, please consider the following quote from Jeff Atwood.
“The best code is no code at all. Every new line of code [or feature] you willingly bring into the world is code that has to be debugged, code that has to be read and understood, code that has to be supported. Every time you write new code, you should do so reluctantly, under duress, because you completely exhausted all your other options.”
Jeff Atwood, Effective Programming: More Than Writing Code
The structure of our CSS uses a simplified version of ITCSS by Harry Roberts. ITCSS follows conventions of layering CSS on top of each other from low specificity (such as headings and paragraphs) to more specific ones (such as elements with classes). This organization helps us avoid specificity wars which can lead to bloated and unmanageable code.
Naming is the hardest part of coding. We want all our names to be understandable, easy to remember and descriptive to their function. To help us achieve this, we use two naming conventions called namespacing and BEM. Both these naming conventions work in combination, allowing us to understand their structure and function from inspecting the HTML—so there is no need to delve into the codebase itself.
Namespacing is the convention of prefixing class names to indicate if its function and scope. For example, utilities are prepended with u- and JavaScript is prepended with js-. Namespacing can also signify a temporary change based on the state of an element. For example, using is- and has- on a menu item could signify if the user is currently browsing that page. More on the available prefixes on this website in the next section.
BEM helps us to visualize the structure of the HTML and see which elements are reliant upon each other to be styled correctly. BEM stands for block, element, and modifier—seperated by underscores and dashes respectively. Underscores show an element is reliant on its parent and dashes show it’s modified from the default. It’s important you fully understand BEM before making any modifications to the CSS of this website.
Namespacing and BEM provide structure to our classes but don’t suggest how we should name them. Always choose a name that reflects it’s function and not contents—allowing that element to be reusable. Some user interface elements or components (we’ll reference as components from now) already have industry recognized names (such as accordion, tabs, widget, modal) so before creating a new name, check that someone else hasn’t already done the hard work. All names should be singular including classes, files, and folders.
The structure of our style guide
Our style guide is arranged into sections based on the function of that element or component.
- Base. These are default styles applied to every element on the website. Everything inside base doesn’t require a class. Base elements include typography, forms, and images.
- Components. These are styles that require a specific class and/or HTML structure to create that piece of UI. Any changes should not impact any other part of the website. Components include widgets, buttons, notifications, and navigation.
- Utilities. These are single function classes. They perform a very specific role. They should not be bound to, and changes should be made with caution. Utilities use the namespacing prefix of
u-orl-. Utilities include containers, visibility. - JavaScript. Any interaction or animation that requires JavaScript should be isolated into its own class. This allows it to be reusable and visible to anyone working on the website. JavaScript uses the namespacing prefix of
js-.
Base (default styles)
Typography
All the following styles require no additional classes. It is the “out of the box” styling for the typography on our website.
To demonstrate the styles, we use the Li Europan lingues placeholder text, which is useful because it has an indented structure.
I am the big heading
The European languages are members of the same family. Their separate existence is a myth.
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation, and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
I am a second level heading
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
- The European languages are members of the same family.
- Their separate existence is a myth.
- The new common language will be more simple and regular than the existing European languages.
- It will be as simple as Occidental; in fact, it will be Occidental.
- To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.
- The European languages are members of the same family.
- Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
- The languages only differ in their grammar, their pronunciation, and their most common words.
- Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
I am a second level heading
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
I am a third level heading
Shall we have a quote from someone famous?
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation, and their most common words.
Someone famous in Source Title
I am a third level heading
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation, and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.
I am a fourth level heading
- The European languages are members of the same family.
- Their separate existence is a myth.
- The new common language will be more simple and regular than the existing European languages.
- It will be as simple as Occidental; in fact, it will be Occidental.
- Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
- The languages only differ in their grammar, their pronunciation, and their most common words.
- Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation, and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.
Form
All forms should be style consistently. Below shows all available input types and how they should appear on any form created. If the field is required, add the class required.
Note: Most forms on the website are generated using a plugin. We recommend using that plugin to add or modify forms. When using the plugin it will generate slightly different HTML to the example below but will look the same.
Image
All images will resize to fit their containers. Images will stretch beyond its natural size so if the container is wider than the image it will stop resizing.
Note: Images are automatically resized so they work on all screen sizes. This cannot, and should not, be overridden.
Note: Some legacy images on the website are quite small. In these cases, it’s often more practical to allow them to be wider than their natural maximum size. To allow this to happen, increase the width of the <img> tag.
Table
Tables are styled without applying any classes. They will stretch to the width of their container, regardless of whether the contents are narrower.
Note: Only use tables for tabular data.
Note: Tables don’t work well responsively so we recommend using them in conjunction with the .responsive-table component.
| Column heading 1 | Column heading 2 |
|---|---|
| Value 1.0 | Value 2.0 |
| Value 1.1 | Value 2.1 |
| Value 1.2 | Value 2.2 |
| Value 1.3 | Value 2.3 |
Components
Button
You can style any link to look like a button by adding the .button class.
Form buttons are automatically styled to look like buttons. You don’t need to add any additional classes.
If you wish to make a full-width button you can add the modifier class .button--block to the link or form button.
Some buttons link to pages with video testimonials. To indicate this we have a button with a play icon. Add the modifier class .button--play to the link or form button.
To make a button solid green, add the modifier class .button--primary to the link. Form buttons already have this styling applied.
Caption
WordPress editor uses .wp-caption for its captions. For the sake of simplicity and consistency, we will use this class name everywhere.
Captions will automatically be styled when images are uploaded and embedded using the WordPress editor. If you’re not using the WordPress editor, you can wrap the image and text in a div with the class .wp-caption.
When using gallery images, captions can’t be applied to the group of images. Instead we need to manually add a caption by adding the class .wp-caption-text to the following paragraph. This is an available format in the WordPress editor.
Checklist
This is a list with ticks instead of the default circular bullet. To create a checklist add the class .checklist to the unordered list.
- Conversion secrets of a million-dollar landing page.
- Advanced tips for highly converting websites.
- Bonus tip: hearing the voice of the customer.
- Plus email notification of new tools, research, and conversion insights as soon as we get them.
Video embed
Video embeds ensure all videos stretch to the width of their container, are responsive, and use the 16:9 aspect ratio. To use the video embed, wrap the object or video inside a div with the class .video-embed.
When embedding video using the WordPress editor these styles will automatically be applied. To embed a video paste the URL of the video into the editor and it will automatically embed. Do not use embed code as it could cause visual issues for smaller screens.
Media object
A media object is a two column layout with a media column on the left and a text column on the right. The media column has a fixed width and the image inside will resize to fit that width.
There are three available classes for a media object:
- Default which uses the class
.media-object.
Peter Hardingham
Peter has worked with legendary marketers David Ogilvy and Drayton Bird, and advises all sizes of businesses from startups through to global enterprises.
Logo table
The logo table uses a list to display a grid of logos. This is primarily used to display client logos. Spacing is automatically added to each logo so they sit in the middle of each cell.
Note: This pattern works best when it contains a number that is divisible by three. This is because the last three items in the grid do not display a border at the bottom.
Some of our clients in software and SaaS.
Overlay
An overlay is an opaque layer that sits on top of all the page content. It appears when initiating a drawer. The overlay is clickable and will hide itself and any drawers that are open.
Drawer
A drawer is a content box that overlays the page content. It slides in from the right-hand side. This is used to display the main menu on devices with small screens. Initiating the drawer will also initiate an overlay.
Responsive table
Often tables will not fit on smaller screens. The responsive table component allows the table to scroll horizontally when there is not enough space for it to fit.
By wrapping two divs around a table and adding the class .responsive-table and .responsive-table__body.
Note: We recommend always using the responsive table, even if you don’t think it’s necessary, to ensure there are no layout issues.
Sample output
A sample output is a scrollable box that contains HTML to demonstrate what an element looks like. It’s used in this document to demonstrate various elements and components. To display some sample output, wrap a div around some HTML with the class .sample-output.
You can add sample output inside the WordPress editor by highlighting a section and selecting “Sample block” inside the formats dropdown.
Testimonial
Testimonials include an author image, logo, text and some call to actions. They’re used throughout the site to display client testimonials and industry recognition.
We have worked with Google on several projects, including the launch of Google's Android phone.
“Really extraordinary ‘off-the-chart’ results.”
Jacob Stark is the Director of Digital Strategy at Jenny Craig, the leading weight-loss company.
“About $10 million of increased potential revenue.”
Scott Buckland of Verizon Connect.
“CRE has the unique advantage of being able to draw from its vast experience with the multiple clients it has worked with over the years, to tailor new tests to our business. The insights from the research phase alone were invaluable.
“Overall, I saw this engagement as a great way to soak up as much information from CRE as possible—and internalize some best practices around CRO with our own team.”
We have helped TopCashback to be one of the 100 fastest-growing companies in the UK. For three years in a row.
“Sales nearly tripled.”
Lisa Myers, CEO of Verve Search, an Omnicom Media Group agency.
“I would very much recommend Conversion Rate Experts, especially from an agency point of view. It is a great add-on service.”
Ian Harris is the CEO and founder of Search Laboratory. He said the following when asked about working with us:
“Just look at your website and consider what your world would be like if you doubled or tripled your conversion rate, because that is the kind of success they generate.
“They understand conversion, apply it, and they get results.”
DefShop is one of Europe’s leading online hip-hop clothing retailers.
Doubled the sales of some of the best-selling brands.
Broadband.co.uk allows users to compare and purchase broadband services.
Sales nearly tripled.
Cogeco Peer 1 is one of the world’s top-five hosting providers. It hosts more than one percent of the internet.
Increases of up to 100%.
Ran Milo, the Conversion Manager at 888.com, was thrilled about the results achieved working with us and said…
“Great fun, great results. Our return on investment is great.”
Adi Scope, head of Bingo Operations and Product Marketing, had this to say after we grew their revenue:
“Our experience with them has been very fruitful.”
Mark Neal is CEO of Armagard, a B2B manufacturer of industrial casing for computers.
101% increase in leads.
Steven Boyne is the Chief Operating Officer at SOS Worldwide, a B2B broker of office space.
66% more leads.
Emilie Mouquot, Marketing Director of SOS Worldwide, describes what it was like to work with us.
“Not only has it improved the number of leads that we get but also the quality.”
Voices.com is a recruitment platform for voice-over artists, having a global network of over 25,000 voice actors.
The conversion rate was originally less than 5%, and Conversion Rate Experts increased it to 20%–25%.
Mike Lee, co-founder of the world’s largest diet-and-fitness community, MyFitnessPal, describes how quickly we learned his business and were able to contribute.
241% increase in sign-ups.
We helped Morphsuits to become the 18th-fastest-growing company in the UK.
63% increase in sales.
Howard Graham, CEO of Made Simple Group.
“The results that we’ve achieved have been very impressive.”
HealthExpress is an online healthcare provider.
“Additional revenue of £1 million per year.”
LED Hut is the UK’s market-leading online seller of LED bulbs.
“The results have been extremely positive.”
Geeks2U is an Australian computer repairs company.
“We've added revenue in the seven figures.”
Franck Unternahrer is the Digital Marketing Manager at The Foundry, a visual-effects software company whose clients include Pixar, ILM, Walt Disney Animation Studios, and Sony Pictures Imageworks.
“It's fantastic—like having an extension of my team. They understand our pain, our industry, and our visitors' frustrations.
“Some of our senior executives didn’t understand how CRO could have such a big financial impact. So far, we have seen increases of up to 44%.”
HomeFinder is a leading real-estate site.
“Conversion Rate Experts are by far and away the number one in the world.”
GoHenry is a financial services technology (FinTech) company that combines web and mobile apps.
“I would recommend you use Conversion Rate Experts. They balance strategy and execution with aplomb. If you are looking for a supplier in this space, look no further.”
AAG is America's largest provider of reverse mortgages.
“I went into this project fairly skeptical that we'd be able to achieve a 30%+ improvement. At 50%+, it far exceeded our expectations.”
Piktochart provides web-based infographic software.
“Our experience has been wonderful. We have seen a lot of wins … worth about $300,000.”
Conrad Doyle is the Digital Marketing Director at Hertz, the car-rental company with locations in 150 countries.
“We thoroughly enjoyed working with the team at CRE. They helped us get our CRO program off the ground.
“We now have a much deeper understanding of some of the key customer pain points and, more importantly, a well-defined roadmap on how to address them.”
Michael Sawtell is an Executive Vice President of RealtyTrac, a real-estate information company and an online marketplace for foreclosed and defaulted properties.
“We received a solid lift in conversions, and the learnings we received from the process were very valuable.
“Our team now thinks about CRO differently, and our ability to run tests has vastly improved.
“It has been a great experience.”
Doug McLaulin is Head of Growth Marketing at eMeals, the market leader in online meal planning.
“Allowed us to enter into a current growth stage that we have really never experienced beforehand, experiencing record growth.”
Charlie Hazlehurst is VP of Product and Marketing at Course Hero, a major crowdsourced learning platform.
“We’ve seen a lot of success. They have been well worth the cost.”
Doug Breaker is CEO of Earth Class Mail, the world's leading mail-digitization service.
“They’re best in the business. If you measure their impact, it's well into the millions of dollars.”
Chris Morling is the founder of money.co.uk, one of the most popular financial-comparison websites.
“Conversion Rate Experts were looking for monumental wins, and suggested big changes across our business. They recommended, and helped us to build, what became the second-busiest financial community in the UK.”
Ron Patiro is Global Experimentation Manager at PayPal.com.
“At Conversion Rate Experts, I learned a tremendous amount. They are the best in the business.”
John Warrillow is a serial entrepreneur, having started and exited four companies. He is also the author of the best-selling book “Built to Sell.”
“My sell-through doubled.”
Moz is the search marketing industry’s leading SEO software provider, with a community of over 250,000 members. Its founder, Rand Fishkin, credited us with helping his company to grow from an agency into a software company.
“They have helped Moz add more than $1 million to our bottom line this year. They’re the best in the business.”
Managing Director of the UK's largest printer-ink company.
“If you’re serious about getting the best results … then they are the number-one choice.”
Marketing Director of the UK's largest printer-ink company.
“We were turning over £1 million. Now we’re turning over £36 million.”
Smart Insights helps marketeers to plan, manage and optimize their marketing.
“We’ve seen uplift in the order of 50%, 60%, even up to 100% for some of the individual tests.”
WorkflowMax is online job-management software, owned by Xero.
“Working with Conversion Rate Experts has been extremely stunning in terms of results.”
AlgaeCal is a health e-commerce company.
“You’re just losing money every day that you don’t hire CRE.”
Limeade Listening (formerly TINYpulse) is an online B2B platform for engaging employees.
“It was a professional dream come true for me to have worked with them.”
Norman Records is an online record store. Econsultancy described its website as a “masterclass of e-commerce design.”
“Seeing growth quicker than we expected.”
QuickBooks Time Tracking (formerly TSheets) is a B2B software app. It made Deloitte’s Fast 500™ Rankings with a growth of 682%, and subsequently sold to Intuit for $340 million.
“More than 10x ROI.”
Nazli Yuzak, Senior Digital Optimization Consultant at Dell.
“If you don’t have a solid conversion rate plan, I would definitely advise you to get in touch with Conversion Rate Experts.”
Boomi is an enterprise software company that provides cloud computing services.
“Working with Conversion Rate Experts has been great for two reasons. First, it's great to see the wins coming in—between 15%–49% on key pages—which have a direct impact on our business. Second, our team has applied the CRE framework when looking at the rest of our business. We’ve become more structured, data-driven, and are passing on our learnings with our broader teams.”
Julian Hearn is the CEO and founder of Huel, a “nutritionally complete” food.
“£3 million added revenue per calendar year.”
Big Interview provides software and content for job interview training.
“More than doubled revenue.”
Yomdel provides a fully-managed, 24/7 live chat service. It hired Conversion Rate Experts to create a Blueprint Report for Rapid Growth.
“Our experience with Conversion Rate Experts has been entirely positive. I couldn’t recommend them highly enough.”
Ramit Sethi, I Will Teach You To Be Rich, a New York Times Best-seller.
“I knew I had to work with these guys (I did, and they were great).”
Andy Fossett is co-founder and CEO of GMB Fitness, an online exercise training company.
“CRE pushed us to try tests we normally wouldn’t have gone for. They took the time to teach our team their process, and we’ve learned a lot about how people use our site and what stops them from trying our product.”
Kell Wynn is Director of Digital Marketing at Pritikin, a leading weight-loss company.
“The results have been exceptional. CRE are super responsive and very professional.
“We’ve also learned a lot. I can’t overemphasize the educational aspect of the program. It has been just as important as the financial gains.”
Tesalate is a market-leading fashion brand.
“Our company grew exponentially”
Best Worlds is a web development agency that specializes in Magento and WordPress.
“Really big results. Wins that had numbers that are almost hard to believe.”
In the Inc 500, Quimbee was named the #9 fastest-growing education company in the United States.
“The actual dollar ROI has been outstanding. We’ve had a number of experiments that have got 30% … 40% … 50% lifts in conversion rate.”
Focus Clinics is a world-leading clinic for laser eye surgery.
“All this cold analysis comes from a warm team who are a delight to deal with”
Magoosh is an education company that provides online test preparation and support to students.
“Working with the team at CRE has allowed us to accomplish way more than I ever imagined.”
Education Affiliates operates post-secondary schools across 45 locations in the United States.
“After some important research, we immediately saw significant increase in the form completions. We’ve also improved the number of enrollments and starts.”
HotelGuides is an online travel agency.
“Several hundred thousand dollars in additional income.”
Adaptive Health is a leader in science-based nutritional health supplements.
“Before we hired Conversion Rate Experts (CRE), we’d already had wins by using the materials CRE had published—the great case studies and articles. We figured we could expect even better results working with their teams directly.
“We haven’t been disappointed. Over the last few years, we’ve seen numerous, substantial wins, which have had a significant effect on our bottom line.
“CRE led us in directions we wouldn’t have pursued, which resulted in concrete wins that have enabled us to adopt new channels for acquiring customers, channels that would otherwise have been impossible.
“If any organization is looking to improve its testing program (or even to begin one), I’d highly recommend they hire the talents and resources of Conversion Rate Experts.”
Urban Forex is an educational platform for financial trading.
“I would say this probably will be the single most important thing you will do for your business.”
MyWallSt (formerly Rubicoin) is an award-winning mobile app for personal finance and investment.
“It was worth it 10 times over. We’re seeing incredible growth.”
Blexr is one of the most successful performance marketing companies in iGaming, and operates the biggest free casino games site in the world.
“Increases in conversion rate of over 100%.”
Jamf is a leading SaaS software solution for mobile-device-management (MDM), helping companies to manage their Apple devices.
“Improvements of 30%, 40%, 50%, and 70%.”
Giesswein is a footwear brand and manufacturer.
“20% increase in conversion rates compared to last year.”
ReclaimPPI is a financial claims website.
“Sales tripled—from 1–3 million per month—in just 8 months.”
Predator Nutrition is a bodybuilding supplements and sports nutrition company.
“We’re looking at million-pound increases.”
MoreNiche is an affiliate marketing company specializing in the health, beauty, and fitness industry.
“Past the seven-figure mark of increased revenue.”
sofatutor is an online educational platform.
“More than a million euros in additional revenue.”
Chirp designs and sells products to relieve back pain.
“We’ve seen multiple six- and seven-figure wins throughout the funnel, and are now branching out into new products based on the insights.
“I’d recommend CRE to anyone looking to grow their business.”
Bestshopping is a leading Italian cashback website.
“We have many more first purchases.
“Everybody doing business should use Conversion Rate Experts.”
Fanatical is a gaming and digital entertainment platform.
“Half a million pounds of annualized revenue uplift.”
DS Smith is a leading global packaging company.
“Conversion rate more than doubled. Cost-per-acquisition halved.”
Positive Parenting Solutions is an online education company.
“CRE has been the best investment we’ve ever made.”
ThinSlim Foods is one of the largest low-carb food companies.
“Over a million dollars in extra revenue.”
Rand Fishkin is co-founder and CEO of SparkToro, a software company.
“150% increase in conversion rate.”
Corporate Finance Institute (CFI) is a leading global provider of online training and education for finance and investment professionals.
“It’s worth well over seven figures to us.”
truLOCAL is a online store that lets customers buy food from nearby suppliers.
“55% increase in sales on just the home page alone. We wish we had started with Conversion Rate Experts sooner.”
Greg Mowat is co-founder of Loqbox, a Fintech company awarded entry into Deloitte’s UK Technology Fast 50, growing an incredible 875% in four years.
“CRE was instrumental in helping us to instill a culture of test-and-learn in our business, which has been fundamental to the world-class growth and success we've achieved.”
Igloo Vision is a B2B technology company. It hired Conversion Rate Experts to create a Blueprint Report for Rapid Growth.
“CRE are a great return on investment. We’ve had such a positive experience with them.”
Jimmy Joy is a meal replacement company based in the Netherlands.
“We’ve seen a quarter of a million euros uptick in revenue. You can calculate what you need to break even. We’re way above that point.
“Every step of the funnel, we’ve tested, found winners, and increased conversion.”
Entrepreneurs Circle provides training, tools, events, coaching, and other services to entrepreneurs.
“We hit our target 18 months early. It’s the best experience we’ve had working with anyone external.”
High Performance Academy provides training, community, and tools to car tuners.
“I’ve had nothing but good experiences with Conversion Rate Experts. We’ve made more revenue, learned a lot, and had a lot of fun.”
DiamondBack Covers build ultra-durable truck bed covers that lock and seal your truck bed from weather and theft.
“The results that we’ve seen have been monumental. It translated into literally millions of dollars of increased revenue for us.”
Hostinger is a Lithuanian-based hosting company operating worldwide, providing website hosting, VPS servers, and email hosting.
“We found out what’s most important and what we should focus on. It produced some great results.”
HappySelf creates multi-award-winning daily journals that promote happiness, develop positive habits, and nurture enquiring minds.
“Our business grew 50% over the last year, and a lot of this was down to the changes made with CRE.”
Parrot Print is a manufacturer and online retailer of customized print products.
“Working with Conversion Rate Experts has been phenomenal. We’ve seen a huge increase in our conversion rate.”
Alan’s Factory Outlet is an online seller of customizable carports, metal garages, and sheds.
“We’ve got some tests which were close to 100%, 64%, … we got 86%. The return on investment is close to 10x return.”
Optibac is the UK and Ireland’s most recommended brand of probiotic supplements.
“The return on investment. It’s incredible.”
Renogy is one of the biggest off-grid solar providers in the United States.
“Over $10 million in potential increased revenue.”
Homeaglow is an online marketplace that connects households with home service professionals.
“Ultimately, it's led to 4 to 5x growth in revenue and customers served.”
Custody X Change is a SaaS company that helps separated parents improve their co-parenting outcomes through better scheduling and parenting plans.
“CRE lives up to the hype.”
Sherpany provides a SaaS meeting management platform for the C-Suites and boardrooms of elite organizations.
“We've tripled the conversion rate on our website.”
Utilities
Container
Containers are full-width elements that contain the content within a certain width. All containers use a percentage width with varying maximum widths.
There are three different containers that can be used.
- Default which uses the class
.u-container. If you’re unsure which to use, use this. - Small which uses the class
.u-container-sm. Applies a narrow maximum width which is ideal for text. - Large which uses the class
.u-container-lg. Applies a wide maximum width which is ideal for headers, footers and very wide content.
Layout
A layout contains two columns of different widths. This pattern is used for the default page layout with a sidebar and main content. On small screens, the columns will stack (unless the sidebar is hidden using visibility classes) and side by side on larger screens.
This page is a demonstration of a two column layout.
Spacing
Spacing utilities reset the padding or margin of an element. To reset the padding or margin, add either .u-no-padding or .u-no-margin.
Section
A section adds margin above and below. Section spacing increases the larger the screen becomes. To create a section, wrap your content in a div and add either .u-section.
Note: If two sections are placed one after another the spacing between them will collapse.
Visibility
Visibility classes show and hide content at different breakpoints. This website has two different breakpoints for small and large screens.
The following visibility classes are available:
.u-hiddenhides the element at all times..u-visibledisplays the element at all times. Note: This will force the element to display block..u-hidden-mobilehides the element for small screens only..u-visible-desktophides the element for large screens only..u-visible-mobileshows the element for small screens only..u-visible-desktopshows the element for large screens only.
Clearfix
A clearfix is a way to force an element to contain its children elements. It’s generally used in combination with floats that break the normal layout flow. It can also be used to stop margins from collapsing into each other. To add a clearfix, wrap your content in a div and add the class .u-clearfix.
What’s your goal today?
1. Hire us to grow your company
We’ve generated hundreds of millions for our clients, using our unique CRE Methodology™. To discover how we can help grow your business:
- Read our case studies, client success stories, and video testimonials.
- Learn about us, and our unique values, beliefs and quirks.
- Visit our “Services” page to see the process by which we assess whether we’re a good fit for each other.
- Schedule your FREE website strategy session with one of our renowned experts.
Schedule your FREE strategy session
2. Learn how to do conversion
Download a free copy of our Amazon #1 best-selling book, Making Websites Win, recommended by Google, Facebook, Microsoft, Moz, Econsultancy, and many more industry leaders. You’ll also be subscribed to our email newsletter and notified whenever we publish new articles or have something interesting to share.
Browse hundreds of articles, containing an amazing number of useful tools and techniques. Many readers tell us they have doubled their sales by following the advice in these articles.
Download a free copy of our best-selling book
3. Join our team
If you want to join our team—or discover why our team members love working with us—then see our “Careers” page.
4. Contact us
We help businesses worldwide, so get in touch!
© 2024 Conversion Rate Experts Limited. All rights reserved.
