ldanielswakman / nttd-design

Web design & front end implementation for NTTD website

Netherlands Turkey Trade Directory Design

Web design & front end implementation

Setup

The pages can be run from a PHP 5.5+ server, or via setting up a local server via applications like MAMP.

Pages

• Home page (index.php)
• Trade directory (trade_directory.php)
• Content page (page.php) ...

Changelog

• 28.04.16 - added new background images (and changed order)

• 07.04.16 - tweaked spacing of home page blocks

• 29.03.16 - added business opportunities blocks

• 28.03.16 - added featured event banner to homepage, and added event page with left submenu

• 21.03.16 – added 2x clickable SVG maps: Regional & Jurisdictional; jurisdictional map is now under address information

• 13.03.16 – trade directory category/result list sticky boxes, sectoral info index card tweaks, added tweet/address button to Contact Us Page, Added table styling for Address page

• 08.03.16 – changed menu top-level icons, added facebook 'Follow us' button, previewed in contact paged

• 08.03.16 – mobile improvements nav menu, orange tulip in header compact menu, added home button to nav menu, made homepage hero font bold

nttd-design's Issues

Grey space on bottom of intro content blocks

Sector Icons

Hi Daniel,

Two of the icons related to Construction Sector and Arts, entertainment and recreation Sector are not visible. Could you please check it?

http://beta2016.nttd.com.tr/directory

Pagination

Hi,

Daniel is it possible to change pagination styling from

<ul class="list-pagination clearfix">
  <li><a href="#"><i class="icon icon-arrows-left icon-15x u-floatleft"></i></a></li>
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#"><i class="icon icon-arrows-right icon-15x u-floatleft"></i></a></li>
</ul>

to something

<div class="pagination">
    <span class="previous_page disabled">← Previous</span> 
    <em class="current">1</em> 
    <a rel="next" href="/announcements?page=2">2</a> 
    <a class="next_page" rel="next" href="/announcements?page=2">Next →</a>
</div>

If it is please change it because i have to make huge implementation in order to customize pagination library.

Deliver 'stay in touch w the Dutch' infographic in png

News-Show Images

Hi,

news-show page will be used both for news and events, with small changes. Last time we have talked about event or news image. If you could also add that image (as Ceren gave the example of http://www.hollanduktrade.nl/actueel/evenementen/event/trends-in-advanced-mach) part above the content it would be great. There are also other images, I think they can add up to 5 images but this is not the current concern. We can think about it later but at least for one main image a new part is required and the top is a good fit I guess.

Contact Page Form

Hi,

Ceren told me that in contact page form all fields will be visible without clicking any button. Add telephone number, add job title and add company info buttons are unnecessary, just show all the fields at page reload.

Regards

Who We Are Page Sticky Box

Daniel last time Ceren told that we will have also an orange box on who we are page. Sticky box is something different, I mean while scrolling down it sticks on left top for example. So please consider this page design included the sticky box. Did you just insert the img tag there for the consulate images? Or didyou also made some stylings. I prefer to go over your github commits, not to clone every time every page to my local machine for every new change. But still i see with 30px height. Anyway i will check again the whole situation but be sure that with orange box there everything is fine!

About us > Our Services

Hi,

Daniel could you change the bullets down the page to expandable parts? Like FAQ page, istead arrows you can use + and - signs. You know it better than me, so if you could add also this part, then I will finish all the About Us pages.

Action buttons on 1 line in Twitter widget

Add profile pictures to Twitter widget

Home Page Big Section Images

Daniel Hi,

With the images on home page previously I have mentioned that there are some scrollbars next to images. For the slider images I see that you have corrected those images but downside in sections the images still have scrollbars next to them. FYI.

Replacing figure tags with div tags

Especially under who we are page. But if there exist in other pagea replace also them if possible.

Icons for trade directory

Letter	Name	Icon
[A]	Agriculture, forestry and fishing	icon-basic-flag2
[B]	Mining and quarrying	icon-basic-hammer
[C]	Manufacturing	icon-basic-settings
[D]	Electricity, gas, steam and air conditioning supply	icon-basic-bolt
[E]	Water supply; sewerage; waste managment and remediation activities	icon-weather-drop
[F]	Construction	icon-basic-pencil-ruler
[G]	Wholesale and retail trade; repair of motor vehicles and motorcycles	icon-ecommerce-cart-content
[H]	Transporting and storage	icon-arrows-switch-horizontal
[I]	Accommodation and food service activities	icon-basic-clubs
[J]	Information and communication	icon-basic-message-txt
[K]	Financial and insurance activities	icon-ecommerce-graph3
[L]	Real estate activities	icon-basic-home
[M]	Professional, scientific and technical activities	icon-basic-lightbulb
[N]	Administrative and support service activities	icon-basic-todo-txt
[O]	Public administration and defence; compulsory social security	icon-basic-lock
[P]	Education	icon-software-pen
[Q]	Human health and social work activities	icon-basic-heart
[R]	Arts, entertainment and recreation	icon-music-playlist
[S]	Other services activities	icon-basic-sheet
[T]	Activities of households as employers; undifferentiated goods	icon-basic-case
[U]	Activities of extraterritorial organisations and bodies	icon-basic-world

Header Issue While Scrolling Down

Hi,

I noticed that there is a blank are (probably blank margin) between the top of header and top of browser screen while scrolling down.

CMS Editor Content Style

Hi,

Daniel we are using tinymce editor in CMS side. But it acts weird sometimes, for example some html5 tags are skipped as default behaviour (like figure, article, etc).

I notice that also

AAAA

type coding also not working. I mean it skips anchor link. I thought that is is about the version of tinymce because it is really an old one. So i checked with latest version and still same issue. Another common editor is ckeditor. It solves the issue, I mean it does not skip anchor link but it replaces the tags. That is,

AAAA

the result which is not the original thing.

I will google it a little bit more but could you suggest anything? Or could we change the structure of coding a little bit with same output as result.