Website design refresh

Posted on by

It has been nearly 3 years since I first launched the freestyle developments website and it was long overdue for a design and code refresh. Today I finally relaunched the site.

For me, the biggest change has been to move to a HTML5 doctype. The site now utilises many of the new HTML5 tags, such as header, footer, nav, section, article, aside and time as well as some of the new HTML5 forms attributes. Many thanks goes to @rem and @brucel for their fantastic HTML5 book, which I gleaned a lot of useful information from.

I’ve also given it a bit of a visual refresh, to use some CSS3 properties that I’m now regularly using on sites I build: drop shadows, rounded corners – that sort of eye candy. It means that my CSS no longer validates with no errors, but I’m hoping people in the know will be able to see past the vendor specific CSS property prefix errors e.g. “-moz-”, “-webkit-”.

I’ve gone for a Jello Mold layout to give me the flexibility of a fluid layout within parameters I control. I love fluid layouts, but their biggest enemy is widescreen displays, which makes reading text difficult due to the long line lengths, which is minus points for accessibility.

Assuming your default font size is 16px, my site is fluid between 700px and 1280px. Outside of these browser widths the site is rigid. It means that the site never gets so small that the content is unreadable, and never become so wide that the line width is a hindrance to legibility. Another nice thing about the Jello Mold is that between the max and min, the site re-sizes itself in an organic way, which really has to be experienced to be appreciated (give it a go now, go on).

I’ve also updated my CSS to use the YUI reset sylesheet. I don’t agree with absolutely everything that YUI are doing with their CSS stylesheets, but they have some really interesting ideas and valid points. Either way, it is nice to have part of my styles coming off a CDN and is a bit more up to date than the reset I used to use.

In accordance with my post on the EM unit and browser zoom, I’ve updated my stylesheets and removed all references to pixels in favor of EM’s like I have been doing with all my new website builds for a while now. I don’t set a font size for any of my pages html or body elements, allowing the user to choose the size of my website by setting their default font size for their browser, which is 16px for most browsers.

Anyway, I think that is all I have to say for now. Enjoy the new site and all the interesting tech that comes with it. If this all sounds good to you, and you’re looking for a freelancer like me. Get in touch.

1,165 thoughts on “Website design refresh”

  5. Online resource bestmicrophoneguide com helps creators compare microphone prices features and professional sound quality.

  6. Самое интересное: модели по требованиям мка

  9. Платная частная клиника https://mypsyhealth.ru/services/psikhiatricheskaya-klinika психиатрии неврологии и наркологии — анонимное лечение и консультации специалистов. Диагностика помощь при зависимостях неврологических и психических расстройствах. Конфиденциальность опытные врачи и комфортные условия.

  10. Профессиональная помощь детям https://neuropsy-centr.ru с нарушениями речи и развития. Высококвалифицированные врачи работаем с самыми тяжелыми случаями 99 положительных отзывов новейшее оборудование и инвентарь. Государственная лицензия: Л035-01298-77/01604531 от 09.12.24

  12. купить модульный дом строительство модульных домов

  13. Скоро лето и жара кондиционер для дома купить с установкой широкий выбор сплит-систем для квартиры дома и офиса. Поможем подобрать модель по площади бюджету и характеристикам. Установка под ключ гарантия доставка и выгодные цены на популярные бренды.

  14. Top web design https://webdesignfirmshub.com companies worldwide: a selection of the best studios for website and interface creation. Learn about case studies design approaches UX/UI solutions and innovations to help you choose a reliable contractor for your digital projects.

  15. Top branding agencies https://topbrandagencies.com worldwide: the best studios for brand development corporate identity and positioning. Portfolio reviews strategies and case studies will help you choose a reliable agency for business development and brand enhancement.

  16. капитальный ремонт зданий и сооружений капитальный ремонт зданий и сооружений .

  17. Top UX/UI design https://uiuxagencies.com agencies: the best companies creating user-friendly interfaces and digital products. Explore case studies methodologies and approaches to UX/UI to choose a reliable contractor for your website or app.

  19. An astrology portal https://burcler.com.az with daily horoscopes natal charts and forecasts. Online consultations zodiac sign compatibility and personalized recommendations will help you better understand yourself and make important decisions.

  23. Все новостройки https://tut-novostroyki.ru от застройщиков в Новосибирске — актуальный каталог квартир в новых ЖК. Цены планировки сроки сдачи и акции. Подберите квартиру напрямую от застройщика без комиссии с удобным поиском и проверенной информацией.

  24. Дизайнерское бюро https://vseremontytut.ru проектирование интерьера и ремонт под ключ. Разработка дизайн-проекта 3D-визуализация подбор материалов и полная реализация. Создаем стильные и функциональные пространства с гарантией качества и соблюдением сроков.

  25. Шпаклевка стен https://shpaklevka-sten.ru и потолков в Москве — выравнивание поверхностей под покраску и обои. Качественные материалы опытные мастера и соблюдение технологий. Выполняем работы быстро аккуратно и с гарантией результата по доступной цене.

  28. Бытовая химия в Казани https://bytovayalavka.ru широкий ассортимент средств для уборки стирки и ухода за домом. Оригинальная продукция выгодные цены и быстрая доставка. Подберите качественные моющие средства для чистоты и комфорта вашего дома.

  30. Dream Interpretations 2026 http://www.yuxu-yozmalari.com.az learn the meaning of your dreams with AI artificial intelligence. Dream interpretation from A to Z folk belief interpretation psychological approach. Free online dream interpretation.

  31. Механизированная шпаклевка https://shpaklevka-msk.ru современный способ выравнивания стен и потолков. Ровное нанесение высокая скорость работ и экономия материалов. Подготовка под финишную отделку с гарантией качества и соблюдением технологий.

  34. An online numerology numerologiya.com.az profile analyzes your destiny talents and finances. Accurate calculations number interpretation and personalized recommendations will help you better understand yourself and choose the right direction in life.

  35. Жіночий сайт https://zhinka.in.ua поради про красу здоров’я стосунки та стиль життя. Читайте корисні статті лайфхаки рецепти догляду та натхнення для сучасних жінок. Все про жіночу гармонію саморозвиток і комфорт у повсякденному житті.

  36. Сайт міста Вінниця https://faine-misto.vinnica.ua новини події довідник компаній і корисна інформація для жителів та гостей. Актуальні новини афіша транспорт послуги і все про життя міста в одному зручному онлайн-порталі.

  37. Сайт міста Одеса https://faine-misto.od.ua новини події афіша довідник компаній та корисна інформація. Дізнавайтесь актуальні новини знаходьте послуги заклади і маршрути. Все про життя Одеси для мешканців і гостей міста в одному місці.

  38. Сайт міста Львів https://faine-misto.lviv.ua новини події афіша та довідник компаній. Актуальна інформація про життя міста транспорт послуги і заклади. Усе необхідне для мешканців і туристів Львова в одному зручному онлайн-порталі.

  39. Автомобільний портал https://avtogid.in.ua новини авто огляди тести та поради водіям. Дізнавайтесь про нові моделі технології ремонт і обслуговування. Все про автомобілі в одному місці для власників і автолюбителів.

  40. Блог Києва https://infosite.kyiv.ua події новини цікаві місця та корисні поради для мешканців і гостей столиці. Дізнавайтесь про актуальні заходи життя міста розваги та сервіси. Все найцікавіше про Київ в одному зручному онлайн-блозі.

  41. Сайт міста Житомир https://faine-misto.zt.ua новини події афіша та довідник компаній. Актуальна інформація про життя міста транспорт послуги і заклади. Усе необхідне для мешканців і гостей Житомира в одному зручному онлайн-порталі.

  43. У місті Одеса https://u-misti.odesa.ua актуальні новини події афіша та корисна інформація для мешканців і гостей. Дізнавайтесь про життя міста транспорт заклади і послуги. Все найважливіше про Одесу в одному зручному онлайн-порталі.

  44. Сайт Полтави https://u-misti.poltava.ua новини події афіша та довідник компаній міста. Актуальна інформація про життя транспорт послуги і заклади. Усе необхідне для мешканців і гостей Полтави в одному зручному онлайн-порталі.

  45. Житомир онлайн https://u-misti.zhitomir.ua міський портал з новинами афішею та довідником. Дізнавайтесь про події транспорт бізнес і послуги. Усе для комфортного життя та відпочинку в Житомирі в одному місці.

  46. Хмельницький онлайн https://u-misti.khmelnytskyi.ua міський портал з новинами афішею та довідником. Дізнавайтесь про події транспорт бізнес і послуги. Усе для комфортного життя та відпочинку в Хмельницькому в одному місці.

  48. Київ онлайн https://u-misti.kyiv.ua міський портал з новинами афішею та довідником. Дізнавайтесь про події транспорт бізнес і послуги. Усе для комфортного життя та відпочинку в Києві в одному місці.

  49. У місті Львів https://u-misti.lviv.ua актуальні новини події афіша та корисна інформація для мешканців і гостей. Дізнавайтесь про життя міста транспорт заклади і послуги. Все найважливіше про Львів в одному зручному онлайн-порталі.

  50. У місті Вінниця https://u-misti.vinnica.ua новини афіша заходів довідник закладів і корисні сервіси. Дізнавайтесь про події відкривайте нові місця і плануйте свій час у Вінниці легко та зручно.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>