Everything listed under: design

  • New Features: Social Icons and More!

    We're very pleased to kick off this week and this month with some very exciting new features. The first of these is a very highly-requested addition that will be a fantastic benefit for LightCMS customers and for our design partners and their clients. Take a look below to check out everything that's new.

    New Feature: Social Media Icons - Feature Image

    Social Icons and the Social Token

    Looking for a simple way to add social icons to your site? Or, as a designer, are you looking for an easy way to allow your clients to manage their own social icons while still maintaining the integrity of the designs you create? LightCMS's new social token and social media settings offer this and much more.

    The Social Settings

    Once the feature is launched, you'll see a new section on the advanced tab of your website settings. This section allows the user to choose any number of social icons to include and to provide the URL to use with each associated social icon. Click the "Add" button then choose the icons you want to add. Once selected, your icons will show up in your list where you can drag them and drop them to reorder.

    Screen Shot of the New Social Media Settings Panel

    Please note that there are two special icons included that aren't really "social" icons. These are for phone and email and they allow you to provide these points of contact in your list of icons as well, if you so choose. Phone numbers and email addresses will be automatically prepended with the appropriate syntax to integrate with the internal emailing and dialing functionality of smartphones. So, when visitors touch the email icon from a phone, it automatically loads up a new email. When they touch the phone, it automatically starts calling. Nice!

    The Social Token

    In order for the icons to display on your website, your website's template must include the new social token. All of LightCMS's "featured" designs (plus a few others) will be updated to include the social token by the launch of the social feature. These designs include: Coast, Apollo, Gravit, Vanity, Nebula, Tendo, Pepper, Decim, Vere, Grasp, Origami, Devon-Poster, Haus, Helios, and Solus. You may apply one of these designs from the Design Manager if you choose to make use of the social icon feature. However, if you are using a customized template or a fully custom design, the social media token will have to be added to the code of your design files.

    The specs of the new Social Token have been added to our Token Reference Guide. It's a very simple token to implement and once it's in place your clients can control the icons displayed and the URLs used through the simple settings panel described above.

    By default, the social media token renders a default set of icons at 32px square. By using the cssClass attribute, you can adjust the size of the tokens and even replace the default icons with your own. Additionally, the token provides an opacity attribute allowing you to make the icons transparent at the token level.

    The SEO Tab

    Another improvement we've made as a part of this roll out is to create a new tab on the Website Settings screen. The SEO tab now houses SEO-related features for your website such as the 301 Redirect Manager, Robots.txt, and the Google Analytics / Additional Header field. All of these features work exactly the same, they are just on a different tab. This sets apart these SEO-related features while keeping the Advanced tab shorter and cleaner.

    Developer Role on Sign Up

    Finally, we've added a nifty new setting for LightCMS Partners to the client Sign-up Element. Now, if you choose, you can enable the sign up element to assign the Developer Role to users signing up. The Developer Role allows users to view and manage designs for their website. If you want your clients to have access to the built in Design Manager when they sign up, you can now make this happen. This new feature will be available on the Sign-up Element's settings screen.

    Screen shot of the Developer Role checkbox on the LightCMS Sign-up Element

    Scheduled to Launch on Wednesday, May 7th

    All of these new features are scheduled to launch on Wednesday morning, May 7. We're so excited to bring you these exciting new updates and we hope you and your clients enjoy them. If you have any questions, please feel free to contact us anytime at support@lightcms.com.

  • Two New Responsive Designs Released

    We're releasing two new, fully-responsive designs today. As always, these designs are available to be used on any LightCMS website at no extra charge. They are customizable through our built in Design Editor. Plus, advanced users can even download their source code to use them as starting points for their own work.

    To see the designs in action, login to your LightCMS account and visit the Designs section on the top toolbar. Choose the gallery and look for our featured designs. The new designs are named Helios and Apollo. You'll be able to apply them to your website or download their source files. You can also check out images of the new designs in the LightCMS Design Viewer.

    Featuring Sass and SCSS

    These new designs utilize Sass and SCSS. Designers familiar with these languages can work with them natively in the source of these design files. This requires the use of a compiler such as CodeKit to render your SCSS code into stylesheets. If you are not familiar with Sass or SCSS, you can still work with these designs by modifying the rendered style.css stylesheet just as you would with any other design.

  • Responsive Web Design Techniques and Tips

    Your customers are coming to your website over a myriad of devices, from smartphones to tablets to desktops, and the range will likely grow as smaller devices and different sizes of screens come onto the market. To ensure that all of these devices can get full functionality from your site and that your team isn't wasting time creating multiple versions of your main site to accommodate each device, you need to integrate responsive design techniques into your web design.

    Responsive web design is an approach for architecting websites to enable them to automatically serve up content in the most appropriate layout for the customer's device. It's a better approach than creating individual versions for each device, as it doesn't require updating multiple versions of content. This saves time that can be better spent creating high-quality content.

    Responsive design works on a grid principle, with each page element sized according to units on a grid rather than specific measurements, thus producing a display that is proportional regardless of the size of the display. The web architect creates different grid-based templates showing how the pages should be displayed for different devices. The site can then automatically recognize the screen size of the device accessing it and serve up the appropriate layout of the page.

    The over-arching concept for responsive design is simplicity; simple layouts and graphics are more easily reduced and re-constructed without ruining their appearances. Visually-rich designs with complex layouts look great on laptops but need to be simplified on smaller screens.

    In addition to simple design, here are some other tips for creating responsive websites:

    1. Minimize Navigational Aids on Smaller Screens

    If you have just two or three navigational items on a page, list them at the top. But if you've got four or five, instead use a navigational icon at the top and use JQuery to create a simple dropdown menu with navigational choices. This leaves more space for focusing on the content of the page.

    2. Design for Screen Size Not Brand Name

    Determine the different screen sizes you want to target in your CSS files. CSS doesn't recognize names of specific mobile devices but, rather, is programmed with screen widths.

    Determine the most common screen sizes viewing your site then specify their measurements in the CSS media query. Also, include whether you want a portrait or landscape screen orientation. Below is an example of what that code would look like:

    1. @media screen and (max-width: 1024px) {
    2. /* Tablet styles */
    3. }
    4. @media screen and (max-width: 700px) {
    5. /* mobile phone styles */
    6. }
    1. @media screen and (max-width: 1024px) and (orientation : landscape) {
    2. /* Tablets in landscape orientation */
    3. }
    4. @media screen and (max-width: 768px) and (orientation : portrait) {
    5. /* Tablets in landscape orientation */
    6. }

    Remember tablets are becoming the new desktop. More and more users are working off of their tablets, forgoing laptops and desktops altogether. Generally, tablets do well with desktop layouts when in landscape mode, but may require a different template for portrait mode, depending on the number of components and the functionality to be included. Designing with tablets in mind can help ensure that the overall organization is simple and thus able to be designed responsively.

    3. Organize Based on Importance

    Organization and structure of page elements is different for mobile phones vs. desktops. To create a mobile device template, reorder the sections from your desktop version into full-width sections, like stacking blocks, based on their importance.

    • Header, Logo, and Navigational Elements. These normally go on top, to identify the page and make it easy to find the navigational menu.
    • Body and Main Content. The next component should be the article or other unique element that comprises the body of the layout.
    • Sidebars and Advertising. At the bottom comes the advertising or other sidebar content. Sidebar content is the least important content on a page because it's usually boilerplate. It shouldn't infringe on the main content of the page.

    Whatever your layout strategy, do include all of the content and functionality available on the main site. People get frustrated when they can't do the same things on a mobile site that they can on the main one. If customers can update their account preferences or view videos on the main site, they should also be able to view those on the mobile versions as well. There are some exceptions, of course, such as data-heavy elements that may be too much for mobile connections.

    4. Test!

    The best way to see how your website responds to different device sizes is to try it out. You can do this by resizing your browser to test media queries. Also be sure to test it on actual mobile devices to see what your visitors are experiencing. You may want to add more breakpoints (screen sizes) including device-specific ones to get the best appearance for the most commonly-used devices.

    The goal is to make your website as attractive and functional as possible for all of the devices your customers use to access it, while also remaining easy to maintain. Following a responsive web design strategy is important for achieving both goals.

    LightCMS Enables Responsive Design for Everyone

    LightCMS offers many responsive design templates to choose from for creating fully responsive websites that adapt to fit in any browser across all devices. If you are a current LightCMS customer, check out the many different responsive templates by logging in to your website and selecting "Design" on the top toolbar. Then select "Gallery" to view a list of featured designs. It only takes a click to preview the design, apply it to your website, or even download the source code to modify on your own. Plus, as always, you can customize the design in the LightCMS Design Editor as well.

  • New Features: 10 New Responsive Design Templates and More!

    Today, we’re pleased to announce that we’ve added ten new, responsive designs to the LightCMS system. As always, these designs are available to be used on any LightCMS website at no extra charge. They are customizable through our built in Design Editor and advanced users can even download their source code to use them as starting points for their own designs.

    10 New Template Designs

    The best place to check out the new designs is on the LightCMS Design Viewer. Here are links to see a preview of each of the ten new designs:

    New Feature: Custom Domain Check

    We’re also rolling out another nifty, new feature called Custom Domain Check. The LightCMS system now automatically checks all the custom domains you register on our platform to determine if their address records are correctly assigned to LightCMS’s IP address. When you view your custom domains on the Advanced Tab of the Website Settings screen, you'll see a yellow icon with an exclamation point if there are issues that need to be addressed with that domain (see image below). Hover over the icon and you'll find details about what's wrong and what needs to be corrected.

    Custom Domain Check Screenshot

    Remember that DNS changes can take 24-48 hours to propagate completely, so if you recently made updates to your DNS you may need to wait a bit for our system to detect those updates.

  • Latest Responsive Design: Grasp

    We're adding another fantastic, mobile-friendly, responsive design to the LightCMS platform. Grasp is our newest addition and it's available free inside your LightCMS account. Check out images and more details below.

    As with all of our latest designs, Grasp offers a fully responsive display that adapts to fit beautifully in browsers of any width, whether on desktop computers, tablets, or smartphones.  We've also styled a custom login and 404 pages to go along with this design template.

    To check it out, log in to your website and click "Design" on the top toolbar. Then click "Gallery" and Grasp is currently the first design in the list of featured designs. It only takes a click to preview the design, apply it to your website, or even download the source code to modify on your own. Plus, as always, you can customize the design in the LightCMS Design Editor as well.



Try it yourself. It's free.

Takes less than 60 secondsNo commitmentNo payment information required

Sign Up for Free