Everything listed under: 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.


  • Partner Spotlight: Collision Media Balances Style and Substance with LightCMS

    Collision Media is a LightCMS Professionals partner based in Nashville, Tenn. who has built its business around the LightCMS content management system to create more than 200 websites (and counting) for clients — many of them churches, ministries and non-profit organizations.

    Like many web design agencies, Collision Media started out working with open source platforms such as WordPress and Joomla, but quickly realized these systems were incapable of meeting its needs. Using these tools, Collision struggled to scale its business and grow the way it wanted to.

    Collision Media moved to LightCMS’ cloud-based platform because of the ease of use it offered its clients and the simplicity of integration for its designers. Collision Media also takes full advantage of LightCMS's compatibility with responsive design techniques. This allows Collision to create websites that adapt to whatever device is accessing it—whether laptop, smartphone or tablet.

    LightCMS’ intuitive and simple interface now allows Collision Media to complete and deliver more projects in a fraction of the time resulting in its ability to take on more projects and grow its business. To learn more about how Collision Media is leveraging LightCMS to expand and grow its design business, read their full Success Story on the LightCMS Website.

  • Five Ways to Grow Your Design and Ad Agency

    If you're like many creative professionals in a design business, you're probably not as focused as you should be on growing your company. You'd rather work on your next great design than call former customers to ask for a referral. But without those calls and referrals, the business won't last long. Here are five simple, but often ignored, tactics for expanding a design business.

    1. Be a Salesperson

    You prefer to think you're a designer, producer, or marketer, but to grow your business, you also have to be a salesperson. Selling means asking friends and existing clients for referrals, getting out into the community to network, creating and distributing marketing materials, getting active on social media sites and even cold calling possible customers to introduce yourself.

    2. Don't Discount

    It's tempting to try and grab hold of available projects by offering a low rate, discount, or even a freebie. That's a big mistake. It's much harder to raise your rates once you've set them. Plus, most customers base their decisions on more than just price. So, if you've got a quality service to offer, don't cheapen it with price cuts. This also applies to all the little extras you add in for clients and which you're loathe to add to the bill. If you added a service they requested — a third revision, additional graphics…etc. — put it on the bill. If you don't, you risk starving your business of needed revenues.

    3. Set Reasonable Deadlines – and Meet Them

    We all know we're supposed to meet deadlines, but all too often we struggle to deliver what we’ve promised on time. When you're competing against other agencies for business, meeting deadlines is a major factor in getting repeat business and referrals. The perception that you deliver what you promise is critical. You’re always in control of the timeline, so set reasonable expectations and meet them.

    4. Return Phone Calls Quickly

    Handle calls immediately when you can and always return missed calls the same business day. If you find it distracting to talk on the phone while working on a project, then divide your day so some of it is focused on creative tasks with other times set aside for customer calls. Getting back to people quickly will help you land more projects and keep customers satisfied.

    5. Specialize

    At first, most new agencies will take on every kind of work they can get, from newsletters and business cards to corporate logos and websites. But when business starts coming in regularly, it pays to focus on a specific niche or industry. Sharpening your niche will make your entire business more efficient — from focusing your sales and marketing efforts, to streamlining your daily tasks, to improving your customer support on finished projects. It’s better to become the go-to expert in a specific field than to try and do everything. A focused approach will also produce better referrals and help you grow your business to the next level.

Tags

Archive

Try it yourself. It's free.

  • Takes less than 60 seconds
  • No commitment
  • No payment information required
Sign Up For Free

Copyright © 2014 LightCMS® Content Management System Powered by LightCMS LightCMS is a product of NetSuite