Jump to content
AndZyk

designconcepts

Recommended Posts

post-3576-0-92774100-1464217580_thumb.jp

Our agency website is not exactly new, because we relaunched it late 2014. At this time we have build it with the CMS Contao and Bootstrap as framework. Although I always liked our website, I was never quiet happy with it. Contao is a great CMS, but knowing ProcessWire it felt tedious managing content. Also it limited me as a developer.

So the past months I have rebuild our website with ProcessWire and switched the framework to UIkit, because it made a good first impression on me and I wanted to learn it. Now I am happy with our website, because it is cleaner, faster, easier to manage and more optimized for search engines.

www.designconcepts.de

Modules used:

  • ProFields
  • ProCache
  • Map Marker
  • Pages2JSON
  • Markup Sitemap XML
  • Tracy Debugger
  • Email Obfuscation

Regards, Andreas

  • Like 12

Share this post


Link to post
Share on other sites

Well done! ^-^

  • Like 2

Share this post


Link to post
Share on other sites

Very impressive (on mobile at least). I loved the "negative color" effect between sections.

  • Like 1

Share this post


Link to post
Share on other sites

Also it limited me as a developer.

In other words: processwire does not limit you as a developer.

So obvious, but didn't cross my mind so far to put it in these words.

Added this one to my list of processwire arguements.

  • Like 1

Share this post


Link to post
Share on other sites

Very nice and clean, congratulations!

My only suggestion, as you are already using https, is to enable http/2, it will be faster! :)

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the nice responses.

@Sérgio:

Unfortunately our hoster currently doesn't support http/2. Not even PHP7, which bothers me.

I will definitely look into it, because I haven't tried http/2 out yet, but it sounds promising.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By schwarzdesign
      Just a few days before christmas we relaunched our own agency website at schwarzdesign.de using ProcessWire! The old Drupal-based site was getting a bit outdated, we wanted to rebuilt it with fewer, more focused content pages, clean & minimalistic design and better performance for mobile visitors. Note that the site copy is only available in German.
      After a couple of successful ProcessWire projects such as Engfer Consulting and Joachim Kobuss, we decided to use it for our own site as well, mostly for it's small footprint and developer-focused API.
      We also have a dedicated ProcessWire page on our new site, check it out here!
      Modules used
      ProFields Automatically Link Page Titles TinyPNG Image Compression Color Tracy Debugger Sitemap Duplicator ALIF - Admin Links In Frontend A focus on content
      We went for a minimalistic approach with a limited set of design elements to highlight our content, which is mostly copy about our services and approach to web design. The two-column layout is built with a single Repeater Matrix section with fields for left and right copy, left and right images and a couple of display options for column width and alignment. Other Repeater Matrix types include a full-width image with some additional links (used on the homepage), teaser sections for current news and projects as well as a list of services.
      We used dedicated page types (templates) for services, projects and news. This allowed us to use those as taxonomies for our reference projects, and create cross-references to those pages in one go. For this purpose, there's also a dedicated CMS template and pages for all Content-Management-Systems we use, allowing us to categorize our projects and news in regards to the CMS used and show appropriate pages in the recommended content sections.
      Performance
      Loading times become ever more important with the rising amount of mobile traffic, both for the bounce rate and for SEO purposes. For client-side performance, we got rid of all external libraries (CSS and JavaScript). All CSS is written in SASS; we use a very stripped down version of Bootstrap 4 that includes only the grid system, the utility classes and a select few of the components. We also avoided the components requiring jQuery, allowing us to get rid of jQuery entirely. The few interactive parts of the site (flyout menus, the theme switch, adding the blur filter for the background image on scroll) are written in simple vanilla JavaScript.
      Server-side, we use the ProcessWire page cache to minimize server response times, as well as Cache-Control headers and GZIP compression to make sure all assets are as lightweight as possible and cached client-side. One problem we had were the large header images requiring transparency. We ended up combining a couple of approaches to minimize image loading times:
      SVG assets where possible (for example, all the service pages (Kompetenzen) use SVG for the header images. Responsive images to serve the smallest possible image for each device. PNG compression using the TinyPNG service and the TinyPNG module. This had possibly the highest impact, sometimes reducing the image size by about 80%! Design highlights
      One of the adornments of the site are the large, variable sized header images. Position and size can be controlled through the backend: We built display settings for size in viewport width or height, vertical and horizontal alignment as well as optional offsets. The header images are fixed to the viewport, so they always stay in the background. The blurred background uses CSS filters, with a fallback to a simple opacity reduction for older browsers.
      As a gimmick, there is a light and a dark theme for the website, the latter being the default. You can switch between themes using the sun icon in the menu. On the technical sides, both themes have their own stylesheets, compiled using the same SASS source files with different variables. Only the active theme's CSS is directly loaded on the site, the other is included as a preloaded asset. The active theme is saved in the session, so it stays active for the duration of the browser session.
      For our reference projects (Referenzen), we replaced the background color with the primary color of the project (each project has a color field for that purpose). We determine the luminance of the primary color programmatically to find if the color has higher contrast to black or white, and use the light or dark theme accordingly.
      Screenshots












    • By AndZyk
      S. Siedle & Söhne Telefon- und Telegrafenwerke OHG is one of the leading manufacturers of building communications technology in Germany and Europe. For a company of this size it is important to have a solid brand communication. For this reason our agency designconcepts developed a portal where the employees of the company as well as others who work with or have interest in their brand can find everything that is important for the brand Siedle.
      The website introduces the brand, provides informations for different topics (for example logos, typography, colors etc.) and has a large Media-Center with images, videos and documents. The website was build with the framework UIkit.
      brand.siedle.com
       
      Features:
      Repeater Matrix Protected Content Media-Center Cart Auotcomplete Search  
      Repeater Matrix
      The information pages are build with a Repeater Matrix field and have a two columns layout. To be even more flexible, a section is a content element containing two Repeater Matrix fields for each column. This maybe sound crazy at first but was no problem and made complex layouts possible. 😀

       
      Protected Content
      Not all of the informations are meant for guests, so we made it possible to protect each page, section and content element with a checkbox. If this checkbox is checked, the content will only be visible for logged-in users.
       
      Media-Center
      The core of the brand portal is the Media-Center. The Media-Center is actually a mirror of a separate digital assets management database where the client can manage images, videos and documents with a nice interface in a protected environment.
      All new assets will be synced via a shell script containing PHP and curl commands calling the API of the database. This script will be executed every 15 minutes via cron job. This way all of the assets are saved as pages in ProcessWire and we can expand them with our own logic and fields. Also for the unlikely case that the database is not available, the Media-Center would still work.
       
      Cart
      Inside the Media-Center you can add assets to your cart. This cart is for downloading selected assets or sharing them with others. A cart will be accessible for 30 days.
       
      Modules used:
      Admin Custom Files Continents and Countries Email Obfuscation (EMO) Front-End Page Editor Functional Fields Markup Sitemap XML ProCache Repeater Matrix Tracy Debugger Upgrades  
      Regards, Andreas
    • By jploch
      I just relaunched my portfolio website. It's my first ajax driven website using ProcessWire as a CMS.
      Its a showcase of some of my work as well as a digital playground to improve my coding skills.

      If you encounter any bugs or have feedback, feel free to share  

      janploch.de
    • By benbyf
      Hi, Got a couple of sites going live. This is the first one
      Wolfpie creative agency website london.
      This is another collaboration with myself and Charlie Crook Design.
      Using AJAX to fetch new pages so the site feels like a one page app but all the URLS etc work. I was also asked to create a mophing animation of a playful rectangle for the homepage. At points the animation joins with the cutout o and creates the wolfpie logo.

    • By FrancisChung
      Hi,

      I'm trying to design a new User Survey functionality that allows a "User" to specify user surveys that pop up
      after a user clicks on an audio button after a user watched a video after visiting 5 pages on a site when users bounce  etc etc
      So basically the potential to launch a User Survey from various places under various trigger conditions.
      I have already built User Survey capabilties where if the a particular User Survey field and certain trigger fields are filled in, it will trigger the user survey accordingly.
      I'm not really happy with the current design as it's highly coupled at the moment and I feel the design is too brittle to accommodate changes that are drastic (oh, like the one I have above for example)

      Has any one implemented any flexible User Survey functionality that has various triggering capabilities? I googled far and wide but I've not seen anything remotely close to what I'm looking for. All articles I've found seem to concentrate on designing the User Survey itself and not on the (smart) delivery of it.
       
×
×
  • Create New...