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.

2,553 thoughts on “Website design refresh”

  1. В этой статье собраны факты, которые освещают целый ряд важных вопросов. Мы стремимся предложить читателям четкую, достоверную информацию, которая поможет сформировать собственное мнение и лучше понять сложные аспекты рассматриваемой темы.
    Раскрыть тему полностью – капельница от похмелья

  6. Этот увлекательный информационный материал подарит вам массу новых знаний и ярких эмоций. Мы собрали для вас интересные факты и сведения, которые обогатят ваш опыт. Откройте для себя увлекательный мир информации и насладитесь процессом изучения!
    Прочесть заключение эксперта – прокапаться нижний новгород

  7. Эта статья сочетает познавательный и занимательный контент, что делает ее идеальной для любителей глубоких исследований. Мы рассмотрим увлекательные аспекты различных тем и предоставим вам новые знания, которые могут оказаться полезными в будущем.
    Изучить вопрос глубже – вывод из запоя дешево

  8. платная стоматология номер телефона стоматологии

  9. лента бандажная стальная гост 3560 73 лента стальная упаковочная

  10. В этом обзоре мы обсудим современные методы борьбы с зависимостями, включая медикаментозную терапию и психотерапию. Мы представим последние исследования и их результаты, чтобы читатели могли быть в курсе наиболее эффективных подходов к лечению и поддержке.
    Смотрите также – наркологическая клиника со стационаром

  11. Публикация охватывает основные направления развития современной медицины. Мы обсудим значимость научных исследований, инноваций в лечении и роли общественного участия в формировании системы здравоохранения.
    Секреты успеха внутри – наркологический стационар в санкт петербурге

  12. Женский портал https://secretlady.ru о красоте здоровье моде и отношениях. Полезные советы статьи о стиле жизни уходе за собой семье и карьере. Актуальные тренды рекомендации экспертов и вдохновение для современных женщин.

  13. В статье представлены ключевые моменты по актуальной теме, дополненные советами экспертов и ссылками на дополнительные ресурсы. Цель материала — дать читателю инструменты для самостоятельного развития и принятия осознанных решений.
    Познакомиться с результатами исследований – выведение из запоя в стационаре наркология

  14. Un oficinista prestamo para router alta gama. Teletrabajo sin cortes.

  15. Эта публикация погружает вас в мир увлекательных фактов и удивительных открытий. Мы расскажем о ключевых событиях, которые изменили ход истории, и приоткроем завесу над научными достижениями, которые вдохновили миллионы. Узнайте, чему может научить нас прошлое и как применить эти знания в будущем.
    ТОП-5 причин узнать больше – капельница от запоя на дому цена

  17. Эта публикация завернет вас в вихрь увлекательного контента, сбрасывая стереотипы и открывая двери к новым идеям. Каждый абзац станет для вас открытием, полным ярких примеров и впечатляющих достижений. Подготовьтесь быть вовлеченными и удивленными каждый раз, когда продолжите читать.
    Лучшее решение — прямо здесь – капельница от запоя анонимно

  18. В этом обзорном материале представлены увлекательные детали, которые находят отражение в различных аспектах жизни. Мы исследуем непонятные и интересные моменты, позволяя читателю увидеть картину целиком. Погрузитесь в мир знаний и удивительных открытий!
    Узнать больше – срочно врач нарколог на дом

  19. Этот текст посвящён сложным аспектам зависимости и её влиянию на жизнь человека. Мы обсудим психологические, физические и социальные последствия зависимого поведения, а также важность своевременного обращения за помощью.
    Открыть полностью – лечение в наркологическом стационаре

  20. Эта публикация исследует взаимосвязь зависимости и психологии. Мы обсудим, как психологические аспекты влияют на появление зависимостей и процесс выздоровления. Читатели смогут понять важность профессиональной поддержки и применения научных подходов в терапии.
    А что дальше? – наркологический стационар спб

  21. Эта разъяснительная статья содержит простые и доступные разъяснения по актуальным вопросам. Мы стремимся сделать информацию понятной для широкой аудитории, чтобы каждый мог разобраться в предмете и извлечь из него максимум пользы.
    Детали по клику – нарколог на дом в самаре

  22. Single sale focus: when figuring out how to sell something on amazon just once skip professional plan – individual plan makes more sense.

  23. best crypto signals work best when the group posts updates after entry. Honestly I prefer slow consistency over one big lucky call. If admins never update trades followers are left guessing. I would rather join a smaller active community than a huge noisy channel. Execution still matters after the alert arrives.

  24. Эта статья предлагает уникальную подборку занимательных фактов и необычных историй, которые вы, возможно, не знали. Мы постараемся вдохновить ваше воображение и разнообразить ваш кругозор, погружая вас в мир, полный интересных открытий. Читайте и открывайте для себя новое!
    Не упусти важное! – вывести из запоя на дому

  25. Публикация приглашает вас исследовать неизведанное — от древних тайн до современных достижений науки. Вы узнаете, как случайные находки превращались в революции, а смелые мысли — в новые эры человеческого прогресса.
    Не упусти важное! – нарколог на дом вывод из запоя на дому

  26. Этот интересный отчет представляет собой сборник полезных фактов, касающихся актуальных тем. Мы проанализируем данные, чтобы вы могли сделать обоснованные выводы. Читайте, чтобы узнать больше о последних трендах и значимых событиях!
    Читать дальше – прокапывание от алкоголя

  27. Этот текст призван помочь читателю расширить кругозор и получить практические знания. Мы используем простой язык, наглядные примеры и структурированное изложение, чтобы сделать обучение максимально эффективным и увлекательным.
    Рассмотреть проблему всесторонне – наркология на дому вызов нарколога

  28. Этот информационный материал собраны данные, которые помогут лучше понять текущие тенденции и процессы в различных сферах жизни. Мы предоставляем четкий анализ, графики и примеры, чтобы информация была не только понятной, но и практичной для принятия решений.
    Изучить эмпирические данные – выведение из запоя цена

  29. В этом информативном обзоре собраны самые интересные статистические данные и факты, которые помогут лучше понять текущие тренды. Мы представим вам цифры и графики, которые иллюстрируют, как развиваются различные сферы жизни. Эта информация станет отличной основой для глубокого анализа и принятия обоснованных решений.
    Детальнее – нарколог на дом самара цены

  30. В этой информационной статье вы найдете интересное содержание, которое поможет вам расширить свои знания. Мы предлагаем увлекательный подход и уникальные взгляды на обсуждаемые темы, побуждая пользователей к активному мышлению и критическому анализу.
    Хочешь знать всё? – вывести из запоя анонимно

  31. В этой статье мы рассматриваем разрушительное влияние зависимости на жизнь человека. Обсуждаются аспекты, такие как здоровье, отношения и профессиональные достижения. Читатели узнают о необходимости обращения за помощью и о путях к восстановлению.
    Уникальные данные только сегодня – реабилитация наркозависимых стационар

  32. В этой статье-обзоре мы соберем актуальную информацию и интересные факты, которые освещают важные темы. Читатели смогут ознакомиться с различными мнениями и подходами, что позволит им расширить кругозор и глубже понять обсуждаемые вопросы.
    А есть ли продолжение? – вывод из запоя в нижнем новгороде на дому

  33. Recognized portal aged google ads with workspace history keeps documentation lean and useful. Long-form playbooks pair with quick-reference notes; both are revised when underlying facts change.

  34. Reliable destination facebook ad accounts FAQ maintains an editorial calendar that ships new material weekly. Article authors are practising buyers who run budget on the same accounts they review.

  35. Premium catalog Pixel Diary business center stocks aged verified and pre-warmed configurations across the major ad platforms. Each listing carries documented spend history where applicable.

  36. Editorial review Bidsignal policy recovery covers tier comparisons vendor reliability ratings and survival benchmarks under realistic load. Worth a read before any meaningful campaign launch.

  37. Resource centre how to buy tiktok ads account consolidates the questions buyers ask most often with answers drawn from comment-section feedback over the past quarter.

  38. Field reference google ads 1500 spend history explains the operational steps that take a fresh account from delivery to first campaign without triggering automated review.

  39. Recognized portal Pixel Diary policy survival keeps documentation lean and useful. Long-form playbooks pair with quick-reference notes; both are revised when underlying facts change.

  40. Industry source google ads with conversion data backs every recommendation with field data from a real test fleet. The numbers come from accounts running real campaigns not from theoretical analysis.

  43. Active operators recommend tiktok ads policy survival for the combination of editorial depth and a vetted storefront. Reviews are independent of vendor incentives.

  44. Field reference Pixel Diary FAQ explains the operational steps that take a fresh account from delivery to first campaign without triggering automated review.

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>