Web Design & Development Company Glasgow

Website Development

Build for Gaelforce: Developing HTML and CSS for a ConcreteCMS site design from Photoshop design visuals from a Large Glasgow Desing Agency involved several steps.

Visit the website

Site Features

  • Concrete CMS
  • Jquery Development
  • Responsive design
  • Mobile & Tablet Compatible Site
  • Members forums
  • Social Sharing

Screenshot 2023-11-01 at 14-55-03 Gael Force Group Building Stronger.png

The site development process was straight forward:

Step 1: Gather Photoshop Design Files and Assets

We obtained the Photoshop files (PSD) that contain the design elements for the website. This included the layout, images, colors, fonts, and all other visual elements.

Step 2: Plan and Structure

Review the PSD files and plan how we structure the HTML/CSS. Identify the layout, sections, components, and elements. Consider the various different templates and pages needed for the website (homepage, inner pages, contact, etc.).

Step 3: HTML Markup

  1. Start with the Homepage: Create the basic HTML structure for the homepage, including the necessary divs/sections for headers, navigation, main content, sidebars, and footers.
  2. Slice PSD Files: Use Photoshop or a design tool to slice images or extract specific design elements (like buttons, icons, or images) to be used in the HTML.
  3. Code HTML Elements: Begin coding HTML 5 elements based on the design. We use semantic HTML tags for content, such as <header>, <nav>, <main>, <section>, and <footer>.
  4. Add Classes and IDs: Incorporate style classes and IDs in your HTML to be created with CSS.
     

Step 4: CSS Styling

  1. Normalize or Reset Styles: Use a CSS reset or normalize stylesheet to ensure consistent rendering across different browsers.
  2. Create CSS Rules: Write CSS rules to style the HTML elements according to the design. Use selectors based on classes and IDs created in the HTML.
  3. Positioning and Layout: Implement positioning, layout, and responsiveness. We using Flexbox & Grid, to structure the elements.
  4. Styling Specific Elements: Style text, images, buttons, and other components according to the design specifications.
  5. Responsive Design: Make sure the design is responsive by using media queries for different screen sizes (mobile, tablet, desktop).
     

Step 5: Integration with concrete5

  1. Create ConcreteCMS Templates: Use the HTML and CSS to create ConcreteCMS templates. These will involve embedding your HTML structure into the concrete5 PHP template system.
  2. Implement concrete5 Blocks: Break down your design into editable blocks and modules, enabling content managers to modify content within concrete5's admin interface.
     

Step 6: Testing and Optimization

  1. Cross-browser Testing: Ensure the design works and looks consistent across different browsers (Chrome, Firefox, Safari, etc.).
  2. Mobile Responsiveness: Test and optimize for various mobile devices and screen sizes.
  3. Performance Optimization: Optimize images, CSS, and JavaScript files to improve site loading speed.
  4. Accessibility: Verify that the website is accessible, following best practices like using proper alt text for images, semantic HTML, etc.
     

Step 7: Deployment and Refinement

  1. Deploy to Staging Environment: Test the site in a staging environment to make sure everything works as expected.
  2. Refinement and Iteration: Make any necessary adjustments or refinements based on testing feedback.
  3. Launch: Finally, deploy the site to the live environment.

 

Remember, the process may vary based on the complexity of the design and the functionalities required for the ConcreteCMS  website. Additionally we utilized frameworks and preprocessors like Bootstrap or SASS to expedite and streamline some aspects of this process.

How can we help you ?

If you have any questions about web design, web development or internet marketing let us know.

Email Us or Call us

Our Experience