My 2nd CodePen pen is picked!

Exposure, Responsive Design, Web Development

I’ve been working on a very large website for an engineering firm that specializes in projects that improve communities and the environment like restoring wetlands and estuaries.

The site uses beautiful images that fill the entire screen with bold text titles. These large images are called “hero” images. I wanted to display the pictures and titles in a way that would look great on all devices. The titles need to be very readable even on a small screen and I wanted to keep the title and images in the same ratios.

After some research and experimentation I found the perfect balance and created a codepen pen to show it off. In the screen print the white title sits in the top left corner of the dramatic night sky with the milky way. No matter how big or small the screen is the image and title remain in the same scale. This is an example of responsive web design.

The image is also a link to codepen.io so you can play around with the screen sizes to see how it adapts.

Responsive Hero Image & Bold Title

My pen was picked!

Exposure, Responsive Design, Web Development

Codepen.io is a great website where you can make your own “sandbox” to play in and try new programming code. Developers post some interesting and very helpful ideas there. Web developers have new ways to layout web pages which are very flexibile. In fact, one of the layouts is called flex box. Its been eclipsed somewhat by CSS Grids which has more features. I read many articles that talked about using CSS Grids to divide a site into header, body, side bar and footer.

Most sites have way more sections than that. I wanted to create a template that I could use over and over again. I started playing around and came up with reusable, responsive grid layout that I posted on CodePen. It isn’t easy coming up with a new idea for codepen so I was thrilled when my pen was “picked” today.

I’ve attached a few screenshots as well as the link if you want to try it yourself.

https://codepen.io/jfksdca/pen/wZaQbx

Grid-Sections-Stack-on-Mobile-DeviceResponsive-Grid-Sections

Website Hosting

Performance, Web Development, Website Hosting

When you type in the address of a website, programming code interprets what you want and pulls information from a database, retrieves instructions on how to style each page, and displays images such as logos and photos, animations and videos. All those files must be hosted on a server which is available 24/7 to anyone interested in your business. Servers require constant monitoring and updating and are kept in very secure, temperature controlled environments.

Thrive Web Solutions does not offer hosting services because there are dozens of well respected companies offering hosting at very affordable prices. We also believe it is in your best interest to have your own hosting account that is maintained by someone other than your developer. Hosting companies maintain servers around the world which means your site will not be disrupted if your city experiences an event like a temporary power outage. Our passion is helping you and your business be successful. We also understand that not every working relationship is a good fit. If you control the hosting account you have the ability to easily find another developer. That gives you peace of mind and keeps us on our toes.

We recommend purchasing all the services that support your website and business from different vendors. Keeping these services separate protects your personal data and prevents downtime. We purchased thrivewebsolutions.com from domains.google.com. We host our website at SiteGround.com and we subscribe to Outlook 365 email through GoDaddy.com.

We work with dozens of hosting companies and find they all use similar tools we’re very familiar with. If you’re creating a completely new website we’ll be happy to recommend several vendors for your needs.

We decided a couple of years ago to host all of our websites with SiteGround. They constantly upgrade their equipment and have amazing support. They are widely considered the best place for hosting WordPress sites. They have curated unique tools that will keep your site finely tuned and loading as quickly as possible.

We even joined the siteground affiliate program so we can offer you discounts and earn credits we can apply toward our hosting account. You can click the banner below to purchase a hosting account with special discounts.

Web Hosting

Your website produces green house gases!

Performance

coal-burning-electricityScientists have begun calculating how much electricity is consumed by the internet. It requires a great deal of electricity to keep all the servers and routers in climate controlled environments. Most electricity is still generated by the burning of coal. Generating that electricity creates CO2. Already the internet emits more CO2 than aviation. Worldwide only a small fraction of electricity is produced with clean renewable methods. Turns out the larger your website the additional traffic also creates more CO2.

I found this site that will calculate your site’s “emissions.”

https://www.websitecarbon.com

Here is Thrive’s score:Website Carbon Footprint

I optimized the image down to 16% of its original size.

So optimizing your website will make your customers happy to use your fast site and it’s good for the environment!

Web Design vs. Web Development

Added Value, Databases, Web Development
Design vs Development

I believe it’s important to understand the distinction between web design and web development. Individuals can be both designers and developers but it takes time and experience. No two people have the same education or career path. We all acquire skills in a variety of ways. At the most basic level, however, I think one is more of an artist and the other more engineer.

Web Designers often have a graphic design background and training in design principles like color, contrast, balance, and variation. They often use tools like Adobe Photoshop and Adobe Illustrator. Great web designers may have studied something completely different, though. Maybe a physician has a solid understanding of computers and medical systems and is offered a job to consult with software developers. The developers need an expert on medical procedures to ensure their website has accurate information and is easy to access during an emergency. The physician becomes an amazing web designer.

Web Developers often have a computer programming background. They’ve learned computer programming languages like C+, JavaScript, HTML, Java or CSS. They know databases and how to retrieve and organize data for a mobile app or website. A web developer can build complex websites by integrating different software and databases.

Web developers can customize! There are usually several products to chose from if you need software to support your unique website or business. For example, there may be a dozen tools to add a restaurant menu yet not one is a perfect fit. A web developer can add necessary data fields and enhancements to help you run your business. Most importantly, a web developer will make sure a website is coded properly so it loads quickly, works well on slow connections, doesn’t drain your battery, is secure from hackers and is accessible to all users.

There is a marketing firm here in San Diego that has created some absolutely beautiful websites for their clients with restaurants. Unfortunately, the sites take forever to load and look pretty bad on a mobile phone. If you look at this firm’s team page you see the staff is comprised entirely of designers.

This question is not a debate of good or bad, better or best. The world needs creative people with good ideas and people with technical skills to build things. If you need a website you want an individual or team with a good balance of design and development skills. It’s not enough to look for gray hairs. Ask lots of questions and poke around in the portfolio of a potential web firm. Click on the links and check out how the sites look AND how well they perform.

Scroll to Top